Question

我有这些代码专门调整每个帖子中的图像大小。我将它放在我的Wordpress functions.php

中

//TYPEONE images for large screens

add_theme_support('TypeOne');
set_post_thumbnail_size( 1200, 600, true );
add_image_size( 'TypeOne', 1200, 600, true );



//TYPETWO images for medium screen

add_theme_support('TypeTwo');
set_post_thumbnail_size( 800, 350, true );
add_image_size( 'TypeTwo', 800, 350, true );



//TYPETHREE images for small screen

add_theme_support('TypeThree');
set_post_thumbnail_size( 420, 350, true );
add_image_size( 'TypeThree', 420, 350, true );

现在我的问题是我希望这些图像用作背景图像。我有以下代码：

<?php global $post; ?>
<?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) false, '' );
?>
<div style="background: url(<?php echo $src[0]; ?> ) !important;">text </div>

不幸的是，这种方法完全忽略了我为图像大小设置的代码（在我的function.php文件中找到）。

这是我想要实现的目标：

**HTML**
<div class="image-container">

</div>


@media screen and (max-width: 1100px) {
    .image-container{
        background: url(INSERT THE URL OF THE **TYPEONE** IMAGE)
    }
}

@media screen and (max-width: 700px) {
    .image-container{
        background: url(INSERT THE URL OF THE **TYPETWO** IMAGE)
    }
}

@media screen and (max-width: 400px) {
    .image-container{
        background: url(INSERT THE URL OF THE **TYPETHREE** IMAGE)
    }
}

嗯，我唯一的问题是如何在css中调用我喜欢的缩略图？

如果我使用这个css代码，

background:url('<?php the_post_thumbnail('TypeTwo'); ?>');

它真的不起作用..

请问有人在这里分享他/她的知识吗？谢谢！

Answer 1

使用以下代码注册图像大小。把它放在functions.php。

<?php
add_action( 'after_setup_theme', 'child_setup' );

function child_setup(){

  // Register image sizes
  add_image_size( 'TypeOne', 1200, 600, true );
  add_image_size( 'TypeTwo', 800, 350, true );
  add_image_size( 'TypeThree', 420, 350, true );

}

要查找图像详细信息，您可以使用以下代码段。

<?php
global $post;
$post_thumbnail_id = get_post_thumbnail_id( $post->ID );
$type_one_image_details = wp_get_attachment_image_src( $post_thumbnail_id, 'TypeOne' );
$type_two_image_details = wp_get_attachment_image_src( $post_thumbnail_id, 'TypeTwo' );
$type_three_image_details = wp_get_attachment_image_src( $post_thumbnail_id, 'TypeThree' );
$type_one_image_url = $type_one_image_details[0];
$type_two_image_url = $type_two_image_details[0];
$type_three_image_url = $type_three_image_details[0];

您现在拥有相应的图片网址。根据需要在CSS中使用它。

使用PHP在CSS背景属性中插入特色图像以支持媒体查询

1 个答案: