In my website there is post thumbnail slider. Post thumbnail slider will show images related with blog post. I want when we write any post then it will allow me to upload few images via media uploader in every post using create gallery option and will display it. How can i achieve this task? Plz help
This is my index.php where my blog posts are shown
<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>
Check this line of code which is displaying my gallery in 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>
I want to display post slider in between above line of code i.e
<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>
I am using this code to display image gallery as slider and is also working properly but the thing is its using width and heaight 150x150 px (i.e default dimensions) instead of original dimensions.
<?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>";
}
}
?>
You can also check this link to preview my single.php file
