WordPress用缩略图扩展网格

WordPress expanding grid with thumbnail

本文关键字：扩展 网格 略图 WordPress      更新时间：2023-09-26

我使用codrops解决方案在扩展网格中显示团队成员：http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

我已经能够更改一些代码，以便在网格预览中显示我的文章缩略图。但是，我希望在展开视图中以全尺寸显示相同的图片。在原始版本中，它在名为1.jpg的文件中抓取图像。我如何实现抓取缩略图？

这是我的PHP/HTML:

<ul id="og-grid" class="og-grid">
<?php $args = array( 'post_type' => 'mitarbeiter');
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <li>
        <a href="mailto:<?php the_field('email')?>" data-largesrc="images/1.jpg" data-title="<?php the_title(); ?>" data-description="<?php the_field('funktion') ?><br /><br />Rufen Sie mich an unter <?php the_field('telefonnummer')?> oder schreiben Sie mir eine Nachricht.">
            <?php
            if ( has_post_thumbnail() ) {
            the_post_thumbnail('team');
            }
            else {  } ?>
        </a>
        <?php the_title(); ?>
    </li>
<?php endwhile; ?>

最初的CSS只是稍微改变了一下，以满足我的需求：https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/css/component.css

对原始JS没有任何更改：https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/js/grid.js

请查看您的代码：

data-largesrc="images/1.jpg"

将其更改为缩略图url。

相关文章：