CODEWITHSUNDEEP
phpwordpressurlgalleryadvanced-custom-fields
Andy Blinde
Andy Blinde

Reputation: 27

ACF gallery images urls

I am using Advanced Custom Fields gallery in a custom post type;

I have managed to display images (thumbnails) added to the gallery using the following code

        $images = get_field('gallery'); if( $images ): $images = explode(',', $images); $images = array_filter($images); if( count($images)):
        ?>
            <ul>
            <?php foreach( $images as $image ): $alt = get_the_title($image); $url = ```this is where I'm stuck``` ?>
                <li>
                    <a href="<?php echo $url; ?>" title="<?php echo $alt; ?>">
                        <?php echo wp_get_attachment_image($image, "thumbnail", false, ['alt' => $alt]); ?>
                    </a>
                </li>
            <?php endforeach; endif; ?>
            </ul>
        <?php endif; ?>

How can I get urls of the images?

I have tried <?php echo $image['url']; ?> but it didn't work

Upvotes: 1

Views: 7928

Answers (3)

Paweł Witek
Paweł Witek

Reputation: 181

  1. Install this plugin: https://wordpress.org/plugins/lightbox-photoswipe/

  2. Use Code below:

    $images = get_field('gallery'); 
     if( $images ):
        $images = explode(',', $images);
        $images = array_filter($images);
        if( count($images)): ?>
            <ul>
                <?php foreach( $images as $image ): 
                    $alt = get_the_title($image);
                    $imageUrlFull = wp_get_attachment_image_url(  $image, 'full' ) ?>
                    <li>
                        <a href="<?php echo $imageUrlFull ?>" title="<?php echo $alt; ?>">
                            <?php echo wp_get_attachment_image($image, "thumbnail", false, ['alt' => $alt]); ?>
                        </a>
                    </li>
                <?php endforeach; ?>
            </ul>
        <?php endif; ?>
     <?php endif; ?>

Other guys also gave good tips hovewer if u like lightbox it depends from js what attributes or classes are used to create lightbox. Cheers.

Upvotes: 1

Tim Herbert
Tim Herbert

Reputation: 120

Should be pretty straight forward. You get it the same way you got the thumbnail image.

Resource: https://www.advancedcustomfields.com/resources/gallery/

<?php 
$images = get_field('gallery');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $images ): ?>
    <ul>
        <?php 
         foreach( $images as $image_id ): 
            echo '<li data-lightbox="' . wp_get_attachment_image_src($image_id, 'full'). '">';
                echo '<img src="' . wp_get_attachment_image_src( $image_id, 'thumb' ) . '">';
            echo '</li>';
         endforeach; 
         ?>
    </ul>
<?php endif; ?>

Upvotes: 0

DubVader
DubVader

Reputation: 1072

First, you should make sure your custom field return value is set to "Image Array". This is a common mistake. If that is set correctly, you should be able to do the following. I assume if you're using a lightbox solution of some kind, you may need to add a class to your <a> tag. Either way, this should display the images successfully:

<?php 

$images = get_field('gallery');

if( $images ): ?>
    <ul>
        <?php foreach( $images as $image ): ?>
            <li>
                <a href="<?php echo $image['url']; ?>" title="<?php echo $image['alt']; ?>" >
                  <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Upvotes: 0

Related Questions