[Resolved] Change Hero header background image size

[Rozanne]

Hi, wonderful theme! 🙂
How can I change the background size a Hero header is using? Right now, it uses the largest, uncropped size image, and we have a header cropped and optimized image size we’d like to point it to for page speed and custom cropping purposes. I don’t see any place to change the size used on the admin end. (We can use the functions.php function or in the worst case edit the theme files, but I’m not familiar with your elements architecture…)
Thank you!

[Leo]

Hi there,

Can you take a look at step 3 and step 4 here to see if they help?
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-3-set-the-width

Let me know 🙂

[Rozanne]

Unfortunately, not. This is a theme php issue, not a css one. If you look at the actual image in the header of that page, the whole uploaded image is chosen instead of the appropriate sized one: http://bazaar.tekpup.com/wp-content/uploads/2019/07/BazaarFootage-3.jpg

I want to display this size: http://bazaar.tekpup.com/wp-content/uploads/2019/07/BazaarFootage-3-2279×570.jpg

I suspect that this needs to be changed programatically.

[Leo]

Not a PHP issue at all. This is how background images work (as opposed to static images).

Are you referring to the width or size?

The width is currently determined by the screen size and height is determined by the top and bottom pading I mentioned above.

Let me know if I’m missing something.

[Steven]

I believe Rozanne is referring to the value the hero uses for the background-image attribute in the CSS .page-hero rule. It uses https://domain.com/pw-content/uploads/original-image.jpg. Rozanne would like the Element hero option to allow a specific WordPress image size (under WordPress Settings > Media Settings) the hero should use. For example, Large size (2000×1500). If you’re original image is 3000×4000, that’s what currently gets loaded vs. a much smaller “horizontal crop”. Having an option to specify a different image size for mobile would also dramatically reduce the download time for hero images and allow a taller version if desired. The default WordPress Cover block (block editor) suffers from this same issue. Check out what Apple’s doing on their support site with their hero. Note how the background-image value changes based on the @media screen sizes and srcset. https://support.apple.com/

<div class="as-banner-image as-banner-image--top">
                              <style type="text/css">
                                  .as-banner-image.as-banner-image--top {
                                      background-image: url("/content/dam/edam/applecare/images/en_US/homepage/hero-banner-homepage.image.large_2x.jpg");
                                      }
                                  .as-banner-image.as-banner-image--top:before {
                                      content: "";
                           		   display: block;
                                      }
                                  @media only screen and (max-width: 735px) {
                                       .as-banner-image.as-banner-image--top {
                                           background-image: url("/content/dam/edam/applecare/images/en_US/homepage/hero-banner-homepage.image.small_2x.jpg");
                                           }
                                        }
                  		 		</style>

                          <img sizes="(min-width:735px ) 735w, 100vw" src="/content/dam/edam/applecare/images/en_US/homepage/hero-banner-homepage.image.large_2x.jpg" alt="" srcset="/content/dam/edam/applecare/images/en_US/homepage/hero-banner-homepage.image.small_2x.jpg 735w, /content/dam/edam/applecare/images/en_US/homepage/hero-banner-homepage.image.large_2x.jpg 1440w" class="as-image-speculativedownload"></div>

[Tom]

A mobile option for the featured image would be nice, but the hero typically uses the core featured image field to output the image. This would require us to add a secondary featured image metabox, which isn’t ideal.

I’ll think on it 🙂

[Steven]

It should still only require one featured image metabox selection. The image size variable would just be appended to the end of the src attribute file name (before the file extension). So the page editor metabox might have https://domain.com/pw-content/uploads/original-image.jpg selected by the user. And then in the Element hero settings, the site admin can set a desktop and mobile image size that is applied to all feature images. When the hero img src value is presented, it would either be https://domain.com/pw-content/uploads/original-image-yyyyXyyyy.jpg for desktop or https://domain.com/pw-content/uploads/original-image-yyyXyyy.jpg for mobile. It’s not using two completely different images for desktop and mobile. It’s using different versions of the same image that WordPress can be configured to automatically create. It will speed up download times significantly – especially on mobile.

[Tom]

Cool idea, I’ll definitely look into this 🙂

[Steven]

Thanks Tom 😉

[Rozanne]

Hope to hear from you on this issue, too! In the meantime, where’s the code that creates the css statement that chooses the hero background image? It would be absolutely trivial to change it to a call for a different version/size of the same image, if we only pick one for now. Please give me the file name. Yes, I know that the theme update would delete any changes we make, but I hope you’d deal with this issue by the time we need to update the theme. Thanks!

[Tom]

Hi Rozanne,

I’m not too sure what you mean – are you wanting CSS to show a different hero background on mobile?

Let me know 🙂

[Rozanne]

No. I want the css to show a different hero background *size*, period. On all devices. It would simply be a call to a different, predefined size of the image I already have in WP media settings. Hope this clear things up.

[Tom]

As of right now, it’s not possible. However, it’s something I’ll be looking into for GPP 1.9.

[Rozanne]

Are your files encrypted? If they’re not, and you don’t have a policy that forbids any local changes by users, *I* can change the code that creates the css myself. Please, cooperate on this. It’s super easy, if you could only get one of your programmers to tell you which file contains the code. This is very frustrating! All I need to do is slightly change one line of code, and I guarantee you that’s possible.

[Tom]

Hi there,

Editing core files is never a good idea, as you’ll lose your edits when you update the plugin. That can be super frustrating.

I just looked over the code to see if there’s any way to hook into it and do this now, and unfortunately, there isn’t. I need to make core changes to the plugin so it’s possible.

When I come up with a solid solution in the core plugin that I’m happy with, I’ll let you know which files to change to achieve this so you don’t have to wait for the update.

Will get back to you ASAP 🙂

[Author]

Posts