Thumbnail image gallery
8 posts by 2 authors in: Forums > CMS Builder
Last Post: March 4, 2016 (RSS)
Hi, I have got an image/thumbnail gallery working just as I want and am trying to put CMS code into it now but cannot get it to work with the 2 image upload fields, I need the two fields, one for the large imaeg and one for the thumbnail because I need the thumbnail images cropped and sized all the same. The code that is working is this:
<ul><li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/gallery/1.jpg" alt="image01" data-description="Richard Marti Gallery" /></a></li></ul>
(but with more images than this)
I can get the code working with the thumbnail images but cannot get the large images workign properly with the bit that works with the data-large="" bit of code. The code for my CMS is this:
<ul><?php foreach ($galleryRecord['thumbnails'] as $index => $upload): ?>
<li><a href="#"><img src="<?php echo htmlencode($upload['urlPath']) ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="<?php echo htmlencode($upload['info1']) ?>"
data-large="images/gallery/1.jpg"/></a></li><?php endforeach ?>
</ul>
The bit below is the code for the large images that needs to be where it says: data-large="images/gallery/1.jpg"
<?php foreach ($galleryRecord['images'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" />
<?php endforeach ?>
I hope you cna help, I have tried it in several ways but cannot get it to work. Thanks in advance. Here is the link for the working page without the CMS on: http://www.richardmarti.ch/gallery.php
By Damon - March 3, 2016
Hi,
Here is some code that will output the regular size image and the thumbnail version of the image:
<?php foreach ($galleryRecord['images'] as $index => $upload): ?>
<li><a href="#"><img src="<?php echo htmlencode($upload['thumbUrlPath']) ?>"
data-large="<?php echo htmlencode($upload['urlPath']) ?>" alt="<?php echo htmlencode($upload['info1']) ?>" data-description="Richard Marti Gallery" /></a></li>
<?php endforeach; ?>
Also, make sure that for the Images field in CMS Builder, you have the Create thumbnail checkbox checked and the height set to 65 or whatever thumbnail height you want.
Let me know if you have any questions about this.
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
I can't use the thumbnail feature in the CMS, that is why I have had to create 2 different fields, the thumbnails have to all be the same width so using the thumbnail feature does not work.
By Damon - March 3, 2016
I'm not sure I understand why you can't use the thumbnail field. It can be set to make with the thumbnail images heights or widths the same.
Is the image that you want to upload in the 2nd upload field cropped prior to upload?
Could you provide some more details about how this should work for the user?
It is possible to use two different upload fields together but it will take much more time to write code to make that work. The ideal solution is to use the automatically generated thumbnails if possible.
Can you provide some more details?
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By Damon - March 3, 2016
Just reread your original post and see that you are cropping the images for the thumbnail uploads.
What about cropping the larger image to the right dimensions and then all the thumbnails would be correctly sized too?
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
I can't crop the large image to all be the same because some images definitely need to be portrait and some are very wide panoramic shots, that's why I have used a responsive image gallery function.
Hi, thank you for your help, I have got around using the thumbnail function with some clever css.
By Damon - March 4, 2016
Thanks for the update. Glad you were able to find a solution.
I was just starting to investigate if setting overflow: hidden with set height and width might be workable.
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/