Printable Version of Topic

Posted by: Jeckcoeler Aug 11 2019, 09:18 AM

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.

Posted by: 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.

Posted by: 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?

Posted by: Jeckcoeler Aug 11 2019, 01:22 PM

Thank you! But what do I have to write between the brackets?

Posted by: Jeckcoeler Aug 11 2019, 01:23 PM

No, still didn't fix it. See attachment:

Posted by: 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?

Posted by: Jeckcoeler Aug 11 2019, 03:41 PM

No, I mean the black background behind the thumbnails.

Posted by: Darin McGrew Aug 11 2019, 04:28 PM

You need to find the existing CSS rule, and change the height and width properties to whatever it is you want them to be.

Posted by: 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_Btu-Sh54o5VofA3Uf27Ek0yBfxf59O5WWyKXXQzba1YJlwVlZZvq7ykI5xTob5L2jJ6cxgpONAZbuYb3R-mjnOI=w600-h600-n-k-no-nu

Posted by: Jeckcoeler Aug 12 2019, 04:44 AM

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

Posted by: Darin McGrew Aug 12 2019, 10:24 AM

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

Posted by: Jeckcoeler Aug 24 2019, 06:55 PM

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.

Posted by: pandy Aug 25 2019, 07:05 AM

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.

Posted by: Ivy Crawford Nov 4 2019, 05:50 AM

Here I would do as pandy suggests, just fix the images and you'll be fine.