Skip Navigation

[Gelöst] How to resize a featured image – An Answer

This support ticket is created vor 9 Jahre, 1 Monat. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 2 Antworten, has 2 Stimmen.

Last updated by Evan Seplow vor 9 Jahre, 1 Monat.

Author
Artikel
#174503

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.

#174635

Agnes Bury
Supporter

Languages: Englisch (English )

Timezone: Pacific/Midway (GMT-11:00)

Dear scottB,
First let me say a big thank you for taking your time and sharing the solution!
Great thanks also for explaining it step by step and clarifying what is what and for.

I admit, it happens our users come up with better solutions then our team here. It's good to learn form each other.

I've just tested your solution and it works like a charm. I think we should include it in our documentation. We do appreciate your help. I wish we had more users like you. Thanks a lot for your post!

#180224

Thanks Agnes. Your team tries hard and has a lot of ground to cover. I've gotten a lot of help and good answers here and love using Toolset and appreciate all I am making happen with it!