0

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

  • Your question is a little unclear. It the slider a third party plugin that want to modify? – cybmeta Dec 21 '14 at 11:21
  • no i am not talking about plugins , i am talking about gallery... – Raunak Hajela Dec 21 '14 at 12:01
0

get_post_gallery() returns an array with ids of the gallery images and the urls of the thumbnail (150x150 by default). The ids are returned in a string with a comma separated list of ids. If you want to get a different image size, you will need to get it in the foreach loop using the ID of the image and a proper WordPress function, for example wp_get_attachment_image_src.

In wp_get_attachment_image_src you can specifiy which image size you want to get. It can be any of the core image size (thumbnail, medium, large or full) or any other custom image size previously registered. It can be also an array representing width and height, for example, array(150,150) (it must matcha the dimensions of a registered image size).

For example, to get the full image size:

$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>';

} 
  • this is working correctly but its also showing gallery in post content which i don't want... i've used this gallery as my featured images but i don't want it shud display in post content what should i do?? – Raunak Hajela Dec 23 '14 at 8:27
  • That is another issue that you didn't mention in your question and maybe requires another one. Anyway, I think here are a lot questions about split content and gallery or strip the gallery shortcode from content. One I found quickly is this one. – cybmeta Dec 23 '14 at 8:44
  • checked the link u shared but its not working.. – Raunak Hajela Dec 23 '14 at 9:04
  • while searching i found ds one "add_filter('the_content', 'strip_shortcodes');" which z working quite a bit.. anyway thanks cybmeta.. – Raunak Hajela Dec 23 '14 at 9:08
  • It is better to not mix problems in the same question to not confuse future users. Please, open a new question for each problem. By the way, add_filter('the_content', 'strip_shortcodes') will strip all shortcodes, not only gallery. – cybmeta Dec 23 '14 at 10:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.