control size of preview image

[jnese]

Currently some of the preview images are very large, especially compared to ggplot figures. For example, I want to use an fa image, saved as an .svg, but the preview image is extremely large. This was also true for .png images I added to a post or specified as "preview" in the yaml.

[m-clark]

I've just been messing with this so thought I'd chime in. Changing the width for this in styles.css will make changes to the preview image size. This might be enough for some, but as @jnese implies, some images are just going to look bigger relative to others. It'd be nice to have some finer control, perhaps in the yaml of the post.

.posts-list .post-preview .thumbnail img { width: 100%; display: block; }

[emdelponte]

@apreshill has this issue being resolved in the new versions? The preview images for the blog appear too large in a wide screen. I added a margin within the PNG image for the attached examples, so they appear a bit smaller. A full portrait image takes a very large portion.

[austinweisgrau]

You can adjust this image styling by changing the css class for thumbnail. You may need to add !important to each style element to get it to stick, depending on where you do this. This is what I ended up adding to my custom theme.css:

.thumbnail {
    padding: 0px!important;
    margin: 0px!important;
    max-width: 10%!important;
    height: auto!important;
    vertical-align: text-top!important;
}

Setting max-width as a percent and setting height: auto keeps the image sizing responsive.

[stevelinberg]

@austinweisgrau +1, this worked nicely, thank you.