Question

我的函数中有一个脚本，根据它是横向还是纵向为特色图像添加一个类。它的工作原理是根据给定的后缩略图的宽度测量高度，并将该类从attachment-追加到horizontal-image attatchment-。

if ( ! function_exists( 'mytheme_vertical_check' ) ) :
    function mytheme_vertical_check( $html, $post_id, $post_thumbnail_id, $size, $attr ) {

        $image_data = wp_get_attachment_image_src( $post_thumbnail_id , 'large' );

        //Get the image width and height from the data provided by wp_get_attachment_image_src()
        $width  = $image_data[1];
        $height = $image_data[2];

        if ( $width > $height ) {
            $html = str_replace( 'attachment-', 'horizontal-image attachment-', $html );
        }
        return $html;
    }
endif;

add_filter( 'post_thumbnail_html', 'mytheme_vertical_check', 10, 5 );

但是，而不是将horizontal-image添加到实际的IMG类中，我需要将它添加到容器的类中。容器是一个类masonry-thumbnail的div。所以我希望相应的容器改为masonry-thumbnail horizontal作为他们的类。

注意：original writer of this function建议我使用jQuery修复程序，在尝试了几个不同的代码字符串之后，我意识到它与Infinite Scroll不兼容，因此更好的修改来自在WordPress内部通过函数，就像原始代码（完美地工作）在页面最初呈现时附加类，而不是通过jQuery进行页面后加载。此外，我想尽可能少地使用JavaScript。

Answer 1

你可以尝试这样的事情。修改您的功能只返回＆＃39;水平＆＃39;如果图像是风景，则为class：

function mytheme_vertical_check() {

    $thumb_id   = get_post_thumbnail_id();
    $image_data = wp_get_attachment_image_src( $thumb_id , 'tp-thumbnail' );

    $width  = $image_data[1];
    $height = $image_data[2];

    if ( $width > $height ) {
        return 'horizontal';
    }
}

在循环内部调用它来添加水平＆＃39;上课到你选择的div：

<?php if ( has_post_thumbnail() ) : ?>
    <?php printf( '<div class="masonry-thumbnail %s">', mytheme_vertical_check() );?>
        <?php the_post_thumbnail( 'large' ); ?>
    </div>
<?php endif; ?>

基于后缩略图方向将类添加到img容器

1 个答案: