Image uploads - different display for first image

9 posts by 3 authors in: Forums > CMS Builder
Last Post: September 24, 2013   (RSS)

Hi there,

I have an upload field which needs to be one upload field that allows multiple images (as each record will vary). I would then like the first image to be displayed larger with the next images, displaying smaller underneath as thumbnails. See link:
http://www.fromemtc.co.uk/forthcoming-shows-in-frome-spring.php?Spring-Show-1

Catch - I would then like, if possible, these to all open in a lighbox!

Have I gone to far or is that possible? Many thanks as always!
Hannah

By Jason - September 18, 2013

Hi Hannah,

Sure, this can be done fairly simply.  With uploaded images in CMSB, you have your main image, and up to 4 different thumbnails.  So for this example, let's assume that our main image is the large image we want to output, and the first thumbnail is the smaller image we want for the other images.

In this example, I've also assumed that you are outputting your information from a variable called $record, and that your upload field is called images.  You may need to adjust this to work with what you have set up on your page:

<?php $imageCount = 0; ?>

<?php foreach ($record['images'] as $image): ?>
  <?php $imageCount++ ;?>
  
  <?php if ($imageCount == 1): // first image ?>
    <img src = "<?php echo $image['urlPath'];?>" width = "<?php echo $image['width'];?>" height = "<?php echo $image['height'];?>" />
  <?php else: ?>
    <img src = "<?php echo $image['thumbUrlPath'];?>" width = "<?php echo $image['thumbWidth'];?>" height = "<?php echo $image['thumbHeight'];?>" />
  <?php endif ?>
  
  
<?php endforeach ?>

What this does is increment a counter to keep track of how many images we've output.  In this way it's easy to detect if we are outputting the first image or not.  You can then add in your lightbox code to these image tags as needed.

Hope this helps get you started.

---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Hi Jason,

Thanks! Will it be possible to have more than 5 images in total though as I know some will have 10-20! Even if the page only displayed the first image, 4 thumbnails and then the rest were available in the lightbox?

Hannah

By Jason - September 19, 2013

Hi Hannah,

Yes, you can as many images as you need.  When setting up your upload field, you can set up to 4 thumbnails.  This means that up to 4 different thumbnails will be created for each image uploaded.  You shouldn't run into any issues with larger numbers of images.

Hope this helps

---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Hi Jason,

I'm getting an invalid foreach() however I do this - any ideas?
http://www.fromemtc.co.uk/forthcoming-shows-in-frome-spring.php?Sweeney-Todd-4

Hannah

Hi Jason,

No the field is called images :(

By Damon - September 23, 2013

Hi Hannah,

Can you submit a Support Request so we can take a look at the code on that page and get it working for you.

Here is the Support Request link:
https://www.interactivetools.com/support/email_support_form.php?priority=free&message=http://www.interactivetools.com/forum/forum-posts.php?Image-uploads---different-display-for-first-image-79017

Thanks!

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By Damon - September 24, 2013

Just an update:  using the code from the Code Generator for the detail page fixed the issue:

 <?php foreach ($showsRecord['images'] as $index => $image): ?>

Any other questions or issues, just let us know.

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/