Wordpress特色图片与不同的大小

时间:2014-03-26 10:42:29

标签: php css wordpress image

我试图在wordpress中复制下面的图像。问题是我不知道如何。

我有这段代码来控制特色图片的大小。

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 400, 300, true );
add_image_size( 'post-thumbnails', 400, 300, true );

此代码的问题是它只负责 ONE 大小,仅400x300。其他人怎么样?如果你看下面的图像,我相信你可以看到至少3种尺寸(3种变体)?

我在Index.php文件中的Wordpress代码简单明了:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>

<?php the_post_thumbnail('post-thumbnail', array( 'id'  => "FeaturedImage")); ?>

<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php else : ?>
<h2>You're Lost! </h2>
<?php endif; ?>

我想听听您对此如何实现html / css代码结构的意见。

enter image description here

1 个答案:

答案 0 :(得分:1)

为什么不使用add_image_size来添加更多尺寸?

add_image_size( 'another-thumbnails', 150, 300, true );
add_image_size( 'another2-thumbnails', 300, 150, true );

您也可以使用Masonry http://masonry.desandro.com/(js库)来满足您的需求,它会安排集团展示得很好。

另一种方法是使用timthumb(php lib http://timthumb.googlecode.com/svn/trunk/timthumb.php)动态生成裁剪图像(无需在每个上传文件上生成多个大小)。

在你的情况下,有两件事:

  • 使用add_image_size或timthumb生成多个图像大小
  • 使用砖石来很好地展示集团