Home Forums Weaver Xtreme Theme Can I show entire image in parallax view?

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #18322
    mkmommy
    Participant

    Hello,

    We are using the parallax shortcode to display some images on http://www.littlesammyboy.com/loved-me/
    Some of the images have quite a bit chopped off of the top and bottom. Is there any way we can make the parallax window scroll over the entire image instead of cropping them?
    Thank you,
    Nikki B.
    #24796
    scrambler
    Moderator
    The image is scaled to cover the whole browser area so that as you scroll the parallax window there is always some part of the image to show though.
    As a result, how much of the image will end up showing inside the scrolling parallax window completely depends on the size and ratio of the image versus the size and ratio of the browser, so it will always be different on different devices or browser sizes / ratio.
    There are no way to ensure a consistent visible image area. This is exactly the same issue as the background image covering discussion we had before.
    #24797
    mkmommy
    Participant

    OK, yes, I do understand all that. What can you suggest that I do with my images to make them show up better though? For instance, I have tried various sizes and also adding whitespace above and below the image using GIMP, but nothing seems to make any difference. The top and bottom are always cut off. I’m willing to edit the images, but I’m not finding what works.

    I appreciate your help. 
    Nikki B.
    #24798
    scrambler
    Moderator
    The problem is that you are looking at one browser size/ratio, but even if you make it work on that browser size, The results will be different in another one.
    Reduce your browser width for example and observe what happens, Your image will no longer be cutoff at the top and bottom, but on the side.
    So the first thing you can do if you want to optimize for one device, is make the image the same ratio as the device browser you are looking at. If the browser ratio is the same as the image, the image should not be cut off. As you move the parallax window at the very bottom of the browser you should see the bottom of the image, as you scroll the parallax window to the top of the browser you should see the top of the image.
    Note: Below a different phrasing to the same answer
    #24799
    scrambler
    Moderator
    So as I made the suggestion to weaver to offer a portrait and landscape choice in the other thread for the parallax images, I realized that we could implement a portrait and landscape image solution right away with Custom CSS.
    For each parallax post, do the following:
    Place the URL of the image with a landscape Image ratio in the Desktop BG Image of the parallax post.
    Add the rule below in the Per Post Style box (dont forget the + at the beginning of the rule)
    +@media screen and (orientation:portrait) {
    .parallax#post-xxx-p {background-image:url(
    PortraitImageUrl) !important;}
    }
    Replacing xxx by the post ID number, and PortraitImageUrl  by the URL of the image with a portrait ratio.
    When the browser (desktop or mobile) will have a portrait ratio the default landscape image image will automatically change to the portrait image.
    It will not stop some cropping to occur, but it will considerably reduce it when the browser portrait ratio gets close to the portrait image ratio.
    #24800
    mkmommy
    Participant

    Thanks so much for your extra comments. Since we are using the shorcode method instead of creating a post for each parallax image, can we just add that CSS to the main Custom CSS area in Main Options > Custom & Fonts?

    #24801
    scrambler
    Moderator
    Make sure you use the class option in the parallax shortcode with a different name for each block like below
    class=’mypar1′
    Change the rule to the one below (different selectors)
    +@media screen and (orientation:portrait) {
    .parallax-base.mypar1 {background-image:url(PortraitImageUrl) !important;}
    }
    Using the class name
    Put the rule in the Per Page style box of the page that has the parallax shortcodes
    If you are doing that for several pareallaxe blocks, you can put all the rules in the same @media rule
    +@media screen and (orientation:portrait) {
    .parallax-base.mypar1 {background-image:url(PortraitImageUrl) !important;}
    .parallax-base.mypar2 {background-image:url(PortraitImageUrl) !important;}
    }
    #24802
    mkmommy
    Participant

    OK, one more question for now. I”m not fluent in CSS, so I want to make sure i understand what each piece in the code is.

    +@media screen and (orientation:portrait) {
    .parallax-base.mypar1 {background-image:url(PortraitImageUrl) !important;}
    .parallax-base.mypar2 {background-image:url(PortraitImageUrl) !important;}
    }
    When I inspect the elements on this page, http://www.littlesammyboy.com/loved-me/, I don’t know what I should use in place of the .parallax-base.mypar1,.parallas-base.maypar2, and other similar items. I’m not seeing an individual class for each one. What I do see is “parallax-base wvrx-fullwidth custom-class”, but I’m sure that probably isn’t the right thing.

    Also, in the code above, where you have {background-image:url(PortrainImageURL) !important;}, would that look like the following in actual use?
    Thank you!
    Nikki B.
    #24803
    scrambler
    Moderator
    You have copied the parallax shortcode directly from the help, but have not customized it to your use.
    All your shortcode have
    [parallax class='custom-class'....]
    custom-class is supposed to be a class you add if you need one.
    As I explained above, you need to give a different one to each parallax shortcode, so that you can target them individually. For example
    [parallax class='mypar1'....]
    [parallax class='mypar2'....]
    By giving each a different class, you can then use that class in the rules to select a different background image for each
    And yes, you do replace  PortraitImageURL  by the actual URL of the image you want
    #24804
    mkmommy
    Participant

    Oh! OK, thank you. We’ll give this a shot tomorrow. I appreciate your help.

    Nikki B.
    #24805
    mkmommy
    Participant

    I’m so sorry to bother you again. Could you please check and make sure I have implemented the code you gave correctly? It just didn’t seem to help at all. Maybe I’m not understanding what it is supposed to do.  I know you must think I am incredibly dense. I’m just so frustrated because we have tried so many things with the picture size and ratio and nothing seems to help prevent the cropping at all. I’m willing to pay for help with this if anyone is available to consult with me.

    thank you,
    Nikki B.
    #24806
    scrambler
    Moderator
    what I am seeing is that you have put the url of the image below as the main parallax image
    That image is square, so it will only be uncropped in a square browser.
    Then you used the exact same image for the portrait rule, so basically achieving nothing.
    What I explained was the following.
    To iminimze the cropping you could use two different image.
    One with a landscape ratio (like 16:9) basically with a longer width than height, that will minimize cropping on desktop and mobile device in landscape orientation.
    Then create a second image with a portrait ratio, (9:16) that you would use in the portrait rule I gave you, so that it would be used whenever the ratio of the browser is portrait, which means a width smaller than height. This would minimize the cropping on devices in a portrait orientation.
    Keep in mind there will always be some cropping as Not all devices have the same ratio (both in landscape or portrait), but it will minimize it.
    But by using a square image, you are pretty much sure to get a lot of cropping in both orientation, as almost no device has a square screen
    #24807
    scrambler
    Moderator
    If you are still having difficulty to understand this, you can download the two test images I made below
    upload them in your media library
    put the url of the landscape image as the base parallax image, and use the url of the portrait image in the rule I gave you.
    Then look at your parallax post page, and change the ratio of your browser by reducing it width progressively.
    When the browser content area will have a ratio of 1280/768 (the landscape image ratio) you will be able to see the whole image while scrolling the parallax window.
    At any other ratio, there will be some cropping. If the browser is taller (smaller W/H ratio) the image will be cropped on the side. If the browser is wider (bigger W/H ratio) the image will be cropped at the top and bottom.
    as the browser gets less wide, when its ratio becomes portrait, the image will change to the portrait image. There the same thing will happen.
    when the browser content area has a ratio equal to 900/1280 (the portrait image ratio), you will see all of the image when scrolling the parallax window.
    At any other ratio, there will be some cropping. If the browser is taller (smaller W/H ratio) the image will be cropped on the side. If the browser is wider (bigger W/H ratio) the image will be cropped at the top and bottom.
    Hope this help clarify things
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.