Home Forums Weaver Xtreme Theme Parallax Primary to Bottom

This topic contains 44 replies, has 2 voices, and was last updated by  scrambler 1 week, 3 days ago.

Viewing 13 posts - 33 through 45 (of 45 total)
  • Author
    Posts
  • #61568

    GDGerlach344
    Participant

    I did not clear the cache so you are probably still seeing the old header image which is 940 x 350. The new header image is 1200 x 447. Try a forced refresh to see if the larger image shows up on your browser.

    Note: I set the header image for this page using the per page Featured Image option and then setting Featured Image to be the Header Image Replacement in the Per Page Layout options.

    I changed the vw value to 37.23 but it didn’t change anything regarding the image sizing and cropping but now I have a blank space between the bottom of the image and the menu bar. I can eliminate the blank space by changing the vw value back to 25.

    You said to change the parallax height to 446.8 but where exactly do I enter that value? I thought that value was set by the vw in relation to the max-width value in the rule.

    #61569

    scrambler
    Moderator

    the parallax height is in the shortcode option it sets the height globally

    The rule with the vw value changes it for browsers below 1200px wide

    #61570

    scrambler
    Moderator

    Also add the rule below to prevent cropping when browser is above 1200px

    @media all and (min-width:1200px) {
    .home #inject_header .parallax-base {background-size:1200px !important;}
    }

    #61571

    GDGerlach344
    Participant

    Even closer yet! After I added what you suggested in your last two posts, there was still cropping on the top & left edges of the image and there was a blank space to the right of the image and a large blank space between the image and the menu bar. I was able to fix the cropping on the left and the blank space on the right by changing “top left” to “top center” in one of the rules.
    Here’s what the rules look like now:

    @media all and (max-width:1200px) {
    #inject_header .parallax-base {height:37.23vw !important;}
    }
    #inject_header .parallax-base {padding:0 !important;margin:0 !important;background-position:top center !important;background-size:contain !important;}
    @media all and (min-width:1200px) {
    .home #inject_header .parallax-base {background-size:1200px !important;}
    }

    Here’s what the parallax shorcode looks like now:
    [parallax img='https://judygerlach.com/wp-content/uploads/Header-Ransom-Shelter.jpg' height=447]
    If there was some way to move the image down, I think it would take care of the top cropping and the blank space below the image.

    #61576

    scrambler
    Moderator

    The image used

    https://judygerlach.com/wp-content/uploads/Header-Ransom-Shelter.jpg

    Is still 940 x 350

    If when that is fixed you still have the issue, just reduce the height of the parallax until there is no space

    #61579

    GDGerlach344
    Participant

    Sorry about the header image size. I had changed the featured image to the 1200px version instead of changing the image in the parallax shortcode. Now the shortcode has the 1200px version. I have removed the feature image altogether because I assume it has nothing to do with the parallax.

    I reduced the height value in the shortcode to 405 and that eliminated the blank space below the image when the browser is wide but when the browser size is reduced, the top of the image is severely cropped and a large blank space below the image appears. Do I need to adjust the vw value in the rule as well?

    Also… about 40 pixels are cropped off the top of the image when wide.

    #61580

    scrambler
    Moderator
    Inside the 1200px wide browser, the area of the image is actually only 1180 x 405 because of he paddings /margins on the area
    This is why the 405 worked better, but that means the last rule I gave you needs to use that 1180 value
    @media all and (min-width:1200px) {
    .home #inject_header .parallax-base {background-size:1180px !important;}
    }
    It also means the ratio is 34.32 (405 / 1180) so the other rule needs to be
    @media all and (max-width:1200px) {
    #inject_header .parallax-base {height:34.32vw !important;}
    }
    #61581

    GDGerlach344
    Participant

    It looks much better. When I make the browser smaller, there is still some cropping at the top of the picture and blank space below. Which values should I tweak to try and fix that?

    #61582

    scrambler
    Moderator

    Change the background-position property to

    center 10px !important

     

    #61583

    GDGerlach344
    Participant

    I revised the¬†background-position property to “center 10px !important” and that fixed the top & bottom cropping. I need to get that menu bar out of the header; you already showed me how to do that.

    This is really picky but there seems to be a little cropping of the left and right margins as the browser gets smaller. Anything I can do to tweak that? If it involves trial & error, let me know what parameter to tinker with and I can do that myself.

     

    #61587

    scrambler
    Moderator

    If the cropping is constant, the best way is to make the image a little larger in an image editor

    You can also try to adjust the 1180px value to something smaller

    #61607

    GDGerlach344
    Participant

    One of the challenges I faced was that the preview function did not give a good representation of what the parallax image looked like. I had to log out to see what it really looked like. I ended up moving the text up on the page to solve the bottom cropping problem.

    Again, thanks for your patience and help. Moving forward, I’d like to see Xtreme make it easier to use a parallax image as is, without any cropping/sizing issues and having to add extra rules, etc. I’ll post something in the Feature Suggestions forum.

    #61608

    scrambler
    Moderator

    You were just not using the parallax shortcode for what is what meant for, which is full width blocks.

    That said, may be @weaver can add an option to the parallax shortcode to make it create contained Parallax areas like when the header image is use as a parallax background.

    But the nature of the parallax effect is that you cannot control precisely the visible part of the image, and that cropping will almost always occur when the browser size changes.

Viewing 13 posts - 33 through 45 (of 45 total)

You must be logged in to reply to this topic.