Adding Responsive Images to Advanced Custom Fields in WordPress

Advanced Custom Fields is one of the go to plugins when developing for WordPress. It has been around for a long time, has earned it’s reputation and can usually be found in any WordPress site that requires a little more than a title and some content on pages and posts.

At the moment I’m working with my wife on developing a Art Studio website. As part of the development we needed to deliver

• A home page (standard wordpress page)
• A few standard content pages (standard wordpress pages)
• Some news (posts)
• Some Events (Custom Posts – Events)
• Listing of Artists (Custom Posts – Artist)

The artists pages needed to have some specific features including the 

• Artist Name
• Studio number
• Introduction
• Feature background image
• Artist Category
• External artist URL
• External URL button text

To achieve this I decided to use the ACF plugin to allow me to customise the content elements required for the Artists but for some reasons when I applied this the Feature Image was no longer an option.

With so many possible images on the listing page I wanted to make sure that the images were using a responsive images solution as well so I also downloaded and include the RICG Responsive Images WordPress plugin solution.

There are a few things that you need to consider when trying to get responsive images with the ACF plugin:

1. Set the image return value to ID (rather than Object or URL) 
   

   

2. Include the following code where you want the image

<?php

              $image = get_field('artist_feature_image');
              $size = 'medium'; // (thumbnail, medium, large, full or custom size)

              if( $image ) {

                echo wp_get_attachment_image( $image, $size );

              }

              ?>

… and that’s about it.  With that in place the plugin will take over and return the following code:

<img width="212" height="300" src="http://beta.makespacestudios.com/wp-content/uploads/2015/05/secretary-212x300.jpg" 
class="attachment-medium" alt="Joseph Sumner" 
sizes="(max-width: 212px) 100vw, 212px" 
srcset="http://beta.makespacestudios.com/wp-content/uploads/2015/05/secretary-212x300.jpg 212w,
http://beta.makespacestudios.com/wp-content/uploads/2015/05/secretary-724x1024.jpg 724w,
http://beta.makespacestudios.com/wp-content/uploads/2015/05/secretary.jpg 1358w" />

Easy responsive images FTW!