Forum
Responsive Background Images with Perch
Hi all,
I've been developing a site using Perch over the last few weeks and ran into the issue of how to deliver the correctly sized image for each device when using background images.
Perch works well with delivering the right sized image for <img> or <picture> tags but from my understanding background images are a bit trickier.
I've come up with a solution that works for me, which is a little hacky, as it adds an image using the normal tags which generates the images needed, and then suppresses it and removes it from view using suppress="true" and display:none;. It then goes through the array generated and finds the details needed, and then pieces them together to create media queries from that data.
I'm sure there's many ways to improve what I've done, so feel free to contribute if you find a better way of doing it.
I've added this to suggestions and add-on development to provoke some discussion on whether Perch should or could incorporate some way of using responsive background images in Perch
What output are you trying to get? i.e. how do you do this for a static site?
Hi Drew.
I'm sure there's probably a better way of doing this, but none seem obvious to me so I went ahead and did it this way.
The output the above generates (and what I was aiming to get) is the following:
The user uploads an image (prompted by the background_image.html content type) and then it grabs all the image data generated from there, processes it through and spits out the above. As I say, it's certainly a bit hacky and isn't the best way of doing it, but I didn't know of another and for this project this worked so I was happy enough.
Does that make sense? Sorry if I'm not being clear. If you know of another way to do this better using Perch I'm more than happy to hear it.
As a Perch template you'd do that like this:
Hi Drew,
Thanks for the response. Yeah, that does look a lot easier! I wasn't sure how the image processing works so I tried to stick closely to one of the examples on the Using Responsive Images in Perch (Changing Image Sizes Use Case).
Your example makes a lot more sense now I think about it! Still getting to grips with the flexibility of Perch.
Thanks Drew.
The above example works really well for use in a standalone Perch template. However for using as part of a bigger template
(e.g. blog/post.html)it seems a bit more complicated.The above example works by placing the
<?php perch_content('Header Background Image'); ?>in the <head> tags on the page. But for my example below, I don't think I have a way of doing easily, without putting my whole page content into the template tag. This is what I have at the moment:This code works well as it adds an image upload and a background position dropdown to the blog post admin interface. But there's no easy way of getting this information out onto my post.php file below:
The page above gets the blog post at
<?php perch_blog_post(perch_get('s')); ?>, is there a way to get what I need another way so I can output it in the <head> (as <style> isn't allowed inside <body> tags), or do I either need to put my whole page content intoperch/templates/blog/post.htmlor continue with my slightly hacky way of getting the infromation?At the moment I'm doing
$image = perch_blog_post_field(perch_get('s'), 'image', true);and then process that through, but it returns an array and that's where it starts to get complicated with the processing that though.Thought I best ask as last time the answer was a lot simpler than I thought. My way works but is a bit hacky.
Thanks.
You can display your post using as many different templates as you like. Just make sure all the fields are in the
post.htmltemplate (so they are created when the post is edited) and then you can display the post using any number of templates with different markup and a selection of the fields.Cool, thanks Drew. Gradually getting used to how Perch is supposed to be used.