Smaller Post Image

Mauer Themes Support Essentialist Smaller Post Image

Tagged: 

This topic contains 13 replies, has 2 voices, and was last updated by  Paul 1 year, 9 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #971

    apt2b
    Participant

    Hey there,

    is there a way to make the picture of the top / newest post smaller on the homepage of the theme?

    Thank you!

    #973

    Paul
    Keymaster

    Hello Apt2b,

    What you can do is actually have the first post displayed as the others: by going to “Theme Options” and unchecking the “Make the first blog post big” checkbox, this will make your page look similar to this:

    Or are you looking to achieve something like that (see screenshot)?

    Kind regards,
    Paul.

    #978

    apt2b
    Participant

    Hi Paul,

    yes, exactly! That second picture is exactly what we are looking for. Is there anyway to achieve that? I tried resizing the picture itself, but it didn’t change anything.

    Another question is, is there a way to keep it full width, but smaller height? In your example above the main picture is not the full width of the blog. Just curious 🙂

    #980

    Paul
    Keymaster

    Yepp, I’ll provide you with the way to do that tomorrow — when I’m back in the office.

    #981

    apt2b
    Participant

    Awesome! Thank you 🙂

    #984

    Paul
    Keymaster

    So here it goes. There are 2 separate ways:

    Way One.
    If you want to keep the aspect ratio that the theme uses, and would just want to make the picture smaller (as in the screenshot I’ve posted above).

    To do that please install the Simple Custom CSS plugin. Once you install and activate the plugin, in your Admin Panel please go to ‘Appearance’ > ‘Custom CSS’, paste the following code and save:

    @media (min-width: 768px) {
    
    	.post-card.big .entry-thumb-wrapper {
    		text-align: center;
    	}
    
    	.post-card.big .entry-thumb-wrapper img {
    		max-width: 68%;
    	}
    
    }

    Feel free to change 68% to whatever you feel looks best.

    Way Two.
    If you want to still have the image fullwidth, with its height reduced.

    In this case you will need to alter the thumb size and then regenerate the thumbs. Here is how to do that.

    Please note that it’s best to do this in a child theme — so that your changes don’t get overwritten when you update the theme.

    In your theme folder please go to the functions.php file and find the following line (see screenshot):

    add_image_size( "mauer_cover_thumb", 1596, 860, TRUE );

    860 is the height. As all the other thumbnails in the theme, it’s slightly bigger than the area where it’s displayed (for sharper looks on Retina-like displays). Change 860 to whatever you like and save the file.

    Once you’re done, install and activate this plugin. Then go to ‘Tools’ > ‘Regen. Thumbnails’ and regenerate the thumbnails.

    Please mind that this will make you cover images smaller both on archive pages and on single pages.

    Regards,
    Paul

    #989

    apt2b
    Participant

    Hey Paul,

    awesome! Thank you so much. Is there also a way to make the header image within the post smaller? So both the one on the homepage as well as the one on the post are the same size?

    Also, sometimes the image galleries are a bit glitchy. For example, one pic drops down to the bottom. On mobile, sometimes the posts are overlapping. So instead of showing the picture1, text1, picture2, text2. It shows: Picture1, picture2, text 2. Any idea why that is?

    Thank you for your help. It is much appreciated.

    P.S. I have some screenshots, if that helps.

    #991

    Paul
    Keymaster

    As for making the header image within the post smaller,

    If you use the second way described above, it will get smaller both on archive and single pages.
    And if you use the first way, please use the following CSS (instead of the snippet posted above):

    @media (min-width: 768px) {
    
    	.post-card.big .entry-thumb-wrapper {
    		text-align: center;
    	}
    
    	.post-card.big .entry-thumb-wrapper img,
    	.entry-full .entry-thumb img  {
    		max-width: 68%;
    	}
    
    }

    As for the galleries, can you please post screenshots of the behavior you are describing?
    What is the URL of your website?
    Do you experience the same issues with the galleries in theme demo (http://essentialist.mauer.co/)?

    Regards,
    Paul

    #992

    apt2b
    Participant

    Hi Paul,

    thanks again for the quick response. The URL to the blog is blog.apt2b.com

    I have a screenshot to show how the gallery is behaving. I wonder if it may have to do with image size? What is the best image size to upload to the gallery? I am not experiencing any issues with the galleries in the theme demo.
    I also have a screenshot to show the glitch on mobile, but I am not sure how to attach them to this blog post?

    Unfortunately, the new code you provided doesn’t work. It does keep the main image on the blog’s landing page small, but the header image on the posts themselves remain very large.

    I also have another question: Is there a way to make one of the links open up in a separate tab? Our link “Shop Apt2B” takes you back to our regular homepage, but we were wondering if we could have that open up in a separate tab?

    Thank you so much for helping. Really, really appreciate all this awesome and professional support 🙂

    #997

    Paul
    Keymaster

    Speaking of how galleries behave,
    If you had the thumbnails generated by another theme, please regenerate the thumbnails. For that install and activate this plugin. Then go to ‘Tools’ > ‘Regen. Thumbnails’ and regenerate the thumbnails.

    As for the new code. If I use this very code in Simple Custom CSS plugin, I get the cover image on single post pages small. See screenshots. So please double-check and make sure you are using this code, and that no part of it is lost.

    The code I’m using
    The result

    The menu item can lead to a new tab. This is a built-in WP feature. You just need to make it visible in Screen Options. Here is a very quick demonstration.

    If you enjoy the theme (or the support), please rate it on ThemeForest. This takes a moment and really helps a lot. Thank you.

    Kind regards,
    Paul

    #998

    apt2b
    Participant

    Hi Paul,

    thank you for the great support. I rated the theme 5 stars not just for the great design, but also for the great support.

    The code works 🙂
    The opening up the link in a new tab works 🙂

    You can probably imagine we are very happy with that.

    However, the gallery on this site is still glitchy: http://blog.apt2b.com/why-boho-chic-is-your-spirit-animal/
    We never used another theme before so I am not sure why this would be. I followed the process you suggested anyway, but the gallery as you can see is still glitchy. Any other ideas? 🙂

    #999

    Paul
    Keymaster

    Hello,

    Thanks for your kind words and for the review. I really appreciate that.

    About the galleries, you need to use images that are bigger than 526×526 for the galleries to work properly. Here is the full version of a pic from a gallery — it’s just 600×428, it’s height is too small.
     
    What you might not know is that you actually don’t need to resize anything manually before uploading — WordPress automatically generates all the sizes of an image used in the currently active theme once you upload the image. So there’s no need to manually resize images before uploading them to your site running the Essentialist. Just upload the biggest pictures you have (let’s say 1920×1440), and WordPress will do the rest for you — creating copies of the image in all the needed sizes including the one for the big first image.

    Also, the Photon module (part of Jetpack plugin) that you use to serve pictures caches images forever (source). So you need to re-upload bigger versions of your pictures with different names if you want to serve them with Jetpack.

    Regards,
    Paul

    #1000

    apt2b
    Participant

    Thank you Paul! You were really helpful 🙂

    #1007

    Paul
    Keymaster

    You’re very welcome!
    Thank you for using the Essentialist : )

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Smaller Post Image’ is closed to new replies.