작은 화면의 플렉스 슬라이더

Question

나는 Wordpress 사이트에서 Sparkling 테마를 사용하고 있습니다. 이 테마는 페이지 상단의 div 내에서 Flexslider를 사용합니다. 각 슬라이드에는 게시물 제목과 발췌 부분이 포함 된 div가 포함 된 이미지가 포함되어 있습니다.

슬라이더이 함수처럼 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; 기본적으로

<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"> 

가 디스플레이 no로 설정하면 작은 화면에 플렉스 캡션을 억제 :

그리고 결과 HTML은 다음과 같습니다 미디어 쿼리 없음을,하지만 난 그것을 표시 할, 그래서 나는 설정 내 미디어 쿼리에서 인라인으로 표시합니다. 전체 상단 섹션 DIV 이미지의 높이이며, 플렉스 캡션을위한 공간이 필요 없기 때문에

는

이것은 또 다른 문제로 이어집니다.

I 엔트리 타이틀의 바닥하고자

은이 같은 달성 이미지 하단 즉시 이미지 아래 발췌 정렬한다 :

@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 내에있는 것 같습니다. 그게 문제 야?

Answer 1

당신은 functions.php function the_post_thumbnail($size = 'post-thumbnail', $attr = '')에서 이미지 높이를 설정하는 시도 할 수 있습니다.