开发者

Wordpress: How to scale large image width? [closed]

开发者 https://www.devze.com 2023-03-21 05:58 出处:网络
Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed. This question is off-topic. It is not currently accepting answers.

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 11 years ago.

开发者_C百科 Improve this question

The large size images break my wordpress theme layout (exceeding from the width of post). I have noticed that the Twenty Ten theme scale the large size images width very nicely (by reducing the width and height). I want to do same thing, how can I do that?


You need to add this to functions.php

add_theme_support( 'post-thumbnails' );

then you use the smaller image in your post like:

the_post_thumbnail().

The default size is 50/50, but you can either change that or add more sizes:

to change default size you do

set_post_thumbnail_size();

and to add sizes you do

add_image_size( $name, $width, $height, $crop ); 

Wordpress then automatically creates multiple versions of your images in the different sizes.

In later versions there are already 3 sizes, thumbnail, medium and large, which are being created for you. To use these or any size added using add_image_size you simply do:

get_the_post_thumbnail($post->ID, 'medium');        // to use the medium size, replace medium with whatever size.

To use thumbnails you obviously do not insert the image into the post, you insert them in the theme.


I found this post which offers a straight forward scale()-method which could be used to do this.

But I would do this when the upload of your image is done (in your WordPress Backend) and save the thumbnail somewhere.

Also, WordPress should be able to do this out of the box.


In your stylesheet try something like:

img.size-large {max-width:960px !important}

Or, if you want to force a specific width:

img.size-large {width:960px !important; height:auto !important}
0

精彩评论

暂无评论...
验证码 换一张
取 消