Как создать разные классы в цикле вывода статей?
Сделал макет сайта, в выводе будет картинка и название.
Но проблема в том, что первые две новости в больших блоках, а остальные в маленьких.
В div-е есть основной класс и дополнительный block_news__elements_1, ...2, ...3
Как сделать чтобы при выводе статей каждой присваивался класс block_news__elements_$n?
На flexbox это так у меня получилось.
<div class="block_news"> <div class="container"> <div class="block_news__row"> <div class="block_news__elements block_news__elements_1"> <div class="block_news__content"> <picture> <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)"> <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)"> <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)"> <img src="images/5190IMG_02_12_2017_615-410.jpg"> </picture> <div class="block_news__title"> Далеко-далеко за словесными горами в стране. </div> </div> </div> <div class="block_news__elements block_news__elements_2"> <div class="block_news__content"> <picture> <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)"> <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)"> <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)"> <img src="images/5190IMG_02_12_2017_615-410.jpg"> </picture> <div class="block_news__title"> Lorem ipsum dolor sit amet. </div> </div> </div> <div class="block_news__elements block_news__elements_3"> <div class="block_news__content"> <picture> <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)"> <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)"> <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)"> <img src="images/5190IMG_02_12_2017_615-410.jpg"> </picture> <div class="block_news__title"> Lorem ipsum dolor sit amet, consectetur adipisicing. </div> </div> </div> <div class="block_news__elements block_news__elements_4"> <div class="block_news__content"> <picture> <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)"> <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)"> <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)"> <img src="images/5190IMG_02_12_2017_615-410.jpg"> </picture> <div class="block_news__title"> Lorem ipsum dolor sit amet, consectetur. </div> </div> </div> <div class="block_news__elements block_news__elements_5"> <div class="block_news__content"> <picture> <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)"> <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)"> <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)"> <img src="images/5190IMG_02_12_2017_615-410.jpg"> </picture> <div class="block_news__title"> Lorem ipsum dolor sit amet, consectetur. </div> </div> </div> <div class="block_news__elements block_news__elements_6"> <div class="block_news__content"> <picture> <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)"> <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)"> <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)"> <img src="images/5190IMG_02_12_2017_615-410.jpg"> </picture> <div class="block_news__title"> Lorem ipsum dolor sit amet, consectetur. </div> </div> </div> <div class="block_news__elements block_news__elements_7"> <div class="block_news__content"> <picture> <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)"> <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)"> <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)"> <img src="images/5190IMG_02_12_2017_615-410.jpg"> </picture> <div class="block_news__title"> Lorem ipsum dolor sit amet, consectetur. </div> </div> </div> <div class="block_news__elements block_news__elements_8"> <div class="block_news__content"> <picture> <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)"> <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)"> <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)"> <img src="images/5190IMG_02_12_2017_615-410.jpg"> </picture> <div class="block_news__title"> Lorem ipsum dolor sit amet, consectetur. </div> </div> </div> </div> </div> </div>
Код CSS
/* BLOCK_NEWS */
.block_news {
margin-top: 100px;
/*max-width: 780px;
margin:0 auto;
padding-bottom: 20px;*/ /* стоит container */
}
.block_news__row {
display: flex;
flex-wrap: wrap;
}
.block_news__elements {
border:5px solid #fff;
}
.block_news__elements_1 {
flex: 0 1 50%;
}
.block_news__elements_2 {
flex: 0 1 50%;
}
.block_news__elements_3,
.block_news__elements_4,
.block_news__elements_5,
.block_news__elements_6,
.block_news__elements_7,
.block_news__elements_8 {
flex: 0 1 33.333%;
}
.block_news__content {
width: 100%;
position: relative; /* для картинки */
}
.block_news__title {
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
color: #fff;
font-size: calc(18px + 12 * ((100vw - 320px) / (1280 - 320)));
background: rgb(0, 0, 0, 0.6);
padding: 10px;
}
.block_news__content img { /* адаптация картинки под родительский блок */
max-width: 100%;
}Заметки к вопросу:
Так, а где PHP код, в нем это надо делать?
<?php get_header(); ?>
<!-- Здесь контент -->
<div class="block_news">
<div class="container">
<div class="block_news__row">
<?php // Display blog posts on any page
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query('showposts=8' . '&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="block_news__elements block_news__elements_1">
<div class="block_news__content">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<div class="block_news__title">
<?php title_chars(35, '...'); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<!-- END block_news__row -->
<!-- Pangination -->
<?php the_posts_pagination(); ?>
<!-- END Pangination -->
<?php wp_reset_postdata(); ?>
<!-- КОНЕЦ Вывод содержимого страницы в wp -->
</div><!-- END Container -->
</div><!-- END block_news -->
<!-- КОНЕЦ контент -->
<?php get_footer(); ?> ... $nn = 1; while ($wp_query->have_posts()) : $wp_query->the_post(); ?> <div class="block_news__elements block_news__elements_<?= $nn++ ?>"> ...
Спасибо! Как говорил Крылов - "А ларчик просто открывался"
Может ещё кто знает как к этому дописать, чтобы картинка подгружалась нужного размера.
Т.к. две первые картинки должны быть 640px, а остальные по 300px.
Но wordpress грузит в контейнер максимальный размер.
А вот шаблон резиновый и размер контейнера для картинки всё время меняется. Примерно от 925 до 300 px.
Может как-то можно $nn подцепить к thumbnail?
add_image_size( 'thumbnail-posts-large', '925', '925', false ); add_image_size( 'thumbnail-posts-medium', '460', '460', false ); add_image_size( 'thumbnail-posts-small', '300', '300', false );
Владимир
Чтобы выглядело вот так: