[Resolved] Change Hero header background image size

Home Forums Support Change Hero header background image size

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #970386
    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!

    #970388
    Leo
    Staff
    Customer Support

    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 🙂

    #970517
    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.

    #970561
    Leo
    Staff
    Customer Support

    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.

    #979330
    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>
    #979430
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #980017
    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.

    #980044
    Tom
    Lead Developer
    Lead Developer

    Cool idea, I’ll definitely look into this 🙂

    #980055
    Steven

    Thanks Tom 😉

    #986308
    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!

    #986657
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #986989
    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.

    #987373
    Tom
    Lead Developer
    Lead Developer

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

    #989373
    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.

    #989817
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.