Help - Search - Members - Calendar
Full Version: Fix popular images Blogger
HTMLHelp Forums > Web Authoring > Web Site Functionality
Jeckcoeler
On my website [howtoplaystation.com], the images of the popular posts on the right side are too small, blurred and surrounded by black borders. Can someone help me fix this?

I tried some CSS codes, but didn't help.

I'm looking for css code that removes the black borders, blurring and makes the images bigger.

.PopularPosts .item-thumbnail {
width: initial;
height: 70px;
}
.PopularPosts ul li img{
object-fit: fill!important;
}
I tried this code, but didn't seem to fix the problem

Thank you in advance.
Darin McGrew
Well, if you want them to display a different size, then change the

.PopularPosts .item-thumbnail img {...}

rule that sets the images to 60x60.
pandy
Yeah, change or remove is what your want rather than add to the CSS.

Anyway, I don't see any black border. Fixed it already?
Jeckcoeler
QUOTE(Darin McGrew @ Aug 11 2019, 10:28 AM) *

Well, if you want them to display a different size, then change the

.PopularPosts .item-thumbnail img {...}

rule that sets the images to 60x60.

Thank you! But what do I have to write between the brackets?
Jeckcoeler
QUOTE(pandy @ Aug 11 2019, 11:00 AM) *

Yeah, change or remove is what your want rather than add to the CSS.

Anyway, I don't see any black border. Fixed it already?

No, still didn't fix it. See attachment:
Click to view attachment
pandy
I don't see a black border in your screen cap either. Do you mean WHITE border? Or maybe the faint shadow?
Jeckcoeler
QUOTE(pandy @ Aug 11 2019, 02:09 PM) *

I don't see a black border in your screen cap either. Do you mean WHITE border? Or maybe the faint shadow?


No, I mean the black background behind the thumbnails.
Darin McGrew
QUOTE(Jeckcoeler @ Aug 11 2019, 11:22 AM) *

QUOTE(Darin McGrew @ Aug 11 2019, 10:28 AM) *

Well, if you want them to display a different size, then change the

.PopularPosts .item-thumbnail img {...}

rule that sets the images to 60x60.
Thank you! But what do I have to write between the brackets?
You need to find the existing CSS rule, and change the height and width properties to whatever it is you want them to be.
pandy
You mean the little black half-moon that shows on top and bottom WITHIN the circle? It's in the image itself. Crop the image.

https://lh4.googleusercontent.com/proxy/Y4U...-h600-n-k-no-nu
Jeckcoeler
QUOTE(pandy @ Aug 11 2019, 06:19 PM) *

You mean the little black half-moon that shows on top and bottom WITHIN the circle? It's in the image itself. Crop the image.

https://lh4.googleusercontent.com/proxy/Y4U...-h600-n-k-no-nu

I can crop the image with Photoshop, but how can I change it in the HTML?
Darin McGrew
QUOTE(Jeckcoeler @ Aug 12 2019, 02:44 AM) *

QUOTE(pandy @ Aug 11 2019, 06:19 PM) *

You mean the little black half-moon that shows on top and bottom WITHIN the circle? It's in the image itself. Crop the image.

https://lh4.googleusercontent.com/proxy/Y4U...-h600-n-k-no-nu

I can crop the image with Photoshop, but how can I change it in the HTML?

If you're using Photoshop, then you can create real thumbnail images and use them, rather than resizing large image into dumbnails.
Jeckcoeler
QUOTE(Darin McGrew @ Aug 12 2019, 10:24 AM) *

QUOTE(Jeckcoeler @ Aug 12 2019, 02:44 AM) *

QUOTE(pandy @ Aug 11 2019, 06:19 PM) *

You mean the little black half-moon that shows on top and bottom WITHIN the circle? It's in the image itself. Crop the image.

https://lh4.googleusercontent.com/proxy/Y4U...-h600-n-k-no-nu

I can crop the image with Photoshop, but how can I change it in the HTML?

If you're using Photoshop, then you can create real thumbnail images and use them, rather than resizing large image into dumbnails.

Thank you. I'm using Blogger. This is the HTML code of that widget:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>3</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_MONTH</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>


What do I have to change? Thank you in advance.
pandy
That's mostly Blogger's proprietary template language.

There is a CSS property called clip. Only it's deprecated now, but I think browsers still support it, those that did before. I never played around with it much, but if you google "CSS clip" I think you'll find enough to understand how it works.

https://drafts.fxtf.org/css-masking-1/#propdef-clip

I'd just fix the images though.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.