How to size a featured image – The Answer
Hello all,
This might be obvious to you hard-coders out there, but this is for the Medium-And-Under people…
I've battled this problem for a while now. And I've seen MANY posts about this in these forums as I've searched and searched for an answer. The problem being that the shortcode for an image in a Field will allow you to choose a width and height – but the wpv-post-featured-image shortcode doesn't have any sizing control!
When people have asked the programmers how to get around this, there've been a Lulu of answers which include very involved programming on the back-end. All logical stuff that involves creating custom thumb sizes and shortcodes and functions, getting into your theme files, adding php, using the "add_image_size" function, etc… All with NO FLEXIBILITY in sizing. Any of the answers were highly involved and only let you get ONE size. Nothing flexible.
When I came across the answer, I was dumbfounded how simple it really is! Here you go:
IN YOUR META HTML, DO SOMETHING LIKE THIS:
<div class="Picbox"><a href="[wpv-post-url]">[wpv-post-featured-image size="thumbnail" attr="class= ScaleThePicture"]</a></div>
AND YOUR CSS WOULD BE LIKE THIS:
.Picbox {
width: 100px;
height: 60px;
}
.ScaleThePicture {
width: 100%;
height:100%;
}
THATS IT.
Use any names you want instead of Picbox and ScaleThePicture, they're only for example. And certainly put any numbers you want for the Width and Height pixels. You can possibly even get away with only one of the dimensions. Play with it for your purposes.
For the neophytes, I'll break this down for you even more :
<div class="Picbox">
Creates a box that will be the container for our picture. In this case the CSS sets it at 100x60px.
<a href="[wpv-post-url]">
When this is in your VIEW, the current posts URL will replace the shortcode. The 'a href' will make that URL it into a link. So basically this will make your picture (called up in the next part) link to your post! You can skip this if your not looking to make it clickable. But since we usually want clickable pictures I thought I'd include the code here.
[wpv-post-featured-image
This will call up the featured image from the post.
size="thumbnail"
Use the size that's closest to what your aiming for. The options are Thumbnail, Medium, Large and Full. From whichever one you choose, the initial size will scale.
attr="class= ScaleThePicture"]
This part gives a CSS Class called 'ScaleThePicture' to the picture itself (whereas 'Picbox' was a CSS Class for an outer box that this picture will fit inside of). We then tell the picture (in the CSS) to scale to fit the outer box, filling it 100%. I stress again for the beginners, you can use any names your choose.
</a></div>
These just close out the href link, then close the outer box.
A USEFUL THOUGHT:
A quick way to add a margin within your box, so your pictures are not bumping with up against other objects, is to use a scale of 90% or something.
FINAL THOUGHTS:
It would be nice if the people would look at INTENT of the questions – and try to help problem SOLVE – Not just find the purest and difficult solution. Is it PROPER to scale an image? No. Is it more PROPER to have it sized first. Yes. But is this always needed??? Let's face it, the 'fields' shortcode is scaling things on the fly, so why not do it here?
I'm sure every one of the really genius and talented people on these boards (All of them who know coding much better then me) laugh at how simple an answer the above is. But why didn't anybody give it in the past year or two of people asking for an answer?
I hope this solves many peoples frustrations of getting a very common problem solved.