• Ian

    (@ianonline)


    Hello,

    I have the same problem described where a visitor needs to scroll to view the bottom half of a portrait image, as described in this post:
    https://wordpress.org/support/topic/gallery-width-height-2/

    My images come from a Google Photos gallery.

    I made the suggested change to make Slideshow Image Adjustment display “Show whitespace to the sides for narrower images” but that just hides the bottom half of the portrait image.

    If possible, it would be good to show an image full size in a lightbox, but I’ve not worked out where the correct option is.

    It should be possible to use the max-height CSS property somewhere, but I’m unclear where to enter it.

    On a side note, is there a way to make next/prev button more visible on landscape black and white photos?

    Thanks for your help.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Ian

    (@ianonline)

    I kind of get the impression that the website or server is telling me to take a break now because it is just refusing to save at least one of the settings I’m trying to change.

    I know exactly which I setting it is, I change it and save, reload the page… no change. Back to the relevant settings page, reload it… it still hasn’t changed. It drives me crazy! The setting in question is how to display the image title, I’ve reviewed the option in the gallery itself and in the default settings.

    For around six hours I’ve been working on this one part of this one page!

    Plugin Author Sayontan Sinha

    (@sayontan)

    I made the suggested change to make Slideshow Image Adjustment display “Show whitespace to the sides for narrower images” but that just hides the bottom half of the portrait image.

    The problem is that your theme has got conflicting styles that are messing with Photonic’s. Your theme is doing this:

    img, video, object {
        max-width: 100%;
        height: auto!important;
    }

    That setting of height: auto!important is overriding the calculation by Photonic. You will have to work with your theme’s author to figure out the impact of removing the !important directive. This will mess with pretty much every type of layout that Photonic has.

    If possible, it would be good to show an image full size in a lightbox, but I’ve not worked out where the correct option is.

    There isn’t an option for this, because a lightbox cannot work with a slideshow. Lightboxes are meant for non-slideshow layouts such as square thumbnails, or justified grids. A slideshow shows one image at a time as does a lightbox, hence coupling the two introduces redundant functionality.

    It should be possible to use the max-height CSS property somewhere, but I’m unclear where to enter it.

    To be compatible with all of WP, Photonic doesn’t define its own location to enter custom CSS. Instead you can use the standard location under Appearance → Customize → Additional CSS. That being said, as written above, your problem is with your theme here, not with Photonic or any custom CSS.

    On a side note, is there a way to make next/prev button more visible on landscape black and white photos?

    You can add this custom CSS. Modify the colours to suit your requirement:

    .splide__arrow { background: #a00; }
    .splide__arrow path { fill: #fff; }

    I know exactly which I setting it is, I change it and save, reload the page… no change. Back to the relevant settings page, reload it… it still hasn’t changed. It drives me crazy! The setting in question is how to display the image title, I’ve reviewed the option in the gallery itself and in the default settings.

    While I cannot help troubleshoot the behaviour of the back-end, note that all options don’t apply to the slideshow. It is not possible to show the title below the photo – this would mess with the slideshow sizing. The closest you can get is to cover the lower portion of the photo. If you pick a setting to display the title below the photos, Photonic will use the global default of “Tooltip”.

    Thread Starter Ian

    (@ianonline)

    Thank you for your help Sayontan. Customising the side arrows worked perfectly, and I’ve contacted the theme developer to find a solution to the conflicting code.

    Regarding the image title, I don’t know what else I can do. I’m not using a lightbox and I make the title setting to the defaults or to “Cover the lower portion always” wherever I find the option.

    In Google Photos settings, I select “Always use the photo title, even if blank”.
    On the Galleries themselves, I make sure it’s all default setting everywhere. The title should be “Cover the lower portion always” but no matter how often I save it, it just remains stuck on “Using a Javascript tooltip”. I have flushed the server cache in case that is stopping or delaying it from changing.

    Going through the process of setting up the gallery, I notice that immediately after saving it, the shortcode is shown and it shows that it never changed anything. I had a similar problem with another gallery and the only solution I found was to recreate the entire gallery, I may now recreate all my galleries.

    The people expected to view my site (are pensioners) often haven’t a clue what a tooltip is or how to display it.

    Thanks for your help.

    • This reply was modified 3 years, 1 month ago by Ian.
    • This reply was modified 3 years, 1 month ago by Ian.
    • This reply was modified 3 years, 1 month ago by Ian.
    Plugin Author Sayontan Sinha

    (@sayontan)

    In Google Photos settings, I select “Always use the photo title, even if blank”.

    This just changes the content of the title, not its appearance.

    On the Galleries themselves, I make sure it’s all default setting everywhere. The title should be “Cover the lower portion always” but no matter how often I save it, it just remains stuck on “Using a Javascript tooltip”.

    Can you try setting this explicitly on the slideshow instead of using the default? So, in the last step (where you are building the gallery), there is an option for “How do you want the title?” – you can set it to “Cover the lower portion always”. Basically, if you are able to see the shortcode, you would be adding the option, title_position="slideup-stick" in the shortcode. I have verified that this works.

    Thread Starter Ian

    (@ianonline)

    Can you try setting this explicitly on the slideshow instead of using the default?

    I’ve tried that, this is where it doesn’t seem to save, so incorrect shortcode continues to be shown.

    Also you replied whilst I made an edit to my comment – I’ll remove the change if I can, I added the following suggestion which I think could be a helpful option in if this conflicting code can’t be resolved….

    I recreated one gallery, and checked the generated shortcode has the right settings and it does, so I wonder if the conflicting code from the theme is hiding the title (when it does work) by not showing the bottom of the image. I would like to suggest one solution is the option of having the title at the top of the image instead of at the bottom.

    Plugin Author Sayontan Sinha

    (@sayontan)

    I’ve tried that, this is where it doesn’t seem to save, so incorrect shortcode continues to be shown.

    Are you using the Classic Editor or Gutenberg? If you are using the Classic Editor, you can actually go to the “Text” mode instead of the “Visual” mode. That will let you directly edit the shortcode without launching the wizard.

    if this conflicting code can’t be resolved

    Add this to your Custom Styles and see if it makes a difference:
    .photonic-stream img { height: auto; }

    If it does, then you don’t have to immediately fix your theme, but you will continue to face a similar problem any time you work with a plugin that deals with custom image sizes.

    Thread Starter Ian

    (@ianonline)

    Are you using the Classic Editor or Gutenberg?

    I’m using Gutenberg. I think recreating the gallery is an acceptable solution given how easy you’ve made it to create a gallery once image sourcing is setup.

    Add this to your Custom Styles and see if it makes a difference:
    .photonic-stream img { height: auto; }

    It didn’t seem to make a difference. Hopefully, I’ll hear back from MyThemeShop tomorrow. This is one of the best themes I’ve found in a long time and it’s designed for the niche my site is in, so I don’t want to change it if I can help it.

    Thread Starter Ian

    (@ianonline)

    Sayontan, I’m getting somewhere with this now.

    The CSS to fix the image height problem is:

    .photonic-slideshow-side-white li img {
    max-height: 633px;
    }

    The image title still doesn’t display. The gallery where it should show is set to default and the default I’ve made “Cover the lower portion always”, but it doesn’t show. Where does the photo title text come from? Perhaps I’ve not got it in the right place, it is now in the description of each photo in the Google Photos album.

    Thank you for your help.

    Plugin Author Sayontan Sinha

    (@sayontan)

    Google Photos has only one place to store the information – the description.

    I thought, based on your last few responses, the problem in your case was that the block was not updating, and that got fixed upon recreating the gallery. Did I misunderstand?

    Currently your site is behind a login/password, so I am unable to see the problem in action.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Help with max-height of slideshow’ is closed to new replies.