AMP Google Maps Integration Example to Wordpress via AMP-Iframe

How to create AMP-Friendly Wordpress Gallery with ACF & AMP-Carousel

, , ,

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

What Will I Learn?

This article demonstrates how to populate AMP-Friendly WordPress gallery using amp-carousel and Advanced Custom Fields plugin.

Requirements:

Useful links:

Full code

If you are here just for a working solution, just copy paste the code below. If you want to understand the principle behind it, you’ll find the explanation below.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.
<?php $images = get_field('gallery');
if( $images ): ?>
    <amp-carousel 
    lightbox
    width="400"
    height="300"
    layout="responsive"
    type="slides">
    <?php foreach( $images as $image ): 
        $image_small = wp_get_attachment_image_src( $image, "thumbnail" );
        $image_medium = wp_get_attachment_image_src( $image, "medium" );
        $image_large = wp_get_attachment_image_src( $image, "large" );
        $alt = get_post_meta( $image, '_wp_attachment_image_alt', true); ?>                      
        <amp-img 
        class="cover"
        src="<?php echo $image_small[0]; ?>"
        srcset="<?php echo $image_medium[0]; ?> 700w,
        <?php echo $image_large[0]; ?> 1024w"
        alt="<?php echo $alt;?>"
        width="300"
        height="200"
        layout="responsive">
    </amp-img>
<?php endforeach; ?>
</amp-carousel>
<?php endif; ?>

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Default amp-carousel code

Before adding amp-carousel to the website, loading carousel component inside the header is required. It is done by adding the code below in-between tag, but luckily for us – ever-time-lacking workaholics – AMP plugin will do it for us automatically. Hooray for that.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

The example code for amp-carousel from amp.dev is shown below. It works just fine with a static content, but since we work with WordPress CMS, obviously, we want to populate the carousel dynamically.

<amp-carousel width="400"
  height="300"
  layout="responsive"
  type="slides">
  <amp-img src="/static/samples/img/image1.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="and another sample image"></amp-img>
</amp-carousel>

Default ACF gallery code

There are many way to do that, but, personally, I use ACF Gallery which is unfortunately only available is PRO version. If you don’t have the Premium plugin – don’t worry – I’m sure there is free alternatives and I bet all you need to do is to replace only this line $images = get_field('gallery'); which populates the gallery. The example code from ACF official website is as it is shown below. It works just fine to return images of gallery, but we want them looping nicely in a carousel, ain’t we?

<?php 

$images = get_field('gallery');

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

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Creating ACF Gallery

I suggest you to skip this part if you are not using ACF PRO to populate the carousel, or if you already have one. For those who are not quite sure how to do it – after downloading and activating the plugin, first thing you need to do it is to create custom field for it. To achieve that just click on Custom Fields > Add New on your WordPress admin dashboard. Add field and name it whatever you want, but in this example I’ll just going to use simple Gallery. On field type choose Content > Gallery, and on Return Format pick Image ID.

Creating advanced custom fields gallery.

Don’t forget to set the right location for the gallery custom field to appear. As you can see, in this example I use custom page template called Products.

Setting advanced custom fields gallery location.

Adding Images to ACF Gallery

Go to the page you have chosen for the gallery to appear during the last step and find the gallery. Adding images to the gallery is pretty straight forward and is done by clicking Add to gallery button. After you set your images right, don’t forget to save the progress. WordPress is now all set and done, let’s return to the coding.

Adding images to advanced custom fields gallery.

Combining the code

The principle of combining ACF Gallery and amp-carousel code is not entirely a rocket science either. The key is to understand which part of the loop is repeated and which will be returned only once. First copy/paste the example code given by ACF PRO team and insert the code you want to outputted only once before foreach() line. Don’t forget to close all the tags after endforeach;. At this stage the code should be something like this:

<?php $images = get_field('gallery');
if( $images ): ?>
    <amp-carousel 
    lightbox
    width="400"
    height="300"
    layout="responsive"
    type="slides">
    <?php foreach( $images as $image ): 

    <?php endforeach; ?>
</amp-carousel>
<?php endif; ?>

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

All is left is to insert the code we want to be repeated. For our purpose it is amp-img, which will be returned for each images we added to ACF Gallery. For starter take the code of a single image provided by amp.dev.

<amp-img 
src="/static/samples/img/image1.jpg" 
width="400" 
height="300" 
layout="responsive" 
alt="a sample image"></amp-img>

This, of course, won’t work, because the code is for a static image. What we want is to dynamically populate src=" " and alt=" " attributes. At this stage I’ll use slightly different code than the one provided by ACF PRO, because I prefer working with images returned as ID, not as Array as it is provided in their example. First we need to set our variables which we are going to echo into the attributes. This is done by this code:

$image_large = wp_get_attachment_image_src( $image, "large" ); // thumbnail, medium, large or full
$alt = get_post_meta( $image, '_wp_attachment_image_alt', true);

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Now we need to output $image_large and $alt to the amp-img code above. After this we should end-up with a code like this:

$image_large = wp_get_attachment_image_src( $image, "large" );
$alt = get_post_meta( $image, '_wp_attachment_image_alt', true); ?>                     
<amp-img 
    class="cover"
    src="<?php echo $image_large[0]; ?>"
    alt="<?php echo $alt;?>"
    width="300"
    height="200"
    layout="responsive">
</amp-img>

And that’s it. The full code could be found on the top of the page. The only difference there is that I added attribute just to make the images more responsive across the website. The end result should look something like this:

Example of AMP-Carousel made on WordPress wtih ACF.

Originally posted on 8/19/2019
Versions:
WordPress 5.2.2
AMP 1.2

Share.
the.Word

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.