php - 使用 jQuery 将背景图像 css 设置为 wordpress 中的特色图像

Question

供引用 http://vvcap.net/db/Bs03ucQSrylV5LBiWduY.htp这是帖子特色图片的缩略图 http://vvcap.net/db/_45qWkuQwluTrYF51tFn.htp这是我要设置背景图像的正方形。小方 block 由后循环制成(如下所示)。循环内部是一个检查，以查看帖子是否作为“特色图片吸引”

CSS: 目前，这是唯一为 div bg 设置样式的 css。 (这应该被替换)

 section > div { background:#00c8e8;}

编译源 HTML 第二部分发布了一个特色图片(在 div 之上)作为示例。第一部分没有特色图片。

<section  class="resource">
   <div> 
        <a href="http://localhost/dov1/?custom_type=logo-design" rel="bookmark" title=" Logo Design">Logo Design</a>
  </div>
</section>

<section  class="resource">
  <div> 
        <a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread">Magazine Spread</a>

            <img width="125" height="125" src="http://localhost/dov1/wp-content/uploads/2012/03/project2_web-125x125.jpg" class="attachment-post-thumbnail wp-post-image" alt="project2_web" title="project2_web" />     
 </div>
</section>

HTML/PHP

<?php 

        $args = array(  
        'post_type' => 'custom_type', 
        'posts_per_page' => '-1' 
        );

        $loop = new WP_Query( $args );

        while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <section  class="resource">
              <div> 
          <a href="<?php the_permalink() ?>" rel="bookmark" title=" <?php the_title_attribute(); ?>">
                <?php the_title(); ?>
                <?php 
            // check if the post has a Post Thumbnail assigned to it. 
        if ( has_post_thumbnail() ) 
            { 
          //run jQuery here (prob replace the_post_thumbnail();)
              the_post_thumbnail();
        } 
        ?>
    </a> </div>
</section>
<?php endwhile; ?>

我不太擅长 jQuery 或 php。幸运的是，这个过程的逻辑是有道理的。

1. 循环帖子(勾选)
2. 测试帖子是否有特色图片(检查)
3. 执行 jQuery 以使用 the_post_thumbnail() 替换背景图像；
4. 利润!

我们遇到的另一个问题是我们如何区分并分配适当的背景图像？我只有 1 种形式适合 css 样式。如果它处理每个条目的过程，那将是有意义的。不幸的是，它不会重写每个条目吗？我知道这是一个很大的问题堆，但我会永远爱你的帮助!

马修

更新的 HTML 源代码

   <section  class="resource">

      <div> 

            <a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread">Magazine Spread</a>

            <img width="125" height="125" src="http://localhost/dov1/wp-content/uploads/2012/03/project2_web-125x125.jpg" class="attachment-post-thumbnail wp-post-image" alt="project2_web" title="project2_web" />      </div>

    </section>

Answer 1

假设每个 section 元素只有一个 img 元素，并且您希望 that 图像成为 background-image img 的父 div 的 :

$('section img').each(
    function(){
        var src = this.src,
            h = $(this).height(),
            w = $(this).width();
        $(this).closest('div').css({
            'min-width' : w,
            'min-height' : h,
            'background-image' : 'url(' + src + ')',
            'background-repeat' : 'no-repeat',
            'background-position' : '50% 50%'
        });
    }).remove();​

JS Fiddle demo .

引用资料:

• > css() .
• > each() .
• > height() .
• > remove() .
• > width() .