flexslider auf kleinen Bildschirmen

Question

Ich benutze das Sparkling Thema auf einer Wordpress-Site. Das Design verwendet Flexslider in einem div am oberen Seitenrand. Jede Folie enthält ein Bild mit einem div, das einen Titel und einen Auszug enthält.

wird der Schieber innerhalb header.php wie in dieser Funktion eingebaut:

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;

und das resultierende HTML sieht wie folgt aus:

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

standardmäßig den Flex-Beschriftung auf kleinen Bildschirmen unterdrückt, indem display: none in einer Medienabfrage, aber ich möchte es angezeigt, so dass ich eingestellt die Anzeige in meine eigene Medienabfrage zu inline.

Dies führt zu einem anderen Problem, weil das gesamte obere Teil div die Höhe des Bildes ist und es nicht unbedingt Platz für die Flex-Beschriftung gibt.

ich den Boden des Entry-Level-Titel möchte mit dem unteren Rand des Bildes ausgerichtet werden, und der Auszug unmittelbar unter dem Bild, das ich so erreichen:

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

aber nicht Ändere die Größe des oberen Bereichs, also überschreibe ich den Hauptinhaltsbereich.

Ich habe viele verschiedene Dinge ausprobiert, einschließlich versuchen height:auto fast überall.

Ich kann nicht herausfinden, wie die Schieberegler Höhe eingestellt ist. Es scheint in get_the_post_thumbnail zu sein. Ist das das Problem?

Answer 1

Sie können versuchen, die Bildhöhe in functions.php function the_post_thumbnail($size = 'post-thumbnail', $attr = '') einzustellen.