Adding Responsive Images to Advanced Custom Fields in Wordpress | Responsive Web Design

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) 
    ACF Image Setting
    Selecting the ID rather than URL or the Object to enable responsive images
  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!

Leave a Reply

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.