Learning AMP: Wordpress Gallery with Advanced Custom Fields

Image for post
Image for post
Originally published at https://ampire.city

What Will I Learn?

Requirements:

Useful links:

Full code

<?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; ?>

Default amp-carousel code

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

<?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; ?>

Creating ACF Gallery

Image for post
Image for post
Creating advanced custom fields gallery.
Image for post
Image for post
Setting advanced custom fields gallery location.

Adding Images to ACF Gallery

Image for post
Image for post
Adding images to advanced custom fields gallery.

Combining the code

<?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; ?>
<amp-img src="/static/samples/img/image1.jpg" 
width="400"
height="300"
layout="responsive"
alt="a sample image">
</amp-img>
$image_large = wp_get_attachment_image_src( $image, "large" ); // thumbnail, medium, large or full 
$alt = get_post_meta( $image, '_wp_attachment_image_alt', true);
$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>
Image for post
Image for post
Example of AMP-Carousel made on WordPress wtih ACF.

Adding Gallery to AMP Wordpress

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store