Still struggling with Gallery???

1,161 Posts

Photowebmax Reply #1, 15 years ago

I have been a long time MODX user. I like the image presentation snippets available in Evo. I have tried Revo a few times but getting Gallery to work as been frustrating as hell to say the least.

This week I am having another go at getting comfortable with Revo and Gallery. I found this ongoing tutorial (past 2 or 3 is done): http://darrenjehan.me.uk/gallery-snippet-1.php and http://darrenjehan.me.uk/gallery-snippet-2.php

I have followed along and have some of the gallery functions and styling done. Obviously this user has done extra work as his results differ from what I am getting? Not sure if this is the yet to be shown Part 3 or if he has altered the snippet code and or specific CSS?

This is what I have done so far...

* created two test albums.

* created a test gallery page with the following:

<h2>Gallery Albums</h2>
[[!GalleryAlbums? &toPlaceholder=`AlbumList` &rowTpl=`my-album-row-tpl` &albumCoverSort=`createdon` &albumCoverSortDir=`DESC` &thumbWidth=`50` &thumbHeight=`50` &thumbQuality=`100` &showName=`1`]]
[[+AlbumList]]
[[!Gallery? &toPlaceholder=`ImageThumbList` ]]
[[+ImageThumbList]]
[[!GalleryItem? &toPlaceholders=`1`]]
<img src="[[+galitem.image]]" alt="[[+galitem.name]]" />
[[+galitem.tags]]

* created a rowTpl called my-album-row-tpl (added to snippet call):

<div class="albumPreview">
<div class="thumbNail">
[[+cls:notempty=``]]
<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">
<img src="[[+image]]" alt=[[+description]]></a>
<h4>[[+name]]</h4>
</div>
</div>

This does work: If I click on my "Gallery" link in the navigation I get the Gallery system inside my content area div. My test two albums show:

** Issue 1: there is an icon showing for a missing image (circled in red). This code that is on my Gallery page is generating this icon:

[[!GalleryItem? &toPlaceholders=`1`]]
<img src="[[+galitem.image]]" alt="[[+galitem.name]]" />
[[+galitem.tags]]

If I remove or edit this piece of code it will remove the unwanted icon. But doing so also stops the full-size images from appearing on mouse clicks. It seems this code is required for Gallery to function? But what do I do about this annoying missing icon?

If I click on one of the two test galleries I get this:

Issue 2: That annoying img icon is still there! Also, I hate how the larger thumbnails are presented on the same row as the two icons for the test galleries? How do I customize this?

Issue 3: If I click on any of the gallery thumbs the full-size image is right up against the thumbnails. This looks really ugly. How do I move the expanded full image away from the row of thumbs? Do I need to create new divs that I can style or is there something I need to add in the snippet call? Do I change the Gallery CSS somehow?

I really wish there was a step by step documentation to building a Gallery system in Revo!

Thanks!

387 Posts

whistlemaker Reply #2, 15 years ago

About your circled in red missing picture icon:
perchance is the missing thumbnail of a rather large original image?

I seem to have recollection that if the image is too large then the thumbnail does not get created - I think due to memory limitations or processing time limitations or maybe just written into the thumbnail generation code (which I think is phpthumbof).

Try replacing the original image with smaller version of the same and see if that works.

Disclaimer - I might be remembering this incorrectly, however I don't think the gallery I was playing with is still up, so I can't quickly check.

1,161 Posts

Photowebmax Reply #3, 15 years ago

That is not it. The system generated folders contain the correct number of images that were uploaded...

1,161 Posts

Photowebmax Reply #4, 15 years ago

I did some searching for Gallery topics on the web. I found this guide for combing the Gallery upload system with a Colorbox jQuery presentation script: http://modxrules.com/articles/modx-revolution-gallery-with-colorbox-and-jquery-asynchronous-image-loader-jail

I tried it and it works! The nice thing about this method is that it uses a lightbox script that floats your images on top of your page. Your full size images do not have to be small which is nice if your container div is split into two columns. This Colorbox gallery script comes with five different "examples" folders, each with its own CSS which allows you to pick the presentation style you want.

There are quite a few presentation differences between the "regular" Gallery snippet and the Colorbox/Jail script: more room for full size images and the fact that the script avoids that annoying page "flash" when you skip from one image to the next. The Colorbox system comes with 5 styling alternatives you can try just by changing the example number in the head of gallery page: <link rel="stylesheet" type="text/css" href="assets/templates/templateName/scripts/colorbox/example1/colorbox.css"/>

The only issue for me is that I want to reduce the size of the thumbnails. This is not working for me so far. I think it might be something to do with the thumbs that were previously used by my first Gallery attempt without a query script... [ed. note: Photowebmax last edited this post 15 years ago.]

1,161 Posts

Photowebmax Reply #5, 15 years ago

OK, I solved the thumbnail size issue with the Colorbox/Jail script. You need to edit both the GallItemThumb chunk and your snippet call (edit the thumb sizes...)

So far this approach holds the most promise. I have yet to get the regular Gallery snippet working satisfactorily. I would still love to learn what the issues are with my Gallery attempt as described in the first post on this thread...