Sampression Lite
[resolved] Error with spacing on front page when feat img at 100% (7 posts)

  1. crispyfried
    Posted 2 years ago #

    Lovely theme, I just have one problem that I can't seem to crack:

    I've changed the featured image to be at 100% but this has thrown off the spacing of the boxes when the front page loads. Here is an example.

    If I resize the page, the spacing becomes correct, so I think this must be an issue with isotope and the way it handles images, but having spent a few hours trying to fix this I thought I'd turn to the forum.

    The url is http://tablebedchair.com , pw rachel75

  2. incontrol69
    Posted 2 years ago #

    hi C.
    I visited your site, and have a suggestion for you. You could only allow 4 posts to be displayed in homepage...

    Could you explain us how you managed to have featured images at 100% working?
    I think many users would love to know about that..


  3. crispyfried
    Posted 2 years ago #

    Hi incontrol,

    That would be a work-around, but I actually want the thing to work properly, and need to display more posts on the front page!

    For the images to be full size, look in your style.css for any reference to this:
    article.post .featured-img

    (style.css can be found in Appearance - Editor)

    There will be a few references, and you should change the css to:

    article.post .featured-img {
  4. incontrol69
    Posted 2 years ago #

    Hi there!

    thanks for the tip... I tried to but I'm not good enough to find a solution!
    That is a great theme and it would be awesome to fond out how we could do that.

    I'll try to ask a friend who works on WP and will let you guys know whenever I have a solution..

  5. crispyfried
    Posted 2 years ago #

    This page: http://isotope.metafizzy.co/docs/help.html says

    Unloaded media files like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded.

    It has some suggestions about how to get around the problem, but I'm not sure where to insert the code... :(

  6. crispyfried
    Posted 2 years ago #

    Still haven't cracked this...

    Does anyone know if I can use the getimagesize() function? This should determine the size of any given image file and return the dimensions, but how would I go about using that function (if it is suitable)?

  7. Sampression
    Theme Author

    Posted 2 years ago #

    Hi crispyfried,
    Its basically an Isotope issue. But here are few things you can do to fix this:
    First Method
    1. Go to the script.js file at lib/js/
    2. Add this line just after jQuery(document).ready(function() { at the top of the page:

    This will just trigger the window resize function as soon as your page is ready. However if you want to trigger window resize function after few seconds, use this code:

    Here 5000 is time in milliseconds. ( And this looks cool :) )

    Second Method
    1. Go to line 102 under jQuery isotope in script.js
    2. change jQuery(function(){ to '$(window).load(function(){'
    This will initialize Isotope inside $(window).load() instead of $(document).ready(). This will trigger Isotope after all the media on the page has loaded.

    Hope this helps.
    Sampression Team

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic