Thread

Hello,

I’m trying to implement a photo gallery but I’m having a problem displaying single images. My previous experience with photo galleries in ExpressionEngine is with using Matrix, but something must be a little different about the grid field and I can’t figure it out.

I have set it up so that each entry is a photo gallery. The grid has fields for an image title, thumbnail, and full size.

On the gallery index page, I have the following code:

{exp:channel:entries channel="gallery" orderby="date" sort="desc"}
{gallery limit="1"}
<div class="thumbnail">
<a href="http://{url_title_path=galleries/gallery}">{gallery:thumb}{title}</a>
</div><!--thumbnail-->
{/gallery}
{/exp:channel:entries}

This shows a thumbnail for each gallery I have entered. Next, from clicking a gallery thumbnail, we go to the ‘gallery’ page with this code:

{exp:channel:entries channel="gallery" orderby="date" sort="desc"}
<div class="heading-bg"><h2>{title}</h2><p></div><br />
{gallery}<br />
<div class="thumbnail"><br />
<a href="http://{url_title_path=galleries/image}">{gallery:thumb}{gallery:title}</a><br />
</div><!--thumbnail--><br />
{/gallery}<br />
{/exp:channel:entries}

This shows all of the thumbnails in the particular gallery. Now from each thumbnail, I want to go to a page that shows the full size image but I’m lost here. I either get all of the full size images in the gallery, just the first image (regardless of what thumbnail I click), or nothing at all.

Any help would be greatly appreciated!

Matt

Im interested what code you have in actual galleries/image-template, have you limited grid rows to one? That sounds odd that nothing comes up, might be something to do with the codes in image-template itself?

My first guess was that it would be as intuitive as it is when you select a single gallery from the main galleries page, so I would only need to do this, and it would automatically display the full size version of the thumbnail I clicked:

{exp:channel:entries channel="gallery"}
<div class="heading-bg"><h2>{title}</h2><p></div><br />
{gallery limit="1"}<br />
<div><br />
{gallery:full_size}<br />
{gallery:title}<br />
</div><br />
{/gallery}<br />
{/exp:channel:entries}

This code will display only the first image in the gallery regardless of which thumbnail I click. Of course, when I take away ‘limit=“1”’, I’ll get the entire gallery of full size images on the page.

From there, I thought I’d experiment with ‘row_id’ but I didn’t get anywhere with that. One thing in particular that I tried was setting the link from the single ‘gallery’ page to: “/galleries/image/{gallery:row_id}”

With the 2 galleries I have input thus far, this code will display nothing for gallery #2, but when I click the first thumbnail in gallery #1, it will display the first image in gallery 1 (the link is ‘/galleries/image/1’) then when I click the second thumbnail in gallery #1, it will display the first image for gallery 2 (’/galleries/image/2’). Any other thumbnail displays nothing.

I also want to add links for ‘previous image’ and ‘next image’ but there was no sense in even starting to try adding that code until I can get the images to display properly.

Any ideas would be greatly appreciated.

I checked my gallery “comment” page to try to figure out, even that I have a way different codes to pull out images. One thing that right away spotted my eyes on your code above, is that you do not have the limit=“1” in your channel:entries tag. Have you tried to put that, and take away the limit from fieldtype itself?

Just a wild guess here 😊

It will behave the same as if I simply removed ‘limit=“1”’ from the field. It will display all of the full size images on the page.

Might there be an issue within the channel that is named as “gallery” also?
just another guess again.

Have you tried this:

{exp:channel:entries channel="gallery" limit="1" require_entry="yes"}
<div class="heading-bg"><h2>{title}</h2><p></div><br />
{gallery limit="1"}<br />
<div><br />
{gallery:full_size}<br />
{gallery:title}<br />
</div><br />
{/gallery}<br />
{/exp:channel:entries}

Also, is the name of the actual row for image called “full_size”?
Im not sure how to work with grid with multiple file rows, as it seems that you have own row for thumbs and full images?

I have done my set by having only 1 image(file) row, then description and details. Im interested if someone else could give a hand here too, because Grid is one of my interests as well 😊

I just have one grid field which includes title, thumb, and full_size. I would have used a plugin to automatically create the thumbnails, but the photographer was very specific in how he wanted his images cropped so he edited the thumbnails and full images manually. In the past, I have used Matrix and CE Image for my galleries.

I tried your code but it’s just back to showing the first full image in the set again.

I also renamed the channel to ‘galleries’ but it didn’t help, but I’ll keep it like that to avoid confusion.

Do you get same links when hovering on top of each thumbs using this code, if I understood right, that you get the latest image always in the final page?

{exp:channel:entries channel="gallery" orderby="date" sort="desc"}
<div class="heading-bg"><h2>{title}</h2><p></div><br />
{gallery}<br />
<div class="thumbnail"><br />
<a href="http://{url_title_path=galleries/image}">{gallery:thumb}{gallery:title}</a><br />
</div><!--thumbnail--><br />
{/gallery}<br />
{/exp:channel:entries}

Damn, Now I should have an extra site to try to re-create this with my own to see where it leads me.

The link is simply ‘galleries/image/gallery_title’ and the full size image from the first row in my grid is what appears on the ‘image’ page.

I’m still thinking I need to use ‘row_id’ somehow…

I know now whats the problem is, but dont know what is the solution 😊

Its the actual href you are putting there. It always points to channel entry title as URI.
This isnt so easy for me anymore to figure out how to keep the path intact but to filter down the full size image.

I even set up a site from one of my licences that lies around to put this “online”, and just to see that the main issue lies on the path itself.

Hmmm Im beat atm on how-to.

Since this is not working out for me, I’m wondering what other options there are. I can’t say whether or not Matrix will end up with the same problem since I’ve never created a gallery that needed separate thumbnail and full size fields, nor have I created one had the full size image appear on a new page in this way.

Maybe I need to create my channel in a way that each image/thumbnail is an individual entry, and use categories to connect them as a gallery? I might do a few tests with this, but it will be a much longer process than just adding all the images of a gallery to a grid.

Inside your loop the URL needs the grid field name as well eg

{gallery:url_title_path='galleries/image'}