L
L
ligisayan2016-03-03 20:57:48
PHP
ligisayan, 2016-03-03 20:57:48

Why does the image slider have zero size and the navigation is not loaded?

Greetings! There is a site on wordpress in which there are posts belonging to a certain (category) category, for which I created a display template based on the blog page template, in which the gallery post format is displayed as a slider:
gallery-slider.php gallery format code:

<div class="flexslider postslider" style="max-height:365px; padding-bottom:0; overflow:hidden">
        <ul class="slides">
      <?php    
        $args = array(
                    'orderby' => 'menu_order',
                     'category'        => 'photo',
                    'post_type' => 'attachment',
                    'post_parent' => get_the_ID(),
                    'post_mime_type' => 'image',
                    'post_status' => null,
                    'posts_per_page' => -1
        );			
        $attachments = get_posts( $args );
         if ( $attachments ) {
          foreach ( $attachments as $attachment ) {
             echo '<li>';
             echo wp_get_attachment_image( $attachment->ID, 'format-standard');
             echo '</li>';
            }
         }
             ?>
        </ul>
    </div>

But in the output I get a slider with images of zero size:
<div class="flexslider postslider" style="max-height:365px; padding-bottom:0; overflow:hidden">
        <ul class="slides">
      <li><img width="704" height="400" src="../wp-content/uploads/2016/03/C4o-y2ary0-704x400.jpg" class="attachment-format-standard size-format-standard" alt="_C4o-y2ary0"></li>             
        </ul>
    </div>

although it should look like this:
<div class="flex-viewport" style="overflow: hidden; position: relative; height: 400px;"><ul class="slides" style="width: 8200%; margin-left: -2241px;"><li class="clone" style="width: 747px; float: left; display: block;"><img width="704" height="400" src="../wp-content/uploads/2016/03/zs380lziUc-704x400.jpg" class="attachment-format-standard size-format-standard" alt="-zs380lziUc"></li>
</ul></div>
<ol class="flex-control-nav flex-control-paging"></ol>
<ul class="flex-direction-nav"><li><a class="flex-prev" href="#">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul>

the flex-viewport wrapper and navigation elements are not created, and when hovering over the image in the code editor, it says: 0 x 0 narural 704pixels x 400pixels and following the link to the image goes, everything is in order - what can this mean?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
L
ligisayan, 2016-03-11
@ligisayan

In general, I found the correct answer. Not only that, in the theme, the slider was connected for certain pages:

if ( is_home() || is_front_page()|| is_page_template('template-blog.php')) { 
    wp_enqueue_script('jquery.flexslider-min', get_template_directory_uri() .'/js/jquery.flexslider-min.js','','', true);
    wp_enqueue_script('jquery.flexslider.start.main', get_template_directory_uri() .'/js/jquery.flexslider.start.main.js','','', true);
    }

so also the path was specified through get_template_directory_uri() , and everything is connected to me through a child theme, i.e. get_stylesheet_directory_uri() . Fixed - it worked!

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question