在每个WordPress帖子中显示自定义图库

时间:2014-12-21 作者:Raunak Hajela

在我的网站上有帖子缩略图滑块。帖子缩略图滑块将显示与博客帖子相关的图像。我想当我们写任何文章时,它将允许我在每篇文章中使用创建库选项通过媒体上传器上传一些图像,并将其显示出来。我怎样才能完成这项任务?Plz帮助

这是我的index.php 显示我的博客帖子的位置

<div class="featured-works" id="start">
            <div class="container-3x">

                <div class="block-header">

                    <h2 class="title">Featured Works</h2>
                    <span class="sub-title"><p class="slant"></p>Don\'t just take our word for it that we can create great looking and user friendly websites. Take a look at this months featured websites & see for yourself.</span>
                </div>

                <div class="block-content">

                    <div class="feat-post">

                        <div class="thumb">
                            <ul class="slider owl-carousel" id="thumb-slider">
                                <li class="slide-container">
                                    <div class="image flt-left">
                                        <a href="#"><img src="<?php print IMAGES; ?>/featured-works/1.png"/></a>
                                    </div>
                                </li>

                                <li class="slide-container">
                                    <div class="image flt-left">
                                        <a href="#"><img src="<?php print IMAGES; ?>/featured-works/1.png"/></a>
                                    </div>
                                </li>

                                <li class="slide-container">
                                    <div class="image flt-left">
                                        <a href="#"><img src="<?php print IMAGES; ?>/featured-works/1.png"/></a>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="content">

                            <?php 
                            $sticky = get_option(\'sticky_posts\');
                            // check if there are any
                            if (!empty($sticky)) {
                            // optional: sort the newest IDs first
                            rsort($sticky);
                            $sticky = array_slice( $sticky, 0, 1); //1 is the no of sticky post to display
                            // override the query
                            $args = array(
                              \'post__in\' => $sticky,
                              \'caller_get_posts\' => 1
                            );
                            query_posts($args);
                            // the loop
                            while (have_posts()) {
                            the_post();
                            // your code
                            $link = get_permalink();
                            echo "<h2 class=\'title\'><a href=$link>";
                            the_title();
                            echo "</a></h2>";
                            echo "<span class=\'sub-title\'>Template of the week</span>";
                            echo "<p class=\'summary\'>";
                            $excerpt = get_the_excerpt();
                            echo string_limit_words($excerpt,25);
                            echo "</p>";
                            echo "<p class=\'cat\'>Category : ";
                            the_tags(\', \');
                            echo "</p>";
                            echo "<p class=\'cat\'>Release Date : ";
                            the_time(get_option(\'date_format\'));
                            echo "</p>";
                            echo "<p class=\'cat\'>Avilable In : ";
                            the_category(\', \');
                            echo "</p>";

                            echo "<div class=\'demo\'>";
                                $nss_meta = get_post_meta( get_the_ID(),\'\');
                                $x= $nss_meta[_my_meta_value_key][0];
                                echo "<a href=$x>Live Preview</a>";
                                echo "<a href=$link>Documentation</a>";
                            echo "</div>";
                              }
                            }

                            ?>

                        </div>

                    </div>

                </div>

            </div>
        </div>  
检查显示我的图库的这行代码index.php

 <ul class="slider owl-carousel" id="thumb-slider">
                                    <li class="slide-container">
                                        <div class="image flt-left">
                                            <a href="#"><img src="<?php print IMAGES; ?>/featured-works/1.png"/></a>
                                        </div>
                                    </li>

                                    <li class="slide-container">
                                        <div class="image flt-left">
                                            <a href="#"><img src="<?php print IMAGES; ?>/featured-works/1.png"/></a>
                                        </div>
                                    </li>

                                    <li class="slide-container">
                                        <div class="image flt-left">
                                            <a href="#"><img src="<?php print IMAGES; ?>/featured-works/1.png"/></a>
                                        </div>
                                    </li>
                                </ul>
我想在上面代码行之间显示post滑块,即

<ul class="slider owl-carousel" id="thumb-slider">
   <li class="slide-container">
     <div class="image flt-left">
        #your slider code or gallery goes here
     </div>
   </li>
我使用此代码将图像库显示为滑块,并且工作正常,但问题是它使用的是宽度和高度150x150 px(即默认尺寸),而不是原始尺寸。

<?php
                                if (get_post_gallery()) {
                                $gallery = get_post_gallery( get_the_ID(), false );

                                /* Loop through all the image and output them one by one */

                                foreach( $gallery[\'src\'] as $src ) {
                                    echo "<li class=\'slide-container\'>";
                                       echo "<div class=\'image flt-left\'>";
                                          echo "<a href=$src>";
                                          echo "<img src=$src>";
                                          echo "</a>";
                                       echo "</div>";
                                    echo "</li>";
                                  }
                                }
                                ?>
你也可以检查这个link 预览我的单曲。php文件

1 个回复
最合适的回答,由SO网友:cybmeta 整理而成

get_post_gallery() 返回一个数组,其中包含库图像的ID和缩略图的URL(默认情况下为150x150)。ID以字符串形式返回,其中包含一个逗号分隔的ID列表。如果您想获得不同的图像大小,您需要在foreach循环中使用图像的ID和适当的WordPress函数,例如wp_get_attachment_image_src.

在里面wp_get_attachment_image_src 您可以指定要获取的图像大小。它可以是任何核心图像大小(缩略图、中、大或全)或以前注册的任何其他自定义图像大小。它也可以是表示宽度和高度的数组,例如,array(150,150) (它必须与注册图像大小的尺寸相匹配)。

例如,要获取完整图像大小,请执行以下操作:

$gallery = get_post_gallery( get_the_ID(), false );
$ids = explode( ",", $gallery[\'ids\'] );

foreach( $ids as $id ) {
    //Change "full" with the image size identifier you want to get
    $src   = wp_get_attachment_image_src( $id, "full" );

    echo \'<li class="slide-container">\';
    echo \'<div class="image flt-left">\';
    echo \'<a href=$src>\';
    echo \'<img src="\'.$src[0].\'" width="\'.$src[1].\'" height="\'.$src[2].\'">\';
    echo \'</a>\';
    echo \'</div>\';
    echo \'</li>\';

} 

结束

相关推荐

Images with excerpt function

我有一个很好的摘录功能,可以让我的段落保持得体。顺便说一句,效果很好。 function pietergoosen_custom_wp_trim_excerpt($text) { global $post; $raw_excerpt = $text; if ( \'\' == $text ) { $text = get_the_content(\'\'); $text = strip_shortcodes( $text ); &#x