小屏幕上的flexslider

我在Wordpress网站上使用Sparkling主题。该主题在页面顶部的div内使用Flexslider。每张幻灯片都包含一个图像以及一个包含帖子标题和摘录的div。小屏幕上的flexslider

滑块在该函数内的header.php建立像：

function sparkling_featured_slider() { 
    if (is_front_page() && of_get_option('sparkling_slider_checkbox') == 1) { 
     echo '<div class="flexslider">'; 
     echo '<ul class="slides">'; 
      $count = of_get_option('sparkling_slide_number'); 
      $slidecat =of_get_option('sparkling_slide_categories'); 

      $query = new WP_Query(array('cat' =>$slidecat,'posts_per_page' =>$count)); 
      if ($query->have_posts()) : 
       while ($query->have_posts()) : $query->the_post(); 

       echo '<li>'; 
       if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) : 
       echo get_the_post_thumbnail(); 
       endif; 

       echo '<div class="flex-caption">'; 
        if (get_the_title() != '') echo '<h2 class="entry-title">'. get_the_title().'</h2>'; 
        if (get_the_excerpt() != '') echo '<div class="excerpt">' . get_the_excerpt() .'</div>'; 
       echo '</div>'; 
      echo '</li>'; 
      endwhile; 
     endif; 

    echo '</ul>'; 

echo ' </div>';

} } ENDIF;

而生成的HTML看起来像这样：

<div class="top-section"> 
    <div class="flexslider"> 
     <ul class="slides"> 
      <li> 
       <img width="1920" height="512" src="http://pathtoslider.jpeg" 
        class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
        alt="slide1" 
        srcset="pathstodifferentresolutions.jpg" 
        sizes="(max-width: 1920px) 100vw, 1920px" /> 
       <div class="flex-caption"> 
        <h2 class="entry-title">Tomatoes</h2> 
        <div class="excerpt">Knowledge is knowing that tomatoes are a fruit. Wisdom is knowing not to put them in a fruit salad.</div> 
        </div> 
       </li> 
       ..more slides.. 
     </ul> 
    </div> 
</div> 

<div class="container main-content-area">

默认情况下，通过设置显示抑制在小屏幕上柔性字幕：在媒体查询没有，但我想以显示它，所以我设置显示内联在我自己的媒体查询中。

这会导致另一个问题，因为整个top-section div是图像的高度，并且flex-caption没有空间。

我想入门标题的底部与图像的底部，并摘录立即下面的图片，这是我完成这样的排列：

@media (max-width: 768px) { 
    .flex-caption { 
    display: inline; 
    bottom: 0; 
    } 
    .entry-title { 
    position: absolute; 
    bottom: 0; 
    } 
    .excerpt { 
    position: absolute; 
    vertical-align: top; 
    } 
}

但这并不调整顶部div的大小，所以我覆盖了主要内容区域。

我试过很多不同的东西，包括尝试height:auto几乎到处都是。

我不知道如何设置滑块高度。它似乎在get_the_post_thumbnail内。这是问题吗？

来源

2016-08-01 marcp

您可以尝试在functions.php中设置图像高度 function the_post_thumbnail($size = 'post-thumbnail', $attr = '')。

来源

2016-08-01 18:48:04

没有。尝试'''get_the_post_thumbnail（$ post_id，'large'）'''更改了img标签中指定的大小，但根本没有改变功能 – marcp

小屏幕上的flexslider

回答

相关问题