如何使用Photoswipe为同位素图库绘制媒体细节

时间:2016-08-04 作者:Bluestocking

我目前正在制作一个Wordpress图库,它直接从媒体库中提取,并结合同位素和Photosweep。使用的修改版本this, 我已成功将附件添加到页面模板,然后将显示限制为类别(使用媒体附件类别)。

我现在的问题是进一步优化显示。。。

因为我正在使用wp_get_attachment_image 在我的函数中(以便定义图像大小),而不是wp_get_attachment_url, 我拿不到href 工作除此之外,我还需要在data-sizehref.

我还试图绘制图像标题和标题,并将每个图像的类别作为类应用于包含div.

下面是我使用的代码:

function get_images_from_media_library() {
    $args = array(
        \'post_type\' => \'attachment\',
        \'post_mime_type\' =>\'image\',
        \'post_status\' => \'inherit\',
        \'posts_per_page\' => 25,
        \'category_name\' => \'artwork\',
    );
    $query_images = new WP_Query( $args );
    $images = array();
    foreach ( $query_images->posts as $image) {
        $images[]= wp_get_attachment_image( $image->ID, \'full\' );
    }
    return $images;
}

function display_images_from_media_library() {

    $imgs = get_images_from_media_library();
    $url = wp_get_attachment_url( $image->ID );
    $image_title = $attachment->post_title;
    $caption = $attachment->post_excerpt;
    $html = \'<section class="isotope-wrap">
              <div class="isotope gallery" data-pswp-uid="1">
                <div class="isotope-sizer"></div>\';

    foreach($imgs as $img) {
        $html .= \'<div class="isotope-item"><figure>
                  <a href="\' . $url . \'" data-size="">\' . $img . \'</a>
                  <figcaption class="wp-caption-text"><h2>\' . $image_title . \'</h2>
                  <p>\' . $caption . \'</p></figcaption></figure></div>\';
    }

    $html .= \'</div>\';

    return $html;

}
最后,我还尝试为同位素库构建一个过滤器组,使用图像类别作为标签。这是我到目前为止的代码,它似乎不起作用,因为我的类别没有统计图像(所有类别都显示为0):

$terms = get_terms(\'category\', array(\'parent\' => \'artwork\'));
                      $count = count($terms);
                        if ( $count > 0 ){
                          foreach ( $terms as $term ) {
                            echo "<button type=\'button\' class=\'btn btn-dark\'  data-hover=\'" . $term->name . "\' data-filter=\'." . $term->slug . "\'>" . $term->name . "</button>\\n";
                          }
                        }
在此方面的任何帮助都将不胜感激,谢谢。

EDIT 我添加了以下代码:

function get_image_urls_from_media_library() {
    $args = array(
        \'post_type\' => \'attachment\',
        \'post_mime_type\' =>\'image\',
        \'post_status\' => \'inherit\',
        \'category_name\' => \'artwork\',
    );
    $query_images = new WP_Query( $args );
    $urls = array();
    foreach ( $query_images->posts as $image) {
        $urls[]= wp_get_attachment_url( $image->ID );
    }
    return $urls;
}
并添加了一个嵌套的foreach, 哪个图纸是有效的href. 然而,不幸的是,它只是绘制第一个附件条目,库中的所有图像都链接到同一个第一个图像。图像也在页面上复制了5次。

1 个回复
SO网友:Tedinoz

我的情况和你的非常相似。我相信这些笔记会有所帮助。

1-查询自定义分类法时,wp\\U查询需要更多信息。The codex reference is here.信息在此表格中。

\'tax_query\' => array(
        array(
            \'taxonomy\' => \'people\',
            \'field\'    => \'slug\',
            \'terms\'    => \'bob\',
        ),
    ),
就你而言,我认为分类法是“艺术品”。我发现使用“slug”字段值很好;我让你知道你的术语是什么。

2-在修改后的函数中,删除了“posts\\u per\\u page”参数。这是您的选择,但请注意,如果您不声明它,那么WP查询将返回最多10条记录。如果您希望看到更多图像,那么这可能就是答案。

3-在函数“display\\u images\\u from\\u media\\u library”中,第二行是:

“$url=wp\\u get\\u attachment\\u url($图像->ID);”。

在本例中,$image是一个未定义的变量。由于$image是函数“get\\u images\\u from\\u media\\u library”中的一个变量,因此我冒昧地猜测,在某个阶段,您只有一个函数可以获取图像信息,然后显示它;但是,当您将单个函数一分为二时,您可能没有注意到这一行。

4-创建过滤器的代码从顶层(父级)开始-很好,但我相信过滤器实际上是子级而不是父级。本质上,还需要另一个foreach(详情如下)。

5-除上述内容外,您已将初始关注点设置为“附件URL”。但我建议,集中精力从WP\\u查询中获取帖子/附件ID,并以此作为获取需要显示的所有其他字段的手段,可能会更有成效。事实上,如果您基于$posts创建一个数组,您将自动获得标题和标题作为副产品。

我发现以下方法可行。显然,您需要在每个函数中替换相关的分类法和术语。

function gallery_get_images_from_media_library(){
    $g_myargs = array(
        \'post_type\' => \'attachment\',
        \'post_mime_type\' =>\'image/jpeg\',
        \'post_status\' => \'inherit\',
        \'posts_per_page\' => 25,
        \'tax_query\' => array(
            array(
                \'taxonomy\' => \'media_category\',
                \'field\'    => \'slug\',
                \'terms\'    => \'edition-covers\',
            ),
        ),
    );
    $g_myquery_images = new WP_Query( $g_myargs );

    $g_posts = $g_myquery_images->posts;

    $html = \'<section class="isotope-wrap">
              <div class="isotope gallery" data-pswp-uid="1">
                <div class="isotope-sizer"></div>\';

    foreach ($g_posts as $g_img) {

        $url = wp_get_attachment_url($g_img->ID);

        $src = wp_get_attachment_image_src($g_img->ID,\'full\');

        $image_title = $g_img->post_title;

        $caption = $g_img->post_excerpt;

        $html .= \'<div class="isotope-item"><figure>
                        <a href="\'.$url.\'">
                        <img src="\'.$src[0] .\'"></a>
                        <figcaption class="wp-caption-text">
                        <h2>\' . $image_title . \'</h2>
                        <p>\' . $caption . \'</p>
                        </figcaption></figure></div>\';
    }

    $html .= \'</div>\';

return $html;
}
为了显示图像,我在模板页面中添加了以下代码。

$imgs = gallery_get_images_from_media_library();
echo $imgs;
<小时>
function gallery_make_filters(){

    // starting row of the filter = show all
    $gallery_filter_content = \'<button class="button is-checked" data-filter="*">show all</button>\'. PHP_EOL ;

    // get the cover terms for parent terms with a count>0
    $gallery_parentterms = get_terms( array(
    \'taxonomy\' => \'reviewcovers\',
        \'parent\' => 0,
    \'hide_empty\' => false,
    ));

    // if there are parent covers with children
    if (is_array($gallery_parentterms)) {

        // break down for each parent
        foreach($gallery_parentterms as $gallery_obj) {

            // get the children covers 
            $gallery_childterms = get_terms( array(
                \'taxonomy\' => \'reviewcovers\',
                \'child_of\' => $gallery_obj->term_id,
                \'hide_empty\' => true,
            ));

            // test for content of childterms
            if (is_array($gallery_childterms)) {

            // create a filter for each child.
            foreach($gallery_childterms as $gallery_object) {   

                    // build the filters for each non-zero child term
                    // filter is progressively incremented.
                    $gallery_filter_content .= \'<button class="button" data-filter="\'.".".$gallery_object->slug.\'">\'.$gallery_object->description.\'</button>\'. PHP_EOL;

                } // end of foreach-children array

            } // end of if children array

        } //end of foreach parent array

    }// end of if - parent array
    else 
    {
    echo \'no results\';
    }

return $gallery_filter_content;

}
要显示过滤器,请在页面模板中插入以下代码。

$filters = gallery_make_filters();
echo $filters;
最后,我不想被指责为“教你如何吸鸡蛋”,我发现我的代码中经常有一行或多行没有按预期工作(可能是因为我不是一个出色的程序员)。在任何情况下,当这种情况发生时,我发现显示数组或变量的内容非常有用,这样我就可以确定代码将在哪里撤消。

这几行是我的支柱。我只是“取消标记”行,更新数组/变量名,保存,更新站点
1-对于阵列

//echo "<pre>";print_r($gallery_childterms);echo "</pre>"; //DEBUG - a readable form of vardump
//echo "<p>end of print_r gallery_childterms</p>"; //DEBUG-this is so I know whether and what has printed.
2-对于一个变量

//echo "the src is ".$src."</br>"; // DEBUG - the line break is so that consecutive lines will make sense.