Ask your WordPress questions! Pay money and get answers fast! (more info)

I need to get the list of images added in a gallery. WordPress


I have a custom post type named “services” and there I have a wysiwyg field, created with the “advanced custom field” plugin.
In that field, the user will add a gallery with images.

What I need is to be able to get the images from that gallery to use it on different places.

For example, in my home I want a list of all my services, with 4 images of each service.

It would be great if I could get the src for the different sizes, so I can create my own gallery (i created additional image sizes)

Answers (4)


Giri answers:

I just create a custom template for you. I assumed you named your services post type "services". If you named something else change it in the code.

It actually query the service post type, extract image ids from the gallery shortcode, then displays the image.

This code actually displays only 4 images. If you want to increase the limit, then change the $max variable.

Also its compatible with all image sizes. To change the size just modify this line

<blockquote>$image = wp_get_attachment_image_src( $image_id, 'large', false, '' );</blockquote>

For example if you have a custom size added liike this

<blockquote>add_image_size( 'service-thumb', 300, 200 );</blockquote>

then change that line like this

<blockquote>$image = wp_get_attachment_image_src( $image_id, 'service-thumb', false, '' );</blockquote>

So here is the complete code.

create a file called services.php and paste the code in there.

Template Name: Services
get_header(); ?>

$services = new WP_Query(array( 'post_type' => 'services' ) );

if ($services->have_posts()) : while ($services->have_posts()) : $services->the_post();


$gallery_content = get_field('gallery', $post->ID);

preg_match('/\[gallery.*ids=.(.*).\]/', $gallery_content, $ids);
$image_ids = explode(",", $ids[1]);

$count = 0;
$max = 4;
foreach($image_ids as $image_id) {
if ($count > $max) {
$image = wp_get_attachment_image_src( $image_id, 'large', false, '' );
echo '<div class="image">';
echo '<img src="'.$image[0].'" alt="">';
echo '</div>';
endwhile; endif;

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Giri comments:

Heads up:

Don't forget to change your ACF gallery field id in this line.

$gallery_content = get_field('gallery', $post->ID);

I assumed it was named "gallery"

gprego comments:

Hi Giri,
That worked perfectly!!
Thanks a lot for your answer

Giri comments:

I'm glad it worked. Don't forget to vote :)


Hariprasad Vijayan answers:


If you are using wordpress image upload function to create gallery, you can use the following code to display images

// WP_Query arguments
$args = array (
'post_type' => 'services',
'posts_per_page' => '-1',

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {

// For fetching images from your wysiwyg field
$image_gallery = get_post_meta( get_the_ID(), 'image_gallery', true ); // Replace with your wysiwyg field name
// check if the custom field has a value
if( ! empty( $image_gallery ) ) {
preg_match('/\[gallery.*ids=.(.*).\]/', $image_gallery, $ids);
$image_ids = explode(",", $ids[1]); // Get all image ids from short code
$images = array_slice($image_ids,0,3);
foreach($images as $image)
echo wp_get_attachment_image( $image, 'customimage' );

} else {
// no posts found

// Restore original Post Data

You can use the following code in function.php to add image size

add_image_size('custombig', 600, 400, TRUE);
add_image_size('customsmall', 300, 152, TRUE);
add_image_size('customimage', 64, 64, TRUE);

Let me know if you need any help in this.

Good Luck

Hariprasad Vijayan comments:

Above code only works if you are using [gallery] short code to display gallery. If you are using any other method or any other plugin, it won't work.

Please ask if you have any doubt.

gprego comments:

Hi Hariprasad,
That code also worked perfectly!!
I just added the "$count = 0;$max = 4;" from Giri's code to only show 4 images, and worked great.
Thanks a lot for your answer.


Navjot Singh answers:

Check - This maybe what you need.

Navjot Singh comments:

To get images of different sizes you can use

<img src="<?php echo $image['sizes']['thumbnail']; ?>" />

Just replace thumbnail with whatever custom size you have created.

Navjot Singh comments:

This code will go inside that loop which is shown in the above link.


Abdelhadi Touil answers:

What about this:

[[LINK href=""]][[/LINK]]

and this:

[[LINK href=""]][[/LINK]]

Read the code in answers (cheked replies).
Good luck.