The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Fix popular images Blogger
Jeckcoeler
post Aug 11 2019, 09:18 AM
Post #1


Novice
**

Group: Members
Posts: 22
Joined: 14-July 19
Member No.: 26,933



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 11 2019, 10:28 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,312
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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

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

rule that sets the images to 60x60.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2019, 11:00 AM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,366
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jeckcoeler
post Aug 11 2019, 01:22 PM
Post #4


Novice
**

Group: Members
Posts: 22
Joined: 14-July 19
Member No.: 26,933



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jeckcoeler
post Aug 11 2019, 01:23 PM
Post #5


Novice
**

Group: Members
Posts: 22
Joined: 14-July 19
Member No.: 26,933



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:
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2019, 02:09 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,366
Joined: 9-August 06
Member No.: 6



I don't see a black border in your screen cap either. Do you mean WHITE border? Or maybe the faint shadow?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jeckcoeler
post Aug 11 2019, 03:41 PM
Post #7


Novice
**

Group: Members
Posts: 22
Joined: 14-July 19
Member No.: 26,933



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 11 2019, 04:28 PM
Post #8


WDG Member
********

Group: Root Admin
Posts: 8,312
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2019, 06:19 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,366
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jeckcoeler
post Aug 12 2019, 04:44 AM
Post #10


Novice
**

Group: Members
Posts: 22
Joined: 14-July 19
Member No.: 26,933



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 12 2019, 10:24 AM
Post #11


WDG Member
********

Group: Root Admin
Posts: 8,312
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jeckcoeler
post Aug 24 2019, 06:55 PM
Post #12


Novice
**

Group: Members
Posts: 22
Joined: 14-July 19
Member No.: 26,933



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 25 2019, 07:05 AM
Post #13


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,366
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th September 2019 - 05:47 AM