Docs

[Daniel Eichar]

Hi,

Attached I included what my blog looks like. I am trying to show the original size of the featured image 100%. Currently the blog squares the images. Help! =)

[Friech]

Hi There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Your screenshot was not uploaded.

Thanks.

[Daniel Eichar]

This reply has been marked as private.

[Rad]

Hi Daniel,

It’s not possible, the container itself has its own aspect ratio. The image is just a background, and the size it follows is the size of its container.

Since it’s background image, the container has no ability to detect what size the image has.

The solution would be changing the background image to normal image. Please add this code to Admin > Appearance > Customizer > Custom > Javascript.

jQuery( function( $ ){

$('.blog .entry-cover').css({ 'padding-bottom':0});

$('.blog .entry-cover').each( function() {

$(this).prepend( '<img src="' + $(this).css('background-image').slice(4, -1).replace(/"/g, "") + '" style="width:100%">' );

} );

$(window).resize();

} );

Thanks!

[Daniel Eichar]

Thank you!! This worked great!

[Daniel Eichar]

Just wondering if this is possible with this specific layout? https://www.pelicancommerce.com/blog/

[Lely]

Hello Daniel,

That code will not work for that setup. We can adjust the code to this:

jQuery( function( $ ){

$('.blog .entry-thumb').each( function() {

$(this).prepend( '<img src="' + $(this).css('background-image').slice(4, -1).replace(/"/g, "") + '" style="width:100%">' );

} );
$('.blog .entry-thumb').css({ 'padding-bottom':'0','background-image':'none'});
$(window).resize();

} );

Hope this helps.

[Daniel Eichar]

Looks great! There is just one section that it broke which I attached below. This is a large section that comes half way down the page and the alignment is off.

[Lely]

Hello Daniel,

Do you want the image to be full width too on that part? If yes, please add this CSS:

.blog a.entry-thumb.featured.skinny {
    padding: 0 !important;
}
a.entry-thumb.featured.skinny h2, a.entry-thumb.featured.skinny>span {
    padding-left: 53px;
}
a.entry-thumb.featured.skinny .featured-view {
    padding-left: .535em !important;
    margin-left: 53px;
    margin-bottom: 20px;
}

Hope this helps.

[Author]

Posts