Size of featured images

  • Hi Hans,

    Been using the template for some days now, and it works perfectly so far.

    I have just one questions at the moment with regards to the featured images on the homepage. They have different sizes at the moment, even when i changed image size. is there some way to have them all the exact same size?

    Thanks in advance for your help.

    Kind regards,

    Dennis

    @Dennis12

    The reason they are different sizes is because you need to upload larger images.

    WordPress crops the images to recommended sizes we have added in the theme.

    However, if you upload an image smaller than those sizes they will be distorted.

    The images should be at least 680px wide and a minimum of 500px in height.

    That will fix your issue.

    Hi, is there a way to automatically expand smaller images on the homepage?

    Yes you can set a specific size with some CSS code if you wish.

    The system will resize all images you upload but they must be a certain size otherwise they will not all appear the same.

    You can add the following css code to the Custom CSS tab in Appearance > Customize.

    .home .content-area img.wp-post-image {
    max-width: 100%;
    min-height: 200px;
    }

    You can change the min-height value to what ever you wish.

    ok, thanks. Is there a way to keep the top image expanded and change the rest?

    I want the main headline to remain 100% width. Or, preferably, I’d like to get rid of the top image and just have two columns at the top.

    I am not quite sure what you mean.

    You will have to clarify.

    However, if you mean that you don’t want to display the 1st posts (with larger image) and the newsletter signup box (at the top), then you can hide it using this CSS.

    .topfeatured, .topcta {display:none;}

    Use this in Appearance > Customize > Custom CSS field.

    OK, thanks! Is there a way to keep the newsletter signup box and remove the 1st post with wider image?

    @alan8228

    Yes it is but it will require editing the index.php file.

    In order for it all to work (infinite scroll, grid layout, pagination) we had to code the index.php file a certain way.

    One simple way is to copy the contents of the archive.php file into the index.php file.

    When you say copy, do you mean replace it?

    Also, on mobile the images are cut off. Is there a way to make them fit on the screen in mobile? I’m ok with just having one column instead of two. Right now there are two columns and I’m not sure how to change that.

    Hello @alan8228

    Can you show me an example of the images being cut off?

    They should simply be smaller on mobile devices.

    And yes you are correct, there are 2 columns, this mimics the layout on ViralNova.com on mobile devices.

    In order to change that it will require to edit the index.php file.

    As for your previous post, when I said copy it, yes I did mean replace it.

    However, if you do that the home page will look like the category pages, you will not have the Newsletter Widget.

    Sure, here is a screenshot of my homepage on an iPhone: http://newsaloo.com/wp-content/uploads/2017/05/IMG_2731.png

    The images are cut in half.

    What would I need to change to make it 1 column?

    The reason the images are cut in half as you say is because you added this code to the Custom CSS field,

    .home .content-area img.wp-post-image {
    max-height: 200px;
    min-height: 200px;
    min-width: 300px;
    max-width: 300px;
    }

    It prevents from the Bootstrap responsive CSS to take effect.

    What you need to do is upload larger images and WordPress will resize them to the set sizes and it will be responsive on all devices.

    Example: http://newsaloo.com/wp-content/uploads/2017/04/foxnews-insider1.png

    This image is 300x158px.

    You need to upload an image which is at least 680x500px for the system to resize it.

    That will take care of the image thumbnail sizes on desktops and they will be automatically resize on mobile devices.

You must be logged in to reply to this topic.