ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Howto: FF Matrix + LG Replace + LG TinyMCE + imgsizer + LG LiveLook

June 17, 2009 1:03pm

Subscribe [22]
  • #16 / Sep 03, 2009 1:17pm

    reinvent

    118 posts

    This is my first EE Site….Sorry for the lame question….

    How do I define a file field (As you say: Engine File Field)  in column ONE of the Field Frame Matrix. I do not have the option in the drop down….

    Thanks

    I am able to define this outside of the matrix on another custom Field…whereas a File Option is available via (File, by Mark Huot (v.3.1.1)) .

    But no default Expression File Field

  • #17 / Sep 03, 2009 1:25pm

    AJP

    311 posts

    There is no default file upload extension. This is ngen File Field. Search for for it here in the forums. It’s a field frame fieldtype.

  • #18 / Sep 04, 2009 2:35pm

    reinvent

    118 posts

    AJP,

    Edited Post By Author: I will try a few things before bothering you….saw a possible problem by re-looking at my question/post….

    Kindly

  • #19 / Sep 04, 2009 5:41pm

    reinvent

    118 posts

    Hey AJP, sorry to have to ring in again, maybe you can help me….

    Well I am not having any luck. Please keep in mind that this is my first dynamic site…or attempt at one.

    I am trying to have the lower block “light-up” if there is info in the matrix and to be “invisible” if nothing is entered in the matrix.

    CODE BEFORE

    <div id="blogPicture">
         " alt=
              <div id="picture_title">TitleCaption</div>
                  <div id="picture_caption">Picture Content goes Here</div>
    </div>

    CODE AFTER

    {exp:lg_replace:haystack needles="{cf_images backspace="1"}image_{row_count}|{/blogPicture}"}
        <div id="blogPicture">
            {blogPicture}
                {exp:lg_replace:replacement needle="image_{row_count}"}
                    {image}
                    <div id="picture_title">{title}</div>
                    <div id="picture_caption">{caption}</div>
                {/exp:lg_replace:replacement}
            {/blogPicture}
        </div>             
    {/exp:lg_replace:haystack}

    What am I missing here? Seems like it should be easy…but I must be missing something. Thanks for your time and consideration.

    Kindly…

  • #20 / Sep 04, 2009 8:24pm

    reinvent

    118 posts

    I got it….incorrect FF title.

    have a great weekend…

    Kindly

  • #21 / Sep 24, 2009 7:07pm

    pab514

    181 posts

    AJP this is amazing,

    I’m using this for the first time and I can see so many possibilities for this.

    Right now I’m having an issue.

    the code gets renders as a table of the fields inputed in the admin

    {exp:weblog:entries weblog="articles_magazine" status="open"}
    {exp:lg_replace:haystack needles="{mag_images backspace="1"}image_{row_count}|{/mag_images}"}
    
    <div class="post">
    
    {exp:imgsizer:size src="{magazine_thumbnail}" width="210" alt ="{title} " class="align_left"}
    
    {author} | <a href="#"><span class="cat">Culture</span></a> | <span>19 sept 2009</span>
    
    <h3>{title}</h3>
    
    <p>{mag_body}</p>
    
    <p><br />
    {mag_images}<br />
    {exp:lg_replace:replacement needle="image_{row_count}"}<br />
    {exp:imgsizer:size src="{image}" width="{image_size}" alt="{image_caption}" class="{image_align}"}<br />
    {/exp:lg_replace:replacement}<br />
    {mag_images}</p>
    
    <p>    <ul class="bottom_post_meta"><li><a href="#%22class=%22comment_bubble%22&gtComments&lt/a&gt&lt/li&gt&ltli&gt&lta" class="comment_bubble">get feed</a></li><li><a href="#" class="digg_icon">digg</a></li></ul></p>
    
    <p>        </div><!-- end post--><br />
                    </p>
    
    <p>        {/exp:lg_replace:haystack}<br />
        {/exp:weblog:entries}


    this is what i get in the source

    {image_1}
    
    “La première fois qu’on fait ça, c’est un peu déconcertant […] Il faut vraiment calibrer quand on parle parce qu’on ne peut pas changer de diapo quand on a plus rien à dire puis qu’on veut passer à la suivante. L’avantage du format c’est que ça permet aux gens d’être concis.” M’explique Marc-André en ce souvenant de la présentation qu’il avait fait dans les premières éditions. Malgrés le fait qu’il y ai de plus en plus de designer qui sort des écoles ou des jeunes entrepreneurs qui se lance en affaire à Montréal, il semble que ça soit quand même dure de trouver des personnes pour faire des présentations  “Souvent les designers ne sont pas habitué de presenter leur travail et ils ont toujours l’impression que ça ne va pas être assez intérressant. Alors, il faut toujours les convaincres que ça va être super bon.” Puis l’architecte ajoute: “Je pense qu’à l’école en architecture on est habitué de toujours présenter nos projets donc on a peut-être plus l’habitude, mais je pense que pour les autres formes, surtout en design de mode, en multimedia ou en web, les gens ne sont pas tellement habitué de présenter leur travail devant un public. Mais je pense que c’est bon pour eux, c’est un bon excercice et c’est bon de facilement pouvoir communiqué ce qu’on fait de personne à personne.”
    
    
    
    
    
    
    
    <table cellspacing="1" cellpadding="10">
      <thead>
        <tr>
          <th scope="col">image</th>
          <th scope="col">caption</th>
    
          <th scope="col">size</th>
          <th scope="col">alignment</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>/images/magazine_images/pecha-01.jpg</td>
    
          <td>Pecha one</td>
          <td>300</td>
          <td>right</td>
        </tr>
      </tbody>
    </table>
    
    <table cellspacing="1" cellpadding="10">
      <thead>
    
        <tr>
          <th scope="col">image</th>
          <th scope="col">caption</th>
          <th scope="col">size</th>
          <th scope="col">alignment</th>
        </tr>
      </thead>
    
      <tbody>
        <tr>
          <td>/images/magazine_images/pecha-01.jpg</td>
          <td>Pecha one</td>
          <td>300</td>
          <td>right</td>
        </tr>
    
      </tbody>
    </table>

    I’m not using any wisiwig just droping {image_1} in the field

    thanks for taking the time.

  • #22 / Sep 24, 2009 9:17pm

    AJP

    311 posts

    The default behavior of FF Matrix is that if you just display the field (without the open closing tags) it auto creates a table for you.

    You’re missing the {/mag_images} to close out your custom FF Matrix display.

  • #23 / Sep 24, 2009 9:27pm

    pab514

    181 posts

    Thanks for the quick response AJP!

    I really appreciate it.

    I got it working , I noticed joobs mentionned that his image were wrapped in P tags,

    is there a way to get rid of those and still keep the textarea html?


    Hope all is well

  • #24 / Sep 24, 2009 9:32pm

    AJP

    311 posts

    That’s the one defect with using a wysiwyg editor.

    You can do it by manually editing your HTML (not a logical choice for clients, but maybe for your own).

    As of yet, I haven’t found a great way, other than with javascript on presentation.

    I’m sure inside wygwam, or tinymce one could find a work around for an image tag, but I haven’t dived into it yet.

  • #25 / Sep 24, 2009 10:07pm

    pab514

    181 posts

    Thanks AJ, got it to work how i wanted, just changed one CSS rule

  • #26 / Oct 22, 2009 6:41pm

    Ryan Faubion

    81 posts

    So i have hit a wall and am hoping to get some assistance.

    Here is my code:

    {exp:weblog:entries weblog="technologies_subpages" category="10" disable="comments|trackbacks"}
                       <div class="introb">
                        <h2>Technologies</h2>
    <p>                    {subpage_intro}<br />
                    {exp:lg_replace:haystack needles="{subpage_img backspace="1"}image_{row_count}|{/subpage_img}"}<br />
                    {subpage_img}<br />
                    {exp:lg_replace:replacement needle="image_{row_count}"}<br />
                                    {image_file} <br />
                                    {/exp:lg_replace:replacement}<br />
                    {/subpage_img}<br />
                    {/exp:lg_replace:haystack}<br />
                        </div><br />
                        {/exp:weblog:entries}


    I seems like that should work, but I get nothing.

    Thanks in advance!

  • #27 / Oct 22, 2009 7:38pm

    Joobs

    362 posts

    Thanks for the quick response AJP!

    I really appreciate it.

    I got it working , I noticed joobs mentionned that his image were wrapped in P tags,

    is there a way to get rid of those and still keep the textarea html?


    Hope all is well

    Actually I got rid of the P tags.  I think all i did was make sure the html that is inserted is also wrapped in a div tag, and the parsing order of EE text means it doesn’t convert that into a paragraph.

  • #28 / Dec 16, 2009 10:13am

    Emily Heath

    197 posts

    That’s the one defect with using a wysiwyg editor.

    You can do it by manually editing your HTML (not a logical choice for clients, but maybe for your own).

    As of yet, I haven’t found a great way, other than with javascript on presentation.

    Just curious then AJ, are you using javascript on presentation to work around this? 

    It was this problem that made me choose to use Textile for my similar solution to letting clients add inline images to their entries

    I like Textile because there are a lot less potential problems with it (e.g copying over formatting from Word - I know there’s a plugin for this but you know what I mean, something so powerful is inherently more buggy).

    However, since trying this out with a few clients now, I’ve seen the baffled look on their faces when they see the Textile mark-up surrounding a link and I have realised why the WYSIWYGs are so good. You know you’ve created a link when you see the bright blue underlined thing!

  • #29 / Dec 16, 2009 10:53am

    AJP

    311 posts

    I have done it with JS on presentation, but it all depends on the design and client’s requirement.
    I’ve done textile/markdown before as well, and I hate WYSIWYG. But it works.

    I’m trying WYGWAM right now to see how well that works too.

  • #30 / Dec 16, 2009 10:07pm

    John-Gordon

    76 posts

    I love how this all works together, and my clients think it’s very cool as well.

    One of my most recent clients has asked for video and images. I have it working when there’s only video uploaded and no images, or the other way around. When I insert an image into the “Images FF Matrix”, and paste a YouTube embed in the “Video FF Matrix”, the variable tags {image1} and {video1} display as plain text.

    If I completely remove one of the rows from their respective FF Matrix, it works again. Not sure what is causing this, but if anybody else has used this method for multiple medias (blockquote, images, video, etc) to be inserted into a blog entry, could I see an example?

    I guess for now, I’ll just let the client know that he can only have video or images, not both. :(

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases