parallax – images appear cropped on phone and browser to browser. Normal?

[Laura_D]

Parallax images can appear cropped or cut off vertically or horizontally depending on the device I use and the browser.  Is this normal?  If not, is there a way to make them more adaptable to different browsers and devices?  http://www.l5diamondsmedia.com
Thanks.

[scrambler]

Yes, this mis normal.

I just answered that very same question here.

http://forum.weavertheme.com/discussion/12828/can-i-show-entire-image-in-parallax-view

Which is linked to a more global answer on how background images cover an area here

http://forum.weavertheme.com/discussion/12741/how-to-create-a-splash-or-entry-page-with-a-full-image-background-and-menu

Think of a parallax area, as a Windows that let you see an image that has been applied to the whole browser area. As you scroll, the window goes from revealing the bottom of the browser all the way to the top.

This means that the image you see has been stretched to cover the entire browser area. As a result, if the ratio of your image and the ratio of the browser are different, that image will end up being cropped either vertically or horizontally.

If the ratio of your image is the same as the browser area it will not be cropped.

There is simply no method that can cover one area with an image that has a different aspect ratio, without either cropping the image, or leaving blank space.

The choice made for parallax is to cover the area with the image which will eventually result in cropping. We can with Custom CSS change that choice to Contain so that All of the image is always visible, but in that case, when the ratio of the image and of the browser differ, there will be some empty space.

The best solution is to use images with a ratio that matches the most often use on desktop and small table (like 16:9), with the important content mostly occupying the center of the image, and accept the fact that when the browser is more square the image will be cropped on the side.

You do have the choice to specify a different image on mobile partially for that reason.

@weaver, It would be nice if instead of the two choices for the parallax image being desktop and Mobile, we had a choice for Desktop(landscape), and portrait.

So that the first image is used on desktop and mobile device when in landscape position, and the second image would be used on mobile when used in portrait mode.

This would allow a better optimization of the image cropping

[scrambler]

So as I made the suggestion to weaver, I realize 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

Added as a tutorial here (item #5): 

http://forum.weavertheme.com/discussion/12527/weaver-xtreme-tips-and-tutorial-part-7

[Laura_D]

“The
best solution is to use images with a ratio that matches the most often
use on desktop and small table (like 16:9), with the important content
mostly occupying the center of the image, and accept the fact that when
the browser is more square the image will be cropped on the side. “

Scrambler: Wonderful reply.  I will follow your links and suggestions.  It will take me a few rereads to fully grasp this.  Since I often work with photographer’s photos, I need to think carefully about when to use parallax.  Many thanks for your prompt and helpful reply. 

[Author]

Posts