Overlapping posts on homepage

  • Resolved lysle

    (@lysle)


    2 years, 6 months ago

    Hi,
    I use Alto Focus on my website, but as I started adding posts with Featured Images, to build an art gallery, I was surprised to see them displaying oddly. Before building my website, I did a test run with the wordpress.com version of the theme, to get familiar with the dashboard and features. It all worked smoothly: the grid seemed to favor stacking the posts in columns, so they would all have the same maximum width, but could have varied heights.

    As you can see on my homepage, the theme seems to instead favor rows, and while all the posts have the same max width, things get wonky as they are still allowed to have varied heights, resulting in overlapping.

    I don’t have access to the wordpress.com version of the code, but I do have access to the theme files installed on my site. Is there any way to solve this issue?

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter lysle

    (@lysle)

    With some additional research, I suspect that the problem has to do with Infinite Scroll not being activated on my website, unlike on the wordpress.com version.

    I am now trying to locate where this feature might be located and how to unable it, but at this point it is a mystery.

    Hi there,

    Infinite scroll is one of the modules that is included in the Jetpack plugin (which is a plugin that bundles WordPress.com features so you can add them to self-hosted WordPress sites) and you can find it here: https://www.ads-software.com/plugins/jetpack/

    There is info on how to set up infinite scroll (once you have added the plugin to your site) here: https://jetpack.com/support/infinite-scroll/

    Hope this helps point you in the right direction!

    Thread Starter lysle

    (@lysle)

    Thank you @jerrysarcastic ! I looked at the support resource you linked and tried the first method for enabling Infinite Scroll through the dashboard. It didn’t work entirely as expected:

    – The option “Load more posts in page with a button” did exactly that, except it didn’t fix the display and the older posts appear stacked from the top of the page, overlapping above the more recent one.

    – The option “Load more posts as the reader scrolls down” did the same thing as the option above, also featuring a button. [I’m leaving this option enabled in case anyone wants to see it live]

    After this, I went back to the support resource you linked, and tried to figure out where to put the lines of code and how to adjust them to the Alto Focus theme.

    I read through the function.php file of the theme, and determined that the layout of the posts seems to be determined by the asset grid.js, which in turn mentions:

    // If new posts have been loaded from Infinite Scroll, attach them to the isotope wrapper and lay them out
    // note: loadedPosts variable is set globally in altofocus_infinite_scroll_render(). See jetpack.php

    So I looked at jetpack.php and found no mention of Infinite Scroll at all.
    I presumed that maybe, that file Would the bottom of that file would be a good place to add the lines of code presented in the support resource you linked, but it made no difference.

    I think there’s definitely a problem with the vertical stacking or the posts: they don’t anchor themselves to the right element. I’m afraid I still don’t know how to fix this.

    • This reply was modified 2 years, 6 months ago by lysle.
    Thread Starter lysle

    (@lysle)

    I noticed that the version of the theme installed on my self-hosted site is older (1.0.7) than the one on the wordpress.com site (1.0.10).
    I downloaded the 1.0.10 version of the theme, uploaded it to my self-hosted site and activated it.

    The “Older posts” button works as it should and older posts stack under the more recent ones, as they should.

    However, the grid display is still messed up, not accounting for the height of images.

    The WP version installed on my self-hosted site is 5.9.3. Could the WP version be causing the malfunction? I haven’t figured out yet how to see which version is used by wordpress.com.

    WordPress.com is always on the latest version of WordPress, so it’s also on 5.9.3. So that’s not the issue.

    If you haven’t yet, I’d rule out a plugin conflict. Deactivate all plugins on your site except for Jetpack. If the front page works correctly, that confirms it’s a plugin, so then re-enable them one at a time until the front page breaks again to narrow down which one is causing this.

    Themes like Altofocus uses JavaScript code to dynamically create the masonry layout once all the posts have loaded on the front page, so a likely culprit could be anything that tries to minimize/optimize JavaScript code on your site.

    Thread Starter lysle

    (@lysle)

    Thank you so much @kokkieh ! It was indeed a plugin conflict, and the culprit in my case was SiteGround Optimizer.

    With it deactivated, the site theme works properly and I am so very happy.

    Thank you very much for your help and have a very nice day!

    Thanks for letting me know ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Overlapping posts on homepage’ is closed to new replies.