Make The Blog Post Image Full Width Like Articles on Medium

Home Forums Modern Make The Blog Post Image Full Width Like Articles on Medium

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #18168

    rizqi
    Participant

    Make The Blog Post Image Full Width Like Articles on Medium

    Resolved

    Dear Oliver, and Webmandesign Users

    I am using “Modern” theme on my photography blog (tustel.net), and I like it so much.

    Anyway, I would like to know in case there is a way to enable the full width images on the blog post just like images in Medium (medium.com) articles blog post images.

    If it is possible, I believe that the user experience will be much greater.

    I really appreciate any of your ideas, guys.

    Cheers :-)

    #18170

    Oliver Juhas
    Keymaster

    Hi rizqi,

    I’m glad you like the theme :)

    I can’t really find any example of fullwidth images on Medium looking at the website now.

    So, if you mean the post featured image to be fullwidth, it actually is as it spreads the full width of content container on single post page.

    If you mean to make fullwidth images within the post content, this is not so simple in WordPress currently. But you can somehow force outdentation on images with custom CSS. I would suggest applying such outdentation only on center aligned images of large size and on desktop screen sizes:

    @media only screen and (min-width: 1000px) {
    	.aligncenter.size-large {
    		width: 138%;
    		max-width: none;
    		margin-left: -19%;
    		margin-right: -19%;
    	}
    }
    
    @media only screen and (min-width: 1280px) {
    	.aligncenter.size-large {
    		width: 162%;
    		margin-left: -31%;
    		margin-right: -31%;
    	}
    }

    Or you can go ahead and adapt the above code to your needs.

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 7 months, 2 weeks ago by  Oliver Juhas. Reason: Fixing code
    #18190

    rizqi
    Participant

    Hi Oliver,

    Thank you for your response

    I have tried your suggestion. I added those codes on the Customize -> Additional CSS, but unfortunately, it seems that there was nothing changed. The post images were still stay the same, did not appear to be fullwidth like posts on Medium.

    Should I do it another way, or maybe use a plugin to be able to do so?

    Kind regards,

    Rizqi

    #18195

    Oliver Juhas
    Keymaster

    Hi Rizqi,

    Please note that you should adapt the CSS to your needs. I only provide tips for theme modifications – please read terms of service.

    Also, please understand I still don’t exactly know what images you mean. If, for example, you mean the image in post content such as on https://www.tustel.net/street-photography-dengan-go-jek/ then please note that my CSS will work for “Large” image size only. You have inserted the “Medium” image sizes in your post content. These are actually too small to be stretched, or they will simply become blurry as they will forcefully be stretched. I suggest using “Large” image size for such images.

    Also, your images are not aligned in the center, that’s why the CSS code I’ve provided doesn’t work – I’ve mentioned in my previous reply the code will work only with “center aligned images of large size”. Once you make an image you want to stretch and outdent in your post content a “Large” size and align it to center, it will work.

    But even with the CSS code I’ve provided the images will not be fullwidth, but only outdented. It is not possible to make the image fullwidth in the theme, at least not currently. Thank you for understanding!

    Best regards,

    Oliver Juhas
    WebMan Design

    #18196

    Oliver Juhas
    Keymaster

    Here is how you edit the post content images for the CSS code I’ve provide to work:

    Also please note you won’t see any change in post editor. The image will not be outdented there as the CSS I’ve provided only works on your website front-end.

    After editing your post images with this procedure, don’t forget to save/update your posts ;)

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 7 months, 1 week ago by  Oliver Juhas. Reason: Adding additional explanation info
    #18200

    rizqi
    Participant

    Hi Oliver,

    Thank you so much for your help.
    Yes, I meant the image in post content.

    I have followed your instructions, and amazed that it actually worked :-)

    I realize that in WP currently it is not possible quite possible to show the post images look like the post image on Medium, but the instructions you gave met with my expectation.

    Again, thanks a lot for your response and help, Oliver.

    Kind regards,

    Rizqi

    #18201

    Oliver Juhas
    Keymaster

    Hi Rizqi,

    Actually, when I look at your website now, I think we can do a bit better here. Please change the custom CSS I’ve provided to this new one to see if it’s better:

    @media only screen and (min-width: 1000px) {
    	.site-main > .entry {
    		overflow-x: hidden;
    	}
    
    	.aligncenter.size-large {
    		max-width: 1000px;
    		margin-left: 50%;
    		transform: translateX(-50%);
    	}
    }
    
    @media only screen and (min-width: 1120px) {
    	.aligncenter.size-large {
    		max-width: 1200px;
    	}
    }

    Although this will stretch the image to full width of content container, on smaller screen sizes (narrower than 1360px approximately) the image will get cropped from left and right side. This is the only downside of the above code.

    Best regards,

    Oliver Juhas
    WebMan Design

    #18202

    rizqi
    Participant

    Hi Oliver,

    Yeah, that’s true.
    I have just applied the new lines of codes, the result is actually better in terms of its full-width appearance.

    It is indeed cropping the post images, but not too significant.

    Oh man, I really love the way you responded my questions, and gave solutions in such a short time. Even though I am not a premium member.

    I can’t really wait to see your “Photography WP Theme” :-)

    Kind regards,

    Rizqi

    #18203

    Oliver Juhas
    Keymaster

    There are quite huge changes coming to WordPress in near future, so I a lot of theme and plugin updates are ahead of me. But hopefully I’ll find a way for a photography theme too ;)

    Best regards,

    Oliver Juhas
    WebMan Design

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

You must be logged in to reply to this topic.