How to call out individual cells in Field Frame Matrix

#1 / Jan 22, 2010 10:03am

garrettwinder

70 posts

Okay… Certain pages on this website are going to have 5 photos on them. I want the first image 460px wide and the next 4 to fit underneath it and be 100px wide. I’m using fieldframe, ngen filefield & image sizer. I’m using CSS3 selectors to size the div according to which image it is (which works). The only problem I’m having is saying “if you’re not the first div then you need to be 100px via image sizer”

Here’s my HTML:

<div id="gallery">
    {exp:weblog:entries weblog="picture_gallery" dynamic="off" disable="categories|member_data|pagination|trackbacks" limit="1" entry_id="5" }
        {picture_gallery}
            <div>
                <a href="http://{photo_upload}%22class=%22image" rel="gallery" class="image">_                    {exp:imgsizer:size src="{photo_upload}" height="430" width="460" alt="{photo_caption}"}_                </a>
            </div>
        {/picture_gallery}
    {/exp:weblog:entries}
</div>

Here’s the CSS:

#gallery div { width: 100px; }
#gallery div:first-of-type  { margin-left: 0; width: 460px; }
#gallery div:nth-of-type(2) { margin-left: 0;  }
#gallery div:nth-of-type(5) { margin-right: 0; }

Thanks!

#2 / Jan 22, 2010 10:14am

illustrationdan

26 posts

All you should have to do is:

<div id="gallery">
    {exp:weblog:entries weblog="picture_gallery" dynamic="off" disable="categories|member_data|pagination|trackbacks" limit="1" entry_id="5" }

            <div id="big-image-thats-430px>
                <a href="http://{photo_upload}%22class=%22image" rel="gallery" class="image">_                    {exp:imgsizer:size src="{photo_upload}" height="430" width="460" alt="{photo_caption}"}_                </a>
            </div>

{picture_gallery_thumbnails}
            <div id="smaller-images-that-are-100px>
                <a href="http://{photo_upload}%22class=%22image" rel="gallery" class="image">_                    {exp:imgsizer:size src="{photo_upload_100px}" width="100" alt="{photo_caption}"}_                </a>
            </div>
{/picture_gallery_thumbnails}

    {/exp:weblog:entries}
</div>

This is not knowing how your gallery will work, I built a similar gallery with an Ngen file upload field for the main big image and for the smaller additional images i used FF matrix and Ngen file upload.

edit: code above reflects a custom field for the big image and a FF matrix for the thumbnails

#3 / Jan 22, 2010 10:16am

garrettwinder
70 posts

Wouldn’t that just make a big & small image of every image in the FF Matrix?

#4 / Jan 22, 2010 10:21am

AJP

311 posts

Try something like this:

<div id="gallery">
    {exp:weblog:entries weblog="picture_gallery" dynamic="off" disable="categories|member_data|pagination|trackbacks" limit="1" entry_id="5" }
        {picture_gallery}


{if row_count=="1"}
            <div>
                <a href="http://{photo_upload}%22class=%22image" rel="gallery" class="image">_                    {exp:imgsizer:size src="{photo_upload}" height="430" width="460" alt="{photo_caption}"}_                </a>
            </div>
{/if}
{if row_count > "1"}
<div class="thumbnail">
{exp:imgsizer:size src="{photo_upload}" height="100" width="100" alt="{photo_caption}"}
</div>
{/if}

        {/picture_gallery}
    {/exp:weblog:entries}
</div>

And style the rest of your CSS appropriately.
The first time through the loop show the big stuff, then all others (and even limit to max of four), show the small thumbnails
make your linke (and/or javascript) to replace the large image.

AJP

#5 / Jan 22, 2010 10:25am

illustrationdan
26 posts

Not really sure how you want your gallery to work, thats just an example of a gallery that would have one big image and then a row of thumbnails underneath it that you say open in a lightbox or something. But if you wanted to use one FF matrix the example from AJP would be better.

#6 / Jan 22, 2010 10:30am

garrettwinder

70 posts

Thanks AJP -

I ended up doing this:

<div id="gallery">
{exp:weblog:entries weblog="picture_gallery" dynamic="off" disable="categories|member_data|pagination|trackbacks" limit="1" entry_id="5" }
    {picture_gallery}
    {if row_count == "1"}
        <div>
            <a href="http://{photo_upload}%22class=%22image" rel="gallery" class="image">_                {exp:imgsizer:size src="{photo_upload}" height="430" width="460" alt="{photo_caption}"}_            </a>
        </div>
    {if:elseif row_count > "1"}
        <div>
            <a href="http://{photo_upload}%22class=%22image" rel="gallery" class="image">_                {exp:imgsizer:size src="{photo_upload}" height="100" width="100" alt="{photo_caption}"}_            </a>
        </div>
    {if:else}
        blah
    {/if}
    {/picture_gallery}
{/exp:weblog:entries}
</div>

Unfortunately it said “Blah blah blah blah blah” haha

#7 / Jan 22, 2010 10:45am
AJP
311 posts
As I’ve found out recently, using {if:elseif} or {if:else} or {if condition=="1" OR condition=="2"}, (which are called Advanced Conditionals).

are parsed much later, are all parsed and then compared via conditional, which leads them to take much more processing time.

If you can, I’d do {if condition}{/if} and {if condition2}{/if}.

Most sites are probably fine using advanced conditionals, but just FYI.

If it was really just outputting blah blah blah, try this
```
{if "{row_count}"=="1"}.....{/if}
```
#8 / Jan 22, 2010 10:47am

garrettwinder
70 posts

That’s it! “{row_count}” is what fixed it. Thanks so much

Thread

garrettwinder

illustrationdan

garrettwinder

AJP

illustrationdan

garrettwinder

AJP

garrettwinder

Username

Password

Thread