1 (edited by Moot 2019-05-16 22:10:48)

Topic: "Front" of gallery appearing with piece of image - Samsung S7 [SOLVED]

I have a blog post that has a WP-Juicebox gallery that appears fine on my Mac and on a PC. However, when trying on both a Samsung S4 and S7 (both using Chrome), it appears with a piece of an image instead of the whole thing (see attached image). Once I click on the gallery, it works and looks fine, it's just the "front" of it that looks wrong. I've tried recreating this with smartphone simulators online but have yet to manage, it seems to always look fine there.

You can see the webpage at: https://inmagicland.com/2019/05/greece/

Post's attachments

20190516_145842.jpg 281.75 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: "Front" of gallery appearing with piece of image - Samsung S7 [SOLVED]

The "Front" of the gallery that you describe is the Splash Page which is displayed by default on small screen devices when the gallery is embedded in a web page alongside other content.
When the Splash Page is tapped, the gallery is expanded to fill the browser viewport (giving the images more room to be displayed).
Please see the Screen Modes section of the Gallery Tour for more information on the Splash Page.

By default, the Splash Page uses the first image in the gallery.
In your case, the image is offset (and not filling the Splash Page container as expected) because of some custom CSS on your gallery's embedding page.
On line 665 of your 'style.css' file ('/wordpress/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/style.css') is the following code:

/* Images */
.entry-content img,
.comment-content img,
.widget img {
    height: auto;
    max-width: 100% !important; /* Fluid images for posts, comments, and widgets */

The max-width CSS rule is being applied to all images (all HTML <img> tags) within the specified CSS classes and this includes the Splash Page image. The Splash Page image has no option but to inherit this custom CSS rule.
Removing the !important declaration from the end of this custom CSS rule should be enough to reposition the Splash Page image correctly but, if other images on your web page require the !important declaration , then the best course of action would be to apply the max-width CSS rule to only those images on your web pages that require it through use of further CSS selectors (ids or classes).

Incidentally, you can choose to not use the Splash Page if you like by setting showSplashPage="NEVER".
If you continue to use the Splash Page (recommended for small screen devices), then you can configure the Splash Page (for example by choosing a specific image to be used) via the Splash Page configuration options.

I hope this helps.

3 (edited by Moot 2019-05-17 07:34:52)

Re: "Front" of gallery appearing with piece of image - Samsung S7 [SOLVED]

Thanks for the quick response. That's rather unfortunate, since that CSS snippet you posted is part of Jetpack, a rather popular plugin. I tried switching to a vertical image, but that doesn't work well either - it doesn't show the image on the splash page then on my laptop. Is there a particular size I should crop an image to, for it to definitely fit? That would be a bit cumbersome, but could at least solve the problem. Is there perhaps another solution that is more elegant? Changing the CSS of the plugin manually isn't ideal, of course, since it could have unintended consequences (as you mentioned), but would also get overwritten the next time I update that plugin.

Looks like the offending CSS is part of the Mobile module in Jetpack. Therefore, switching to a theme that is already mobile-ready (i.e responsive) could allow me to disable it, at which point the splash screen would hopefully not show a cropped image. A bit roundabout though...

For now, I have had to switch the gallery back to Simpleviewer, since the splash screen with the cropped image does not look good. I will only be able to use Juicebox if there is a reasonable solution to this issue.

Re: "Front" of gallery appearing with piece of image - Samsung S7 [SOLVED]

Is there a particular size I should crop an image to, for it to definitely fit?

The custom CSS is affecting the position of the image within the Splash Page container and the only way to counteract this is with CSS. The custom CSS will be applied to whatever image you choose to use for the Splash Page, no matter what shape or size it is.
Additionally, if your gallery is responsive, then the aspect ratio of the Splash Page will be dependent on the dimensions of the browser viewport being used to view the gallery so you have no way of knowing what shape and size the Splash Page will actually be for any given user (so there is no ideal size to use for the Splash Page image).

The quickest and easiest solution to the problem is to ensure that the max-width: 100% !important; CSS rule is not applied to the Splash Page image by removing the !important declaration from the rule. (This will likely not adversely affect other images on your web page at all.)

However, if you do not want to change the Jetpack CSS, then you'll need to change the Juicebox CSS instead.
Open the plugin's 'wp-juicebox/jbcore/classic/theme.css' file in a plain text editor.
Search for max-width: none; and replace all instances (there are four) to max-width: none !important.
In the current version of Juicebox-Pro (v1.5.1), they are on lines 119, 197, 247 and 696.

Otherwise, you could just add the following to the end of the 'theme.css' file:

.juicebox-gallery img, .jb-idx-thb-list .jb-idx-thumb img, .jb-dt-main-frame img, .jb-idx-thumbnail-container .jb-splash-holder img {
    max-width: none !important;

As the 'theme.css' file is loaded in your web page after the 'style.css' file, the !important declarations in the 'theme.css' file will override the !important declaration in the 'style.css' file

I hope this make sense and helps you to resolve your problem.

Re: "Front" of gallery appearing with piece of image - Samsung S7 [SOLVED]

Excellent, thank you! I tried your final suggestion and it works well. i switched that gallery back to Juicebox...

Re: "Front" of gallery appearing with piece of image - Samsung S7 [SOLVED]

I'm glad it worked! Thank you for letting me know.