小屏幕上的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

回答

相關問題