Home Forums Add-ons Gallery Field how to display the images from the gallery


how to display the images from the gallery

  • Hello everyone.
    how to display the images from the gallery? in my form i have this code to fill in the images
    I tried these two codes without success

    <p> <?php the_field('photo'); ?></p>

        $images = get_field( 'photo' );
        $size = 'full'; // (thumbnail, medium, large, full or custom size)
        if( $images ): 
        <ul class="acf-photo">
        	<?php foreach( $images as $image_id ): ?>
                	<a href="<?php echo wp_get_attachment_url( $image_id ); ?>">
              			<?php echo wp_get_attachment_image( $image_id, $size ); ?>
          	<?php endforeach; ?>
     <?php endif; ?>
    $images = get_field('gallery');
    if( $images ): ?>
            <?php foreach( $images as $image ): ?>
                    <a href="<?php echo $image['url']; ?>">
                         <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                    <p><?php echo $image['caption']; ?></p>
            <?php endforeach; ?>
    <?php endif; ?>
  • Hi @flexi2202

    What’s the name of your custom field? In the first example you use photo, in the second it’s gallery.

    Is this being used on a page/post/custom post type?

    What’s not working exactly?

  • Hi jarvis
    thank you very much for your help
    It’s super nice
    But I just realized that I already have a problem when I use my form
    When I click on add images nothing happens
    The add button turns black

    Here are screenshots
    These are of course tests that I carry out

    <?php /*Template Name: User Submit*/;?>
    <?php acf_form_head(); ?>
    <?php get_header(); ?>
    	<div id="container" >
        <div class="row">
        	<div class="col-sm-12">
    			<?php /* The loop */ ?>
    			<?php while ( have_posts() ) : the_post(); ?>
    				<!-- a supprimer si on enlève l'éditeur par défaut -->
    					<p> <?php the_field('Ingredients'); ?></p>
    					<p> <?php the_field('Cuisson'); ?></p>
    					<p> <?php the_field('Temps'); ?></p>
    				<p> <?php the_field('Preparation'); ?></p>
    				<p> <?php the_field('Difficulté'); ?></p>
    			<p> <?php the_field('gallery'); ?></p>
    				<?php  $options = array('post_id'		=> 'new',
    		'field_groups' => array(4),
    		'post_title'	=> true,
    			'post_type'		=> 'recette',
    			'post_status'	=> 'draft',
    		//'updated_message'    => 'Merci pour votre participation!Votre recette sera publiée prochainement',
    		'updated_message' => __("Recette publiée", 'acf'),
    		//'return'		=> home_url('merci'),
    	'%post_url%', // Redirect to new post url
    		'submit_value'	=> 'Postez votre recette'
    		//'submit_value'	=> 'Send'
    			<?php endwhile; ?>
    		</div><!-- #content -->
    	</div><!-- #primary -->
    <?php //get_footer(); ?>


  • sorry but now it works so I manage to add photos with my form but when I want to display my gallery with the codes at the beginning of my post, nothing is displayed

  • Photo Gallery looks like a plugin add-on as seen here.

    So try adding the code from the plugin example to your template:

        //Get the images ids from the post_metadata
        $images = acf_photo_gallery('gallery', $post->ID);
        //Check if return array has anything in it
        if( count($images) ):
            //Cool, we got some data so now let's loop over it
            foreach($images as $image):
                $id = $image['id']; // The attachment id of the media
                $title = $image['title']; //The title
                $caption= $image['caption']; //The caption
                $full_image_url= $image['full_image_url']; //Full size image url
                $full_image_url = acf_photo_gallery_resize_image($full_image_url, 262, 160); //Resized size to 262px width by 160px height image url
                $thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
                $url= $image['url']; //Goto any link when clicked
                $target= $image['target']; //Open normal or new tab
                $alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
                $class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
    <div class="col-xs-6 col-md-3">
        <div class="thumbnail">
            <?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
                <img src="<?php echo $full_image_url; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>">
            <?php if( !empty($url) ){ ?></a><?php } ?>
    <?php endforeach; endif; ?>
  • good evening jarvis it’s really great a very big thank you for the help
    is it possible to achieve an enlargement effect when the mouse is passed over

  • Good evening
    I just realized a little problem
    On my form and on a trial basis I use an image field and a gallery field (it’s just for testing)
    When I am an administrator or editor I can upload images or galleries
    But if I am a subscriber or contributor I only know how to upload images
    Is it possible to allow subscribers or contributors to upload galleries

  • You need to amend the permissions by editing the role to allow subscribers or contributors to upload files

    Something like the below may work for a contributor, edit for subscribers too:

    add_action('init', 'wp_allow_contributor_uploads');
    function wp_allow_contributor_uploads() {
        if ( current_user_can('contributor') && !current_user_can('upload_files') ){
            $contributor = get_role('contributor');
  • a very big thank you it works great thank you very much

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.