[Resolved] Different mobile header images

[Greg]

I have a page hero element which is displaying my desktop hero images perfectly (using the page’s featured image, different pages have different images). I’d like to use different images for each page on mobile devices. Do I need to create a separate header element for each mobile page (in order to specify the correct custom mobile header image)? The options I see for setting a background are: no image, featured image or custom image. Is there a way to pull in an ACF field or something, so I could set the mobile header image in that?

What would be the best way to approach this?

My images at the moment are named like this (for desktop and mobile):
home_d.png
home_m.png
about_d.png
about_m.png
contact_d.png
contact_m.png

Could I name them (home.png and home-m.png) and add the “-m” to the filename when displaying on mobile? Or more likely have two rules, one hidden on desktop and one hidden on mobile, but using the same idea.

Thank you for your suggestions.

[Elvin]

Hi Greg,

You can do the image change on mobile w/ just CSS.

Say, for example, you’ve applied “home_d.png” as the default image for the Header Elememt.

We can change the background image used on the same element on mobile by adding this style tag wrapped CSS on your header element code area.

<style>
@media(max-width:768px){
.page-hero {
    background-image: url(https://juneswift.com/wp-content/uploads/2021/05/Juneswift_1_Home_M.png);
}
}
</style>

We basically just changed the image used to Juneswift_1_Home_M.png on viewports not larger than 768px which is the common media rule used for mobile.

[Greg]

I was thinking there might be a way to have the images selectable by the user while editing the page (like they can for the featured image), without having to edit the CSS to change them. But this will work and I’ll revisit if need be in the future.

Thank you Elvin.

[Elvin]

I was thinking there might be a way to have the images selectable by the user while editing the page (like they can for the featured image), without having to edit the CSS to change them. But this will work and I’ll revisit if need be in the future.

Sounds like a good addition. Do you want it logged as a feature request?

No problem. Glad to be of any help. 😀

[Greg]

That would be great as an option. “Use a custom field (ACF specifically) to set the image for background”

Thanks!

[Elvin]

I’ve logged it on GP Premium’s github page.

It’s now up to Tom if he sees it as something up on the priority list of feature implementations.

While waiting, if I may suggest an alternative:

Some users use the new GP Premium 2.0’s Block Element – Page Hero. You may want to consider trying that as well. That will surely let you set different images for mobile and desktop by setting the background image on a GB container block within Gutenberg.

[Milo Lam]

Hey Elvin, I have a similar situation with the Header Element but instead of a different image on mobile/desktop, I’m trying to achieve a different image on each blog category page that I have the Header Element enabled.

I currently use one default image along with <h1> {{post_title}} </h1> to have it showed the title of the category

[David]

Hi there,

by default WordPress doesn’t provide ‘featured images for Categories’ – it requires some custom work to do that.
The best route is to use the ACF plugin to register a Custom Field for those images:

https://www.advancedcustomfields.com/resources/adding-fields-taxonomy-term/

Don’t worry about the code to display the image.
Instead you can use a Block Element to create your Page Hero:

https://docs.generatepress.com/article/block-element-page-hero/

And with the Container Block dynamic background image, you can select Dynamic Background Image > Term Meta and enter the ACF field name in the Meta field name

[Milo Lam]

Hi David,
I was thinking, would it be possible to not use ACF plugin and do this instead? I’m trying to use {{post-description}} in the HTML on my header element right after the post title but it’s not showing the image, just the post title.

[Elvin]

Hi Milo,

The template tags are limited to a few specified things and custom fields. It can’t pull in category/tag descriptions.

But we can pull the value if you must.

Add this PHP snippet:

add_shortcode('term_description', function(){
	$term_description = term_description();

	return $term_description;
});

this allows you to pull the term description using [term_description] within the Header.

[Milo Lam]

Got cha. Thank you!

[Elvin]

No problem. 🙂

[Author]

Posts