Responsive background images

• Mulegoat

• June 6, 2015 at 2:09 am

Hi there

Has anybody been able to use ACF image field array with background images? Am trying to implement responsive bg images and would be great if this could be done with ACF

• John Huebner

• June 6, 2015 at 10:32 pm

First question I have is, what will you use to put responsive background images into the backgrounds. I’m curious because I was recently looking for some way to do this and didn’t find anything. I had to settle for using https://github.com/scottjehl/picturefill which requires an tag so I had to insert the images into the content.

The way I did this was that I provided the client with the ability to upload alternate images cropped at different sizes and I built the tags dynamically.

• Mulegoat

• June 8, 2015 at 7:27 pm

Hi John

I’m looking for a solution that can dynamically change the inline style tag to set the path to the appropriate background image. I’ve managed to do this with feature thumbnail images within <picture></picture> using picturefill as the polyfill but cannot find any reference to a background images solution. It would be nice if this sort of thing would be a nice feature for ACF using an image array without having to resort to multiple uploads? Hoping Elliot feels the same 🙂

• John Huebner

• June 8, 2015 at 9:30 pm

So you’ve used picturfill, I chose to use the urlset of the standard image tag because the <picture> element is not supported by all browsers yet and also because using this element would be difficult for clients. I also default to using different sizes of the same image when the client does not upload different images.

As far as I know there isn’t anything that will dynamically alter the inline style tag to create responsive backgrounds. While I agree that this would be a nice thing to have, actually a great thing to have, I don’t think that it’s something that ACF should do. For the most part ACF does not format the data for you on the front end and doing that for this type of application would be a step away from that.

I can tell you want I did to make dynamic background images, but it’s complicated and I’m not entirely sure it was worth the work.

I used picturefill to create a responsive image tag. This image is hidden on the page. I then wrote JavaScript that runs on page load, reads the src value of the img element and updates the background image of a div. Then on browser resizing JavaScript again reads the src and updates the div if needed.

• Mulegoat

• June 8, 2015 at 11:11 pm

Hi John

You’re probably right regarding the suitability of this feature with ACF. I’d love to see how you achieved your solution in a gist – if only for learning purposes 🙂 I can’t see me using this solution too often either. The only reason I started looking for one was because somebody wanted a friggin parallaxing homepage and I was curious as to how to add an easy solution to change the images used.

• John Huebner

• June 9, 2015 at 7:24 am

heh, yes, I had originally thought of making this some type of plugin, but the thought of maintaining it turned me off. It is mostly a plugin but not anything that is fit for public consumption.

First so you know what you’re looking at, I don’t use jQuery, the script that does the replacement is actually quite small and efficient.

A little background about the ACF fields. In my ACF field group I have a radio button. The user can select to upload a single image and use WP auto resized images or they can choose to upload a different image for each size. The image widths that are used are 320, 640, 768, 1024 and 1280. The image fields displayed for upload are all conditional fields depending on what is selected. All of the sizes have WP image sizes created for them like.
add_image_size('image-size-name', $width, 9999);

In the PHP I get the fields, based on what the user has selected, get the right image urls and generate an tag that is used by picturefill.js

I put a copy of it on this repo, it is the only thing currently there

https://github.com/Hube2/blunt-panes

If you have any questions about the JS I’d be glad to answer them over on the issue section for that repo so we don’t fill up this thread with something that is really not related to ACF.

• Mulegoat

• June 9, 2015 at 9:43 pm

This is great John, thank you for sharing. I’ll have a look and if I have any questions I’ll ping you on github. Many thanks again!