Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

Page Header Image Crop Position

Home Forums Support Page Header Image Crop Position

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #137354
    David

    It would be awesome if users could choose position of the Page Header Image with some options like these:

    Top Left
    Top Center
    Top Right
    Center Left
    Center Center
    Center Right
    Bottom Left
    Bottom Center
    Bottom Right

    #137406
    Tom
    Lead Developer
    Lead Developer

    Currently we use the core WordPress methods to resize images, and WordPress doesn’t allow for crop positioning.

    It’s something I’ve looked at, but usually requires going with a more robust cropping solution which is usually super buggy and unreliable.

    Hoping WordPress introduces these options in the near future 🙂

    #137834
    David

    How about the position of the Page Header image using background-position property?

    #137922
    Tom
    Lead Developer
    Lead Developer

    That could be do-able.

    The Page Header metabox needs some serious design/organization love – it’s high on my list.

    I’ll see if I can cook something like this in there when I re-do it.

    #138110
    David

    Very cool. You rock!

    #174517
    Wayne

    Was this ever resolved?

    #174553
    Tom
    Lead Developer
    Lead Developer

    WordPress still doesn’t offer these options, but if you resize/crop your image inside the Media Library you can choose your crop position.

    The rebuild for Page Header has started but won’t be ready for a few versions 🙂

    #178547
    Mizanur

    Opps, David already suggested this. I have similar request. Cheers.

    #222300
    Jessica

    I’m having this issue as well – I have a full sized image (using the page header add-on) which looks fine on a full desktop/laptop screen, but the responsiveness is non-existent. Even if I set it to ‘background-position: center center;’ once it’s gets down to a smaller screen, it’s the same original height which is essentially 3 full mobile phone screens worth of image and you can’t see it. The image itself is the crucial part of the content.

    In my child theme, I created in my stylesheet:

    background-size: contain;
    background-repeat: no-repeat;

    but then I have about 900px on top and bottom of the image once it’s starts to size down for mobile/responsive.

    “Contain” seems to be the way to get the image to respond flexibly to the viewport width but how do I get rid of the 2000px above/below?

    #222330
    Jessica

    I got it. I removed the “header addon” and created a section, using this image as the background image.

    I added the following styles:
    `width: 100vw;
    height: 60vw;
    background-position: center center;`

    and it’s working perfectly as desired.

    However: When I do the same using the header addon (same style attributes), there is no resizing (as above) and there’s still a massive amount of padding underneath.

    Am I missing something?

    #222353
    Tom
    Lead Developer
    Lead Developer

    What’s the background-size set to in the page header?

    Interested that using viewport width units makes the background images responsive.

    #222656
    Jessica

    Tom:
    Here’s what I did (using vh / vw) to get the responsive background image:

    1. In my 1st created section, I added my hero image to the background (regardless of what I put on top of it – for now, I needed it to respond).
    (Positioning the styled feature headline on top of it will be a whole other activity.)

    2. I gave the section a custom class of (in this case) “elephant”.

    3. In my child theme stylesheet, I created a class:
    .elephant {
    height: 80vh;
    background-position: center center;
    }

    (I started by using “100vw” but I was getting about 20px added on the right. So I swapped to “vh” and VIOLA!)

    It was a little trickier with the header addon. I added “!important” tags to the “.vertical-center-enabled” class – but I’m not sure what else that would affect so this seemed more isolated and controlled. Perhaps that would create all header images to take on the 80vh attribute, but that’s what I ‘m going for. I just wanted the hero image on the homepage to take it on.

    For now, my homepage hero image is 100% responsive and flex – No additional media queries necessary.

    I’m almost done with the site so when it’s done I’ll send you a link to show you what I’ve done.

    #222669
    Tom
    Lead Developer
    Lead Developer

    That’s awesome, thanks for sharing your method 🙂

    #222675
    Jessica

    Sure thing! I’m making a lot of progress and almost done so I’m excited to show you what I’ve done! Stay tuned!

    #223838
    Jessica

    Wanted to give you an updated solution to my full-width resizing header issue:

    Since I have created custom post types, I am not able to use the post types/meta boxes if I use the “sections” add-on. So, I switched back and used the “headers” add-on and dug deeper.

    I got the same effect by adding a few extra classes to my child theme stylesheet:

    .generate-inside-page-header-content {
    text-align: center;
    height: 60vh;
    }
    .separate-containers .generate-content-header {
    background-position: center bottom;
    }

    The effect is the same and works perfectly. Image is full-width, and resizes according the screen/device.
    The only difference is that there isn’t an area to indicate what custom classes (like you can in the sections area), however this reduces the need for adding a custom class so anytime I want to create a header images like this, it will automatically kick in. (hope that makes sense).

    Thus: the “featured image” is no longer needed. A little frustrating since featured images are standard for WP.

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