CSS for Thumbnails/Favicons

  • Resolved ibloomdrop

    (@ibloomdrop)


    10 years, 6 months ago

    I am using the thumbshots generator to add favicons to my links. Unfortunately some of them are bigger than 16×16. I am trying to figure out how to either:
    1) make all images 16×16 pixes or
    2) float left the image so that the description wraps around it and then it won’t matter how big it is.

    In another answer I read the following: If you absolutely want to associate big images with links and have them scaled, you would need to wrap the image in a div class, then add an entry in your stylesheet for that class with the max-width and max-height properties to scale the image down.

    I have added the following to my stylesheet:

    .resize{
    width:16px;
    }

    And I have added the following to the Additional Details field next to the Images in the Link Sub-Field Configuration Table.

    resize

    In that field I’ve tried a number of things and so far no luck with resizing that favicon image. I would also be interested in knowing how to left-align it as well.

    Ideas? Thanks!

    https://www.ads-software.com/plugins/link-library/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Yannick Lefebvre

    (@jackdewey)

    You could use the max-width and max-height css properties to make all images no bigger than 16×16.

    Thread Starter ibloomdrop

    (@ibloomdrop)

    so am I using the Additional Details field for the Image correctly? just the name of my CSS class – ‘resize’? This doesn’t seem to be working. I changed the code to max-width and max-height in my CSS file.

    Plugin Author Yannick Lefebvre

    (@jackdewey)

    Can you perhaps send me a link to the page where you are trying to do this? I can examine the HTML and CSS code and see how to get this right.

    Thread Starter ibloomdrop

    (@ibloomdrop)

    Thanks!

    https://newparadigmastrology.com/links

    Plugin Author Yannick Lefebvre

    (@jackdewey)

    I am seeing the resize class on your images, but I don’t see the CSS to set the resize image max width and height. Are you sure you set it? If you are using a caching plugin, which I suspect you are based on your stylesheet name, you will need to clear your cache for the new style to kick in.

    Thread Starter ibloomdrop

    (@ibloomdrop)

    Hmmm… I am using W3 Total Cache. I have just cleared all cache and refreshed the page. Still nothing. Would you mind checking again? I added the class inside stylesheettemplate.css. Is that right place?

    Plugin Author Yannick Lefebvre

    (@jackdewey)

    No, stylesheettemplate.css gets read in to the plugin’s stylesheet editor. you should click on stylesheet in the Link Library menu and add it in there.

    Thread Starter ibloomdrop

    (@ibloomdrop)

    ok did that. cleared all cache. refreshed the page and it’s still not doing what I think I asked it to do. Here’s the code I saved into the stylesheet in the LL menu. Really wanted to try float:left, but wanted to see if the code is at least being read. Doesn’t seem to be doing anything… I’m not a CSS master so maybe I’ve done something wrong? (again)

    .resize{
    float:right;
    max-width: 16px;
    max-height: 16px;
    }

    Plugin Author Yannick Lefebvre

    (@jackdewey)

    I am not seeing the Link Library styles show up in the page source for your site.

    A quick fix would be to place the resize css style block in your theme stylesheet instead of putting it in Link Library.

    Otherwise, can you check that you have a call to wp_head in your theme header.php file?

    As a last resort, I could log onto your site admin if you give me a temp account through my web site contact form and see what is happening in details.

    Thread Starter ibloomdrop

    (@ibloomdrop)

    Yannick, thanks so much for your help. It seems that a combination of W3 Total Cache having preview settings enabled, and having to put the CSS in my theme style sheet instead of the link library CSS (even though wp_head is called in my header) has fixed the issue. I’ve got it how I wanted it to look now so I’m leaving it as is. Thanks!!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘CSS for Thumbnails/Favicons’ is closed to new replies.