Hello,
I’m interested in buying the Gallery Addon. I have a question before I buy:
Can I display the gallery not as a slideshow but with thumbnails? What I need to achieve is to have two columns (one to the left and one to the right) with 5 thumbnails each (10 pictures in total). Every image will have to be clickable and opened in a lightbox.
Is that possible? Thank you very much!
Hi @milanomia
Yes, this is possible.
The gallery field is a nice interface for managing images, it does not create any front end code (slider).
If you take a look at the docs for the gallery field, you will see how the field will return an array of images, which you can use to loop through and render into any HTML you wish!
Thanks
E
Thank you very much elliot.
So the last question is, can I limit the number of pictures a user can upload into the gallery?
Hi @milanomia
In the backend, no.
But in your code, yes.
You can use a counter in your loop to add in a ‘maxmimum’ limit.
Thanks
E
All right, thank you. Does your Gallery Addon documentation explain how this could be done? I’m sorry but I’m not an expert and before buying I’d like to have all things clear.
Hi @milanomia
The gallery field docs show how you can use a foreach loop to render out the data.
Becuase this uses basic PHP, you can follow this PHP tutorial to understand how to limit the rows:
http://stackoverflow.com/questions/1656969/php-limit-foreach-statement
Thanks
E
Thank you very much for the support. I’ve looked at thelink you provided however I couldn’t manage to limit the number of images. I’ve seen other posts in regards to limit the number of images. Could the code be added to the documentation or can you provide it in this post please?
Thank you
Hi @milanomia
I have taken the code example from the gallery page and added in the counter variable code to show how this is possible.
<?php
/*
* Create the Markup for a slider
* This example will create the Markup for Flexslider (http://www.woothemes.com/flexslider/)
*/
$images = get_field('gallery');
$max = 4;
$i = 0;
if( $images ): ?>
<div id="slider" class="flexslider">
<ul class="slides">
<?php foreach( $images as $image ): $i++; ?>
<?php if( $i > $max){ break; } ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<p><?php echo $image['caption']; ?></p>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
Thanks
E
Thank you very much for your efforts Elliot, unfortunatly this didn’t work with the WordPress default gallery code. I’ve tried with this but it didn’t work:
<?php
$images = get_field('gallery');
$max = 5;
$i = 0;
if( $images ): ?>
<?php foreach( $images as $image ): $i++; ?>
<?php if( $i > $max){ break; } ?>
<?php
$shortcode = '[gallery columns="1" link="file" size="medium" ids="' . implode(',', $image_ids) . '"]';
echo do_shortcode( $shortcode ); ?>
<?php endforeach; ?>
<?php endif; ?>
Hi @milanomia
I was unaware that you wanted to use a shortcode with the WP gallery. You will need to write something like this:
<?php
$images = get_field('gallery');
$image_ids = array();
$max = 4;
$i = 0;
if( $images )
{
foreach( $images as $image )
{
$i++;
if( $i > $max){ break; }
$image_ids[] = $image['id'];
}
}
$shortcode = '[gallery columns="1" link="file" size="medium" ids="' . implode(',', $image_ids) . '"]';
echo do_shortcode( $shortcode );
?>
Thank you and sorry for taking so long to answer.
Unfortunately it seems like this isn’t working either. It’s not taking the correct images from the gallery field and shows only the featured image of the post. This is the code I used:
<?php
$images = get_field('MYFIELDNAME');
$image_ids = array();
$max = 5;
$i = 0;
if( $images )
{
foreach( $images as $image )
{
$i++;
if( $i > $max){ break; }
$ids[] = $image['id'];
}
}
$shortcode = '[gallery columns="1" link="file" size="medium" ids="' . implode(',', $image_ids) . '"]';
echo do_shortcode( $shortcode );
?>
Is there something I’m doing wrong? Any other data I should change in addition to the field name after “get_field”?
Hi @milanomia
Please change:
$ids[] = $image['id'];
to
$image_ids[] = $image['id'];
Thank you very much, this works!
i was looking for same code…Thanks. this code help me too. and it is work
