2014-12-05 33 views
0

我创建了按类别ID获取文章缩略图的函数。 这是代码:设置WordPress缩略图文章的大小

<div class="row text-center"> 
    <?php 
     foreach ($wp_query->posts as $single_post) 
     { 
      $single_post_ID = $single_post->ID; 
      $url = wp_get_attachment_url(get_post_thumbnail_id($single_post_ID, 'medium')); 
    ?> 
    <div class="col-md-3 col-sm-6 hero-feature"> 
     <div class="thumbnail"> 
     <img src="<?php echo $url ?>" /> 
      <div class="caption"> 
       <h2><?php echo get_the_title($single_post_ID); ?></h2> 
       <p> 
       <a href="#" class="btn btn-primary">Commander</a> 
       <a href="#" class="btn btn-default">Plus Info</a> 
       </p> 
      </div> 
     </div> 
    </div> 
    <?php } ?> 
</div> 

我想与WordPress的功能设置大拇指800像素的大小500像素。
谢谢

回答

0

从我什么,你的WordPress功能输出你的形象内.thumbnail。所以做这个事情

.thumbnail { 
width: 800px; 
height: 500px; 
overflow: hidden; /* Cuts off whatever goes beyond the given width */ 
} 


.thumbnail img { 
    width: 100%; /* 100% equals 800px as defined for .thumbnail */ 
    height: auto; /* Allows the image a breathing option so it doesn't deteriorate */ 
} 

注:包含的元素已经具有规定的宽度(800像素),所以图像不会超出800像素

+0

这不是一个WordPress的功能做这样问。如果你想在响应容器等图像上使用100%的宽度,这是一个很好的解决方案。但是如果设计是静态的,那么为什么图像要大一些呢? – 2014-12-05 15:26:28

+0

包含的元素已经有一个给定的宽度,所以图像不会超过800像素 – 2014-12-05 15:28:02

+0

是的,它会工作,但真正的图像将被加载,它会更大,然后需要。如果响应速度更快,但如果没有,则可以制作多种图像大小以使页面负载更轻,这是非常有用的。想象一下,100 +的图像缩略图太大了,没有空... – 2014-12-05 15:29:19

0

使用add_image_size在你的functions.php:Wordpress documentation

add_image_size('my-thumbnail', 800, 500, true); 

或者使用插件来创建更多图片尺寸,如this

然后将媒体格式更改为新格式。如果将更大的图像设置为较小的CSS(性能问题),那将会更好。之后,总是取决于您的网站是否响应或不使用更大的图像,但这是另一个话题。

$url = wp_get_attachment_url(get_post_thumbnail_id($single_post_ID, 'my-thumbnail')); 

更新:图像必须被重新上载或者使用这个插件:Resize Image After Upload

+0

它对我不起作用:( – Boytun 2014-12-05 15:33:04

+0

我忘了提及你必须重新上传你的文件或者使用这个插件来做到这一点: https://wordpress.org/plugins/resize-image-after-upload/ – 2014-12-05 15:34:31

+0

阅读插件说明,这是一个很好的评论关于整个图像的事情!它也压缩图像。 – 2014-12-05 15:41:34

相关问题