Использование nth-last-child (нечетное) и (четное) для добавления CSS к изображению - PullRequest
Новая
       10

Использование nth-last-child (нечетное) и (четное) для добавления CSS к изображению

0 голосов
/ 29 января 2019

У меня есть раздел на странице WordPress, который имеет 2 строки, расположение 1-й строки - текст |изображение и макет 2-й строки - текст |образ.Я использую ACF, чтобы получить содержимое, и у меня это работает, используя nth-last-of-type (четный) и nth-last-of-type (нечетный), чтобы получить две строки, содержимое которых перевернуто.Моя проблема заключается в том, что изображение в строке должно быть обрезано по углу, и это также необходимо перевернуть (обрезать влево для верхнего ряда и обрезать вправо для второго ряда)

Вот как это должно выглядеть: http://melindcooper.com/image1.jpg

У меня работает срезанный угол, но он обрезает изображение в одном и том же месте как для верхнего, так и для нижнего изображения:

http://melindcooper.com/image2.jpg

Вот мой код:

     <?php
     $posts = get_posts(array(
 'posts_per_page'   => -1,
 'post_type'        => 'leaders',
 'orderby' => 'menu_order',
 'order' => 'ASC',
 'meta_key'     => 'show_on_home_page',
 'meta_value'   => 'yes'
 ));
      if( $posts ): ?>
      <?php foreach( $posts as $post ):
     setup_postdata( $post );

   <div class="zone5" style="background-color:#ccc; margin-bottom: 20px;">
<div style="width: 50%;">
    <p class="Stitle"><?php the_field('first_name'); ?> <?php the_field('last_name'); ?></p>
    <p class="staff"><?php the_field('title'); ?></p>
    <p class="staff"><?php the_field('bio'); ?></p>
</div>
<div style="width: 50%;" class="cutCorner">
    <img src="<?php the_field('photo'); ?>" />
</div>
</div>
 <?php endforeach; ?>
 <?php wp_reset_postdata(); ?>
 <?php endif; ?>

Вот мой CSS: 

.zone5:nth-last-of-type(odd) {
  display: -webkit-flex; /* Safari */
  -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
  display: flex;
  flex-direction: row-reverse; 
  }

 .zone5:nth-last-of-type(even) {
  display: -webkit-flex; /* Safari */
  -webkit-flex-direction: row; /* Safari 6.1+ */
  display: flex;
  flex-direction: row; 
  }

 .cutCorner {
   position:relative; 
   display: inline-block;
   }

  .cutCorner img {
    display:block;
   }
  .cutCorner:after {
  position:absolute; left:-2px; top:-2px; content:'';
  border-top: 400px solid #ccc;
  border-right: 250px solid transparent;
  }

Это CSS, который мне нужно использовать для изображения второго ряда: 

//Bottom Image
 .cutCorner::after {
  position: absolute;
  right: -2px;
  top: -2px;
  content: '';
  border-top: 400px solid #ccc;
  border-left: 250px solid transparent;
  }

Как можно изменитьнижнее изображение CSS с использованием nth-last-of-type?Любая помощь будет принята с благодарностью !!

1 Ответ

0 голосов
/ 29 января 2019

Переписав свой код, теперь у вас будет класс lastitem в последнем div зоны 5 и класс lastcorner в последнем углу div.

вы можете указывать эти классы отдельно

У меня естьпроверил этот код и он работает для последнего элемента 

<?php

$lastItem = '';
$lastCorner = '';

$posts = new WP_Query(array(
  'posts_per_page'   => -1,
  'post_type'        => 'leaders',
  'orderby' => 'menu_order',
  'order' => 'ASC',
  'meta_key'     => 'show_on_home_page',
  'meta_value'   => 'yes'
  ));

if ( $posts->have_posts() ) : while ( $posts->have_posts() ) : $posts->the_post();

if ($posts->current_post +1 == $posts->post_count) { 
  $lastItem = 'lastitem';
  $lastCorner = 'lastcorner';
}

?>
  <div class="zone5 <?php echo $lastItem; ?>" style="background-color:#ccc; margin-bottom: 20px;">
    <div style="width: 50%;">
      <p class="Stitle"><?php the_field('first_name'); ?> <?php the_field('last_name'); ?></p>
      <p class="staff"><?php the_field('title'); ?></p>
      <p class="staff"><?php the_field('bio'); ?></p>
    </div>
    <div style="width: 50%;" class="cutCorner <?php echo $lastCorner; ?>">
      <img src="<?php the_field('photo'); ?>" />
    </div>
  </div>
<?php endwhile; endif; wp_reset_postdata(); ?>
...