在我的网站上有帖子缩略图滑块。帖子缩略图滑块将显示与博客帖子相关的图像。我想当我们写任何文章时,它将允许我在每篇文章中使用创建库选项通过媒体上传器上传一些图像,并将其显示出来。我怎样才能完成这项任务?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文件
最合适的回答,由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>\';
}