FieldFrame Matrix as Photo Gallery problem

What about making the link on the thumbnails the row number in the array of photos so it would be something like this:

http://lesliehunt.ehclients.com/photos/3/

Then in the EE code do something like this:

<div id="main">
                {exp:weblog:entries weblog="photos" limit="1" disable="member_data|pagination|trackbacks|categories|category_fields"}
                <div id="largePhoto">
                    {photos limit="1" offset="{segment_3}"}
                    {exp:imgsizer:size src="{photo}" width="366" height="768" alt="{photo_description}"}
                    {photo_description}
                    {/photos}
                </div>
                {/exp:weblog:entries}
                <div id="thumbPhotos">
                    {exp:weblog:entries weblog="photos" disable="member_data|pagination|trackbacks|categories|category_fields"}
                    {if count == "1"}
                    <h3>{title}</h3>
                    <ul>
                    {/if}
                        {photos}
                        {if count != segment_3}
                        <li><a href="/photos/headshot/{count}/" title="{photo_description}">{exp:imgsizer:size src="{photo}" width="57" height="57" alt="{photo_description}"}</a></li>
                        {/if}
                        {/photos}
                    {if count == total_results}</ul>{/if}
                    {/exp:weblog:entries}
                </div>
            </div>

I threw an extra conditional around the thumbs so as not to include the link to the current image. I don’t have a weblog setup like this so I am just taking a stab.

Thanks for taking a look, Erik. When I add in the {count} variable to the thumbnail anchor, it simply fills in a “1” for all thumbnails where {count} is. I’ve made the changes so you can see what I’m talking about on the link above if you wish.

Thanks

I discovered that it’s actually not {count} but {row_count}. Still trying to make it work though… think I’m closer.

My mistake. I replied too quickly. I meant to say {row_count}. Using {count} is the variable from the weblog entries tag. If you use {row_count} you’re using the variable from ff matrix. Give that a try.

Haha, yeah I see that now. I checked your link after replying and saw the links correctly. Keep us updated…

I’d agree with Erik and how he is using he offset an count parameters along with the segment. I think thats a nice approach.

Just thinking a little and here is another option to try. You would be to have another cell in the matrix where you enter in an identifier for each image. Maybe its number or maybe its a one word “tag”. Then you could use that identifier in the URL as a segment and use the matrix “search” parameter to show the correct image like so:

<div id="main">
                {exp:weblog:entries weblog="photos" limit="1" disable="member_data|pagination|trackbacks|categories|category_fields"}
                <div id="largePhoto">
                    {photos limit="1" search:identifier="{segment_3}"}
                    {exp:imgsizer:size src="{photo}" width="366" height="768" alt="{photo_description}"}
                    {photo_description}
                    {/photos}
                </div>
                {/exp:weblog:entries}
                <div id="thumbPhotos">
                    {exp:weblog:entries weblog="photos" disable="member_data|pagination|trackbacks|categories|category_fields"}
                    {if count == "1"}
                    <h3>{title}</h3>
                    <ul>
                    {/if}
                        {photos search:identifier="not {segment_3}"}
                        <li><a href="/photos/headshots/{identifier}" title="{photo_description}">{exp:imgsizer:size src="{photo}" width="57" height="57" alt="{photo_description}"}</a></li>
                        {/photos}
                    {if count == total_results}</ul>{/if}
                    {/exp:weblog:entries}
                </div>
            </div>

I’m using the search parameter again to NOT show the thumbnail currently being shown as the large image. This approach has more overhead in that your adding your own identifier for each image and you’d want them to be unique. However if you only have a small number of images per entry you can easily scan the other image identifiers to see if one has already been used.

Again, the concept Erik has presented is probably the best way to handle it, but thought I’d give you another method in case.

Erik,

I think it make sense but doesn’t want to work. Seems like once the thumbnail is clicked the template doesn’t know what image to show or something as I’m just getting a blank screen.

Here’s what I’ve got. I’m trying to use a new template called “photos/image” for when a thumbnail is clicked.

Here’s my code. You can view the link above again to see what’s happening. You can view the live link above in the first post as well.

Here’s the photos/index template:

<div id="main">
                {exp:weblog:entries weblog="photos" limit="1" disable="member_data|pagination|trackbacks|categories|category_fields"}
                <div id="largePhoto">
                    {photos limit="1"}
                    {exp:imgsizer:size src="{photo}" width="366" height="768" alt="{photo_description}"}
                    {photo_description}
                    {/photos}
                </div>
                {/exp:weblog:entries}
                <div id="thumbPhotos">
                    {exp:weblog:entries weblog="photos" disable="member_data|pagination|trackbacks|categories|category_fields"}
                    {if count == "1"}
                    <h3>{title}</h3>
                    <ul>
                    {/if}
                        {photos}
                        <li><a href="/photos/image/{row_count}" title="{photo_description} Full Size">{exp:imgsizer:size src="{photo}" width="57" height="57" alt="{photo_description}"}</a></li>
                        {/photos}
                    {if count == total_results}</ul>{/if}
                    {/exp:weblog:entries}
                </div>
            </div>

Here’s the photos/image template:

<div id="main">
                {exp:weblog:entries weblog="photos" limit="1" disable="member_data|pagination|trackbacks|categories|category_fields"}
                <div id="largePhoto">
                    {photos limit="1" offset="{segment_3}"}
                    {exp:imgsizer:size src="{photo}" width="366" height="768" alt="{photo_description}"}
                    {photo_description}
                    {/photos}
                </div>
                {/exp:weblog:entries}
                <div id="thumbPhotos">
                    {exp:weblog:entries weblog="photos" disable="member_data|pagination|trackbacks|categories|category_fields"}
                    {if count == "1"}
                    <h3>{title}</h3>
                    <ul>
                    {/if}
                        {photos}
                        {if row_count != segment_3}
                        <li><a href="/photos/image/{row_count}" title="{photo_description} Full Size">{exp:imgsizer:size src="{photo}" width="57" height="57" alt="{photo_description}"}</a></li>
                        {/if}
                        {/photos}
                    {if count == total_results}</ul>{/if}
                    {/exp:weblog:entries}
                </div>
            </div>

Hmm, since we’re still running with the photos template & weblog name being setup this way would we need to throw in dynamic=”off” ?

I’d agree with Erik and how he is using he offset an count parameters along with the segment. I think thats a nice approach. Just thinking a little and here is another option to try. You would be to have another cell in the matrix where you enter in an identifier for each image. Maybe its number or maybe its a one word “tag”. Then you could use that identifier in the URL as a segment and use the matrix “search” parameter to show the correct image like so:

<div id="main">
                {exp:weblog:entries weblog="photos" limit="1" disable="member_data|pagination|trackbacks|categories|category_fields"}
                <div id="largePhoto">
                    {photos limit="1" search:identifier="{segment_3}"}
                    {exp:imgsizer:size src="{photo}" width="366" height="768" alt="{photo_description}"}
                    {photo_description}
                    {/photos}
                </div>
                {/exp:weblog:entries}
                <div id="thumbPhotos">
                    {exp:weblog:entries weblog="photos" disable="member_data|pagination|trackbacks|categories|category_fields"}
                    {if count == "1"}
                    <h3>{title}</h3>
                    <ul>
                    {/if}
                        {photos search:identifier="not {segment_3}"}
                        <li><a href="/photos/headshots/{identifier}" title="{photo_description}">{exp:imgsizer:size src="{photo}" width="57" height="57" alt="{photo_description}"}</a></li>
                        {/photos}
                    {if count == total_results}</ul>{/if}
                    {/exp:weblog:entries}
                </div>
            </div>

I’m using the search parameter again to NOT show the thumbnail currently being shown as the large image. This approach has more overhead in that your adding your own identifier for each image and you’d want them to be unique. However if you only have a small number of images per entry you can easily scan the other image identifiers to see if one has already been used. Again, the concept Erik has presented is probably the best way to handle it, but thought I’d give you another method in case.

That makes sense too, Casey. The only thing I’d be worried about with this method is that the client would be required to remember to always enter an identifier for each image. Not a big deal obviously, but as soon as they forget, the gallery doesn’t work as it should. I still may try this route if I can’t get Erik’s method to work and just let them know that they NEED an identifier. Then again… I do have a “caption” field that they will be entering into for each image. How would your solution work for something like that were maybe the caption is “My First Photo Shoot?” Where it’s four words and four spaces? Would that throw things off?

I think Erik has the right approach, so lets see if we can;t help you get that way working. If for some reason it doesn’t I’m sure we can come up with another solution or elaborate more on mine. The concerns you mentioned would definitely be an issue.

Did you try dynamic=off as Erik suggested?

Hmm, since we’re still running with the photos template & weblog name being setup this way would we need to throw in dynamic=”off” ?

Ah, Dang! That gets me at least once per site. That worked and the functionality is working now. The only thing that seems to be off is offset={segment_3} bit.

If you go to the photos main page and click on the second image (row_count 2) and then it takes you to that image at “photos/image/2” what it will actually show is image 3 and if you click image 3 it will show 4, etc.

I’m not sure that {if row_count != segment_3} is doing anything either?

If you go to the photos main page and click on the second image (row_count 2) and then it takes you to that image at “photos/image/2” what it will actually show is image 3 and if you click image 3 it will show 4, etc.

Duh! My bad. Offset doesn’t say “go to number 3”, it says “skip the first 3”. I feel silly yet again today :lol:

Well, going that route we may need some PHP output processing for some simple math to do exactly what I had in mind. So it’d be something like

<?php
$current_photo = {segment_3};
$offset = $current_photo--;
?>
<div id="main">
                {exp:weblog:entries weblog="photos" limit="1" disable="member_data|pagination|trackbacks|categories|category_fields"}
                <div id="largePhoto">
                    {photos limit="1" offset="<?=$offset?>"}
                    {exp:imgsizer:size src="{photo}" width="366" height="768" alt="{photo_description}"}
                    {photo_description}
                    {/photos}
                </div>
                {/exp:weblog:entries}
                <div id="thumbPhotos">
                    {exp:weblog:entries weblog="photos" disable="member_data|pagination|trackbacks|categories|category_fields"}
                    {if count == "1"}
                    <h3>{title}</h3>
                    <ul>
                    {/if}
                        {photos}
                        {if row_count != segment_3}
                        <li><a href="/photos/image/{row_count}" title="{photo_description} Full Size">{exp:imgsizer:size src="{photo}" width="57" height="57" alt="{photo_description}"}</a></li>
                        {/if}
                        {/photos}
                    {if count == total_results}</ul>{/if}
                    {/exp:weblog:entries}
                </div>
            </div>

In your photos/image template why not use the count instead of the offset. Basically only showing an image if the count matches the segment.

<div id="largePhoto">
                    {photos}
                    {if row_count == {segment_3}}                  
                    {exp:imgsizer:size src="{photo}" width="366" height="768" alt="{photo_description}"}
                    {photo_description}
                    {/if}
                    {/photos}
                </div>

@Casey

Yeah, that’s pretty obvious when you think about it. Good call! No PHP needed and should work like a charm