Как можно вывести в шахматном порядке записи в списке?
Т.е
Картинка — Описание
Описание — Картинка
Картинка — Описание
Возможно?
Как можно вывести в шахматном порядке записи в списке?
Т.е
Картинка — Описание
Описание — Картинка
Картинка — Описание
Возможно?
Легко, стилями CSS. Как пример. Можно либо через Flexbox либо через Grid. Примеры ниже. Хотя для этого есть Поисковики. Лично я предпочитаю Гриды нежели флексы, он гибче гораздо, но Инстант на флексах если что.
1. Flexbox
.blog .post { display: flex; align-items: center; } .blog .post:nth-child(odd) { flex-direction: row; /* для нечетных записей */ } .blog .post:nth-child(even) { flex-direction: row-reverse; /* для четных записей */ }
2. Grid
.post { display: grid; grid-template-columns: 100px 1fr; /* Примерная ширина изображения и оставшееся пространство для описания */ grid-template-areas: "image description"; /* По умолчанию изображение слева, описание справа */ align-items: center; } .post:nth-child(even) { grid-template-areas: "description image"; /* Для четных записей меняем местами изображение и описание */ }
Естественно классы.blog и .post мы меняем на свои. А еще лучше создать для этого свой шаблон вывода для списка записей.
Всё верно — назначать стили, исходя из порядкового номера записи. Примерно так:
<?php $id = 0; // Создадим переменную с начальным значением 0 ?> <?php foreach($items as $item){ // переберем записи ?> <?php if($id % 2 == 0) { // Если число чётное ?> <div class="content_list_item <?php echo $ctype['name']; ?>_list_item clearfix left_item content_list_item_<?php echo $id; // присвоим ID записи ?>"> ... </div> <?php } else { // Если число нечетное ?> <div class="content_list_item <?php echo $ctype['name']; ?>_list_item clearfix right_item content_list_item_<?php echo $id; // присвоим ID записи ?>"> ... </div> <?php } ?> <?php $id++; } // Увеличим счетчик на 1 ?>
Всё верно — назначать стили, исходя из порядкового номера записи. Примерно так:
<?php $id = 0; // Создадим переменную с начальным значением 0 ?> <?php foreach($items as $item){ // переберем записи ?> <?php if($id % 2 == 0) { // Если число чётное ?> <div class="content_list_item <?php echo $ctype['name']; ?>_list_item clearfix left_item content_list_item_<?php echo $id; // присвоим ID записи ?>"> ... </div> <?php } else { // Если число нечетное ?> <div class="content_list_item <?php echo $ctype['name']; ?>_list_item clearfix right_item content_list_item_<?php echo $id; // присвоим ID записи ?>"> ... </div> <?php } ?> <?php $id++; } // Увеличим счетчик на 1 ?>
Анастасия, спасибо. А можно увидеть готовый файл темплейта списка записей ТК со стилями ?) Заранее спасибо за помощь.
Def,
Def,
Не могу сегодня =) Но Вы можете подсмотреть как это работает в файле default_list_featured.tpl.php — там реализована та логика, которая вам необходима
файл то я открыл, но как его скорректировать, чтобы он обрабатывал так как я запланировал, не очень понимаю)
Друзья, кто может подсказать готовое решение?) Если необходима доп благодарность, готов рассмотреть:)
Что то я вас не понял, зачем вобще трогать шаблон вывода и назначать классы? Достаточно в файле CSS прописать так как я показал без затрагивания других файлов шаблона. CSS сам разберется четная это или нечетная запись.
.blog .post:nth-child(odd) — это для чётных
.blog .post:nth-child(even) — это для не четных
Если прям рабочий из движка по быстрому то (черновые) стили будут выглядеть так
.content_list .content_list_item:nth-child(even) { display: flex; flex-direction: row-reverse; }
Это уже отработает. Поясняю, этот код будет работать для ВСЕХ списков ТК на сайте, поэтому если вам нужно только для определенного ТК, тогда вперед нужно будет добавить его класс, например ТОЛЬКО для статей
.articles_list .content_list_item:nth-child(even) { display: flex; flex-direction: row-reverse; }
где articles это системное имя ТК. Эти четыре строчки сделают то что вы хотели )). Ну можно много чего сделать одними стилями. 90% визуального вывода решается с помощью CSS. Изучайте ))
где articles это системное имя ТК. Эти четыре строчки сделают то что вы хотели )). Ну можно много чего сделать одними стилями. 90% визуального вывода решается с помощью CSS. Изучайте ))
Странно, у меня просто сдвинулся второй элемент вправо, а четвертый так и показывается как и 1 и 3
Друзья, есть ли возможно у кого реализация?)
Реализуется с помощью nth-child и flex
Что именно не получается? Есть ссылка на список?
Есть ссылка на список?
сейчас я использую стандартный файл списка default_item.tpl.php
<h1 class="semi-bold font__size--60 text__60-1024 text__60-sm"> <?php html($item['title']); ?> <?php if ($item['is_private']) { ?> <span class="is_private text-secondary" title="<?php html(LANG_PRIVACY_HINT); ?>"> <?php html_svg_icon('solid', 'lock'); ?> </span> <?php } ?> </h1> <div class="parent_title item_<?php echo $item['parent_type']; ?>_title mt-n2"> <a href="<?php echo rel_to_href($item['parent_url']); ?>"> <?php html_svg_icon('solid', 'user-friends'); ?> <?php html($item['parent_title']); ?> </a> </div> <?php } ?> <?php } ?> <?php if ($this->hasMenu('item-menu')){ ?> <?php $this->menu('item-menu', true, 'nav nav-tabs my-3'); ?> <?php } ?> <div class="content_item <?php echo $ctype['name']; ?>_item clearfix text-break my-3"> <?php if($fields_fieldsets) { ?> <div class="icms-content-fields"> <?php foreach ($fields_fieldsets as $fieldset_id => $fieldset) { ?> <?php $is_fields_group = !empty($ctype['options']['is_show_fields_group']) && $fieldset['title']; ?> <?php if ($is_fields_group) { ?> <div class="fields_group fields_group_<?php echo $ctype['name']; ?>_<?php echo $fieldset_id ?>"> <h3 class="icms-content-fields__group_title"><?php html($fieldset['title']); ?></h3> <?php } ?> <?php foreach ($fieldset['fields'] as $field) { ?> <div class="field ft_<?php echo $field['type']; ?> f_<?php echo $field['name']; ?> <?php echo $field['options']['wrap_type']; ?>_field <?php echo $field['options']['wrap_style']; ?>" <?php if($field['options']['wrap_width']){ ?> style="width: <?php echo $field['options']['wrap_width']; ?>;"<?php } ?>> <?php if ($field['options']['label_in_item'] != 'none') { ?> <div class="field_label title_<?php echo $field['options']['label_in_item']; ?>"> <?php echo string_replace_svg_icons($field['title']).($field['options']['label_in_item']=='left' ? ': ' : ''); ?> </div> <?php } ?> <div class="value"><?php echo $field['html']; ?></div> </div> <?php } ?> <?php } ?> <?php if ($is_fields_group) { ?></div><?php } ?> <?php } ?> </div> <?php } ?> <?php if ($props_fieldsets) { ?> <div class="content_item_props <?php echo $ctype['name']; ?>_item_props table-responsive-sm mt-3"> <table class="table table-hover table-sm"> <?php foreach($props_fieldsets as $fieldset_id => $fieldset){ ?> <?php if ($fieldset['title']){ ?> <thead> <tr class="props_groups props_group_<?php echo $ctype['name']; ?>_<?php echo $fieldset_id ?> table-secondary"> <th class="heading" colspan="2"><?php html($fieldset['title']); ?></th> </tr> </thead> <?php } else { ?> <thead> <tr class="props_groups props_group_<?php echo $ctype['name']; ?>_<?php echo $fieldset_id ?>"> <th class="d-none" colspan="2"></th> </tr> </thead> <?php } ?> <tbody> <?php if ($fieldset['fields']){ ?> <?php foreach($fieldset['fields'] as $prop){ ?> <tr class="prop_wrap prop_<?php echo $prop['type']; ?>"> <td class="title"><?php html($prop['title']); ?></td> <td class="value"> <?php echo $prop['html']; ?> </td> </tr> <?php } ?> <?php } ?> </tbody> <?php } ?> </table> </div> <?php } ?> <?php $hooks_html = cmsEventsManager::hookAll("content_{$ctype['name']}_item_html", $item); if ($hooks_html) { echo html_each($hooks_html); } ?> <div class="tags_bar mt-3"> <?php echo html_tags_bar($item['tags'], 'content-'.$ctype['name'], 'btn btn-outline-secondary btn-sm icms-btn-tag', ''); ?> </div> <?php } ?> <?php if ($ctype['item_append_html']){ ?> <div class="append_html"><?php echo $ctype['item_append_html']; ?></div> <?php } ?> <div class="info_bar"> <?php foreach($item['info_bar'] as $bar){ ?> <?php html_svg_icon('solid', $bar['icon']); ?> <?php } ?> <a class="stretched-link" href="<?php echo $bar['href']; ?>"><?php echo $bar['html']; ?></a> <?php } else { ?> <?php echo $bar['html']; ?> <?php } ?> </div> <?php } ?> </div> <?php } ?> </div>