Support » Plugin: Jetpack by WordPress.com » Problem with Jetpack Gallery Width on Post Feed

  • Resolved glyndavidson

    (@glyndavidson)



    Hi guys, I’m having a problem with Jetpack Gallery-Item Width on my Post Feed.

    Let’s say I have one post where I have a tiled gallery with three columns. It’s the first gallery in that post so in the resulting html page, it gets given <div id=”gallery-1″>. The next gallery in that same post then gets given <div id=”gallery-2″>. Great! 🙂

    Then, let’s say I have another post with a tiled gallery, but in that gallery I only want two columns. Because it’s the first gallery in that post, the gallery in the resulting html page also gets given <div id=”gallery-1″>.

    This is fine when you’re viewing one post at a time, but on my post feed it’s causing problems – my first gallery with three columns now has column widths of 50% because it’s using the same styling as the two column gallery in my next post because both galleries have <div id=”gallery-1″>

    For more information see http://www.mountainwheelchair.com

    • This topic was modified 6 months, 3 weeks ago by  glyndavidson.
    • This topic was modified 6 months, 3 weeks ago by  glyndavidson.
    • This topic was modified 6 months, 3 weeks ago by  glyndavidson.

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Contributor Cena

    (@cena)

    Hi Glyn,

    First off, what an awesome idea! Heck, I’m fully ambulatory and wouldn’t mind one of those contraptions to get up hillside. 🙂

    At any rate, Jetpack is not properly connected on your site, so let’s tackle that first.

    If you take a look here, you can see the error: https://jetpack.com/support/debug/?url=http://mountainwheelchair.com/

    This means that we cannot access your site’s XML-RPC file:

    http://mountainwheelchair.com/xmlrpc.php

    This file is used by Jetpack and other plugins and apps to connect to your site. It must return the following message:

    XML-RPC server accepts POST requests only.

    You can see a working example here:

    http://jetpack.com/xmlrpc.php

    Since your site returns an error for this page, I would recommend that you check the following:

    1. Can you see the xmlrpc.php file at the root of your WordPress installation when accessing your site via FTP?

    2. Do you use any security plugins that may block access to this file? If so, could you disable them?

    3. Does your hosting provider block access to this file? You may need to contact them to find out.

    Let us know how that goes!

    Best,

    Hi Cena, thanks for your response and positive feedback. If it goes well then I’d love one too 🙂

    XML-RPC is now enabled again and the jetpack debug url is no longer returning an error, however, the original problem still remains.

    Plugin Support Dat Hoang

    (@htdat)

    Hi @glyndavidson,

    Yes JP Debug looks great now
    https://jetpack.com/support/debug/?url=http://mountainwheelchair.com/

    I’ve tested the issue on my site, I do not see any issue.

    My test like this:

    * First post: one gallery with 3 columns and another gallery with 2 columns.
    * Second post: two galleries with 4 columns.

    They look good – screenshot http://cld.wthms.co/GUV3eH

    Can you please check again? If the issue is still there, can you take some screenshots and give some notes for them?

    Cheers,

    Hi Dat, thanks for looking into the issue, which I’m afraid to say is still there.

    Do you have a live version of that site so that I could look at the source code please?

    To see the problem on my site, go to http://mountainwheelchair.com/build-log/comfiest-seat-ever/. You will see a gallery with three columns.

    Now if you go to my feed (http://mountainwheelchair.com/official-build-log/) and scroll down to the same post “Comfiest Seat Ever”, you will see that the very same gallery now only has one column.

    If you use a HTML inspector to look at the CSS styling, you will see that the gallery is first given a column width of 33%, but later on, after the CSS has loaded for another gallery with the same ID, the width of 100% is applied and over-rules the original styling.

    I’ve uploaded an image here which might help? http://mountainwheelchair.com/wp-content/uploads/2018/01/css-styling-issue.png

    I’m not sure if it helps with debugging, but if you view it on a smaller screen, it no longer happens. On my desktop, if I resize the browser to a small enough size, they take on the styling I want them to have.

    Plugin Support Dat Hoang

    (@htdat)

    Hi,

    Thanks for your feedback.

    My link is http://cld.wthms.co/BWfbyi (Due to the privacy issue, this is the shortened link, will be removed in 7 days).

    I found out that your current galleries are using the default gallery from WordPress, that’s why there are some HTML element IDs.

    In my case, there are no similar IDs – http://cld.wthms.co/qz3xYf

    If you go to WP Admin -> Settings -> Media, please select “Display all your gallery pictures in a cool mosaic.”, then Jetpack will override the default gallery from WordPress.

    Cheers,

    Hi Dat,

    I tried enabling “Display all your gallery pictures in a cool mosaic” but I wasn’t happy with the result as it makes “random” images appear to be more important than others due to the size difference.

    Thanks for sharing your site with me. I compared the CSS between your site and mine, and found that if I change the gallery type to “tiled columns” for example, then my site no longer generates the <id=”gallery-{number}”>.

    However, if the gallery type is “thumbnail grid” then it does generate the <id=”gallery-{number}”>. Can you confirm if this is the same behaviour on your site please?…

    Is it Jetpack that creates the thumbnail grid gallery, or is that a standard wordpress feature? I’d like to stick with the thumbnail grid if possible as it’s the only one that allows me to manually specify the number of columns.

    After reviewing this, would I be right in thinking that the gallery of type “thumbnail grid” is actually being generated by wordpress, and therefore this is not a Jetpack issue?

    Looking at the code, although there are several galleries with the same ID, it appears that a different CSS class is given depending on how many columns are in the thumbnail grid. For example:

    <div id=”gallery-1″ class=”gallery-columns-3″>
    and
    <div id=”gallery-1″ class=”gallery-columns-2″>

    Changing the style sheets for the different classes should fix my problem. I’ll let you know…

    Plugin Support Dat Hoang

    (@htdat)

    Hi,

    I tried enabling “Display all your gallery pictures in a cool mosaic” but I wasn’t happy with the result as it makes “random” images appear to be more important than others due to the size difference.

    As you see on my testing site, there are other choices “squares and circles” for selecting columns.

    However, if the gallery type is “thumbnail grid” then it does generate the <id=”gallery-{number}”>. Can you confirm if this is the same behaviour on your site please?…

    I confirm this.

    After reviewing this, would I be right in thinking that the gallery of type “thumbnail grid” is actually being generated by wordpress, and therefore this is not a Jetpack issue?

    Yes, that’s what I wanted to say. Sorry for not being clear.

    Changing the style sheets for the different classes should fix my problem. I’ll let you know…

    Yes, update us when you have info.

    Thanks.

    Fixed, by adding this to my style sheet:

    .gallery-columns-1 .gallery-item {
        width: 100% !important;
    }
    
    .gallery-columns-2 .gallery-item {
        max-width: 50% !important;
    }
    
    .gallery-columns-3 .gallery-item {
        max-width: 33% !important;
    }

    However, I have uncovered a problem with a gallery which is being generated by Jetpack. As this still relates to the original post, I’ll keep this thread going.

    When viewed on a mobile phone, the tiled mosaic on this post works fine:
    http://mountainwheelchair.com/build-log/what-an-incredible-week/

    However, when you view the post feed on a mobile phone, the tiled mosaic from that post (about 10 posts down) goes off the side of the screen.
    http://mountainwheelchair.com/official-build-log/

    Within the tiled mosaic, there is <div class=”gallery-group […]>
    When I view the single post on a smaller screen the inline styling changes the width and height of the <div>.

    However, when viewed in the post feed, the inline styling no longer changes and the tiled mosaic extends beyond the edge of the screen.

    • This reply was modified 6 months, 3 weeks ago by  glyndavidson.
    • This reply was modified 6 months, 3 weeks ago by  glyndavidson.
    Plugin Support Dat Hoang

    (@htdat)

    Hi,

    However, when you view the post feed on a mobile phone, the tiled mosaic from that post (about 10 posts down) goes off the side of the screen.
    http://mountainwheelchair.com/official-build-log/

    I confirm that I can see the issue – http://cld.wthms.co/qWI9gs

    Within the tiled mosaic, there is <div class=”gallery-group […]>
    When I view the single post on a smaller screen the inline styling changes the width and height of the <div>.

    However, when viewed in the post feed, the inline styling no longer changes and the tiled mosaic extends beyond the edge of the screen.

    I can see what you described here as well.

    I tested the theme you’re using – Twenty Eleven – and see this issue in my tag page and it looks fine. http://cld.wthms.co/FISSDm

    I checked your category page http://mountainwheelchair.com/category/build-log/page/2/ – similar to my tag page – and it’s fine as well
    http://cld.wthms.co/h5vp6h

    Having a closer look at http://mountainwheelchair.com/official-build-log/, it seems that you’re using a custom page template “page-template-build-log” for this page.

    In my opinion, that’s the cause. However, since this is a custom theme and code, I can not debug it further.

    I hope that my info here makes sense and help you to figure out the issue.

    Cheers,

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Problem with Jetpack Gallery Width on Post Feed’ is closed to new replies.