Возможно ли шаблон списка default_list.tpl.php вывести в шахматном порядке?

#1 2 февраля 2024 в 00:57

Как можно вывести в шахматном порядке записи в списке?

Т.е

Картинка — Описание

Описание — Картинка

Картинка — Описание

Изображение

Возможно?

#2 2 февраля 2024 в 05:56

Легко, стилями CSS. Как пример. Можно либо через Flexbox либо через Grid. Примеры ниже. Хотя для этого есть Поисковики. Лично я предпочитаю Гриды нежели флексы, он гибче гораздо, но Инстант на флексах если что.

1. Flexbox 

  1. .blog .post {
  2. display: flex;
  3. align-items: center;
  4. }
  5.  
  6. .blog .post:nth-child(odd) {
  7. flex-direction: row; /* для нечетных записей */
  8. }
  9.  
  10. .blog .post:nth-child(even) {
  11. flex-direction: row-reverse; /* для четных записей */
  12. }

2. Grid

  1. .post {
  2. display: grid;
  3. grid-template-columns: 100px 1fr; /* Примерная ширина изображения и оставшееся пространство для описания */
  4. grid-template-areas: "image description"; /* По умолчанию изображение слева, описание справа */
  5. align-items: center;
  6. }
  7.  
  8. .post:nth-child(even) {
  9. grid-template-areas: "description image"; /* Для четных записей меняем местами изображение и описание */
  10. }
Добавлено спустя 13 минут

Естественно классы.blog и .post мы меняем на свои. А еще лучше создать для этого свой шаблон вывода для списка записей.

#3 2 февраля 2024 в 09:22

Всё верно — назначать стили, исходя из порядкового номера записи. Примерно так:

  1. <?php $id = 0; // Создадим переменную с начальным значением 0 ?>
  2. <?php foreach($items as $item){ // переберем записи ?>
  3.  
  4. <?php if($id % 2 == 0) { // Если число чётное ?>
  5. <div class="content_list_item <?php echo $ctype['name']; ?>_list_item clearfix left_item content_list_item_<?php echo $id; // присвоим ID записи ?>">
  6. ...
  7. </div>
  8. <?php } else { // Если число нечетное ?>
  9. <div class="content_list_item <?php echo $ctype['name']; ?>_list_item clearfix right_item content_list_item_<?php echo $id; // присвоим ID записи ?>">
  10. ...
  11. </div>
  12. <?php } ?>
  13.  
  14. <?php $id++; } // Увеличим счетчик на 1 ?>
#4 2 февраля 2024 в 09:43

Всё верно — назначать стили, исходя из порядкового номера записи. Примерно так:

  1. <?php $id = 0; // Создадим переменную с начальным значением 0 ?>
  2. <?php foreach($items as $item){ // переберем записи ?>
  3.  
  4. <?php if($id % 2 == 0) { // Если число чётное ?>
  5. <div class="content_list_item <?php echo $ctype['name']; ?>_list_item clearfix left_item content_list_item_<?php echo $id; // присвоим ID записи ?>">
  6. ...
  7. </div>
  8. <?php } else { // Если число нечетное ?>
  9. <div class="content_list_item <?php echo $ctype['name']; ?>_list_item clearfix right_item content_list_item_<?php echo $id; // присвоим ID записи ?>">
  10. ...
  11. </div>
  12. <?php } ?>
  13.  
  14. <?php $id++; } // Увеличим счетчик на 1 ?>
Anastasia

Анастасия, спасибо. А можно увидеть готовый файл темплейта списка записей ТК со стилями ?) Заранее спасибо за помощь.

#5 2 февраля 2024 в 10:03

 Def,

Не могу сегодня =) Но Вы можете подсмотреть как это работает в файле default_list_featured.tpl.php — там реализована та логика, которая вам необходима
#6 2 февраля 2024 в 23:07

 Def,

Не могу сегодня =) Но Вы можете подсмотреть как это работает в файле default_list_featured.tpl.php — там реализована та логика, которая вам необходима
Anastasia

файл то я открыл, но как его скорректировать, чтобы он обрабатывал так как я запланировал, не очень понимаю)

Добавлено спустя 8 часов

Друзья, кто может подсказать готовое решение?) Если необходима доп благодарность, готов рассмотреть:)

#7 3 февраля 2024 в 02:56

Что то я вас не понял, зачем вобще трогать шаблон вывода и назначать классы? Достаточно в файле CSS прописать так как я показал без затрагивания других файлов шаблона. CSS сам разберется четная это или нечетная запись.

.blog .post:nth-child(odd) — это для чётных
.blog .post:nth-child(even) — это для не четных

Если прям рабочий из движка по быстрому то (черновые) стили будут выглядеть так 

  1. .content_list .content_list_item:nth-child(even) {
  2. display: flex;
  3. flex-direction: row-reverse;
  4. }

Это уже отработает. Поясняю, этот код будет работать для ВСЕХ списков ТК на сайте, поэтому если вам нужно только для определенного ТК, тогда вперед нужно будет добавить его класс, например ТОЛЬКО для статей

  1. .articles_list .content_list_item:nth-child(even) {
  2. display: flex;
  3. flex-direction: row-reverse;
  4. }

где articles это системное имя ТК. Эти четыре строчки сделают то что вы хотели )). Ну можно много чего сделать одними стилями. 90% визуального вывода решается с помощью CSS. Изучайте ))

#8 3 февраля 2024 в 16:59

где articles это системное имя ТК. Эти четыре строчки сделают то что вы хотели )). Ну можно много чего сделать одними стилями. 90% визуального вывода решается с помощью CSS. Изучайте ))

Clear

Странно, у меня просто сдвинулся второй элемент вправо, а четвертый так и показывается как и 1 и 3

Изображение

#9 10 февраля 2024 в 14:59

Друзья, есть ли возможно у кого реализация?)

#10 10 февраля 2024 в 15:12

Реализуется с помощью nth-child и flex

Что именно не получается? Есть ссылка на список?

#11 10 февраля 2024 в 15:14

Есть ссылка на список?

My-InstantCMS.Ru

сейчас я использую стандартный файл списка default_item.tpl.php

  1. <?php if (!empty($fields['title']['is_in_item']) && in_array('page', $fields['title']['options']['is_in_item_pos'])){ ?>
  2. <h1 class="semi-bold font__size--60 text__60-1024 text__60-sm">
  3. <?php html($item['title']); ?>
  4. <?php if ($item['is_private']) { ?>
  5. <span class="is_private text-secondary" title="<?php html(LANG_PRIVACY_HINT); ?>">
  6. <?php html_svg_icon('solid', 'lock'); ?>
  7. </span>
  8. <?php } ?>
  9. </h1>
  10. <?php if ($item['parent_id'] && !empty($ctype['is_in_groups'])){ ?>
  11. <div class="parent_title item_<?php echo $item['parent_type']; ?>_title mt-n2">
  12. <a href="<?php echo rel_to_href($item['parent_url']); ?>">
  13. <?php html_svg_icon('solid', 'user-friends'); ?>
  14. <?php html($item['parent_title']); ?>
  15. </a>
  16. </div>
  17. <?php } ?>
  18. <?php } ?>
  19.  
  20. <?php if ($this->hasMenu('item-menu')){ ?>
  21. <?php $this->menu('item-menu', true, 'nav nav-tabs my-3'); ?>
  22. <?php } ?>
  23.  
  24. <div class="content_item <?php echo $ctype['name']; ?>_item clearfix text-break my-3">
  25. <?php if($fields_fieldsets) { ?>
  26. <div class="icms-content-fields">
  27. <?php foreach ($fields_fieldsets as $fieldset_id => $fieldset) { ?>
  28.  
  29. <?php $is_fields_group = !empty($ctype['options']['is_show_fields_group']) && $fieldset['title']; ?>
  30.  
  31. <?php if ($is_fields_group) { ?>
  32. <div class="fields_group fields_group_<?php echo $ctype['name']; ?>_<?php echo $fieldset_id ?>">
  33. <h3 class="icms-content-fields__group_title"><?php html($fieldset['title']); ?></h3>
  34. <?php } ?>
  35.  
  36. <?php if (!empty($fieldset['fields'])) { ?>
  37. <?php foreach ($fieldset['fields'] as $field) { ?>
  38.  
  39. <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 } ?>>
  40. <?php if ($field['options']['label_in_item'] != 'none') { ?>
  41. <div class="field_label title_<?php echo $field['options']['label_in_item']; ?>">
  42. <?php echo string_replace_svg_icons($field['title']).($field['options']['label_in_item']=='left' ? ': ' : ''); ?>
  43. </div>
  44. <?php } ?>
  45. <div class="value"><?php echo $field['html']; ?></div>
  46. </div>
  47.  
  48. <?php } ?>
  49. <?php } ?>
  50.  
  51. <?php if ($is_fields_group) { ?></div><?php } ?>
  52.  
  53. <?php } ?>
  54. </div>
  55. <?php } ?>
  56.  
  57. <?php if ($props_fieldsets) { ?>
  58. <div class="content_item_props <?php echo $ctype['name']; ?>_item_props table-responsive-sm mt-3">
  59. <table class="table table-hover table-sm">
  60. <?php foreach($props_fieldsets as $fieldset_id => $fieldset){ ?>
  61. <?php if ($fieldset['title']){ ?>
  62. <thead>
  63. <tr class="props_groups props_group_<?php echo $ctype['name']; ?>_<?php echo $fieldset_id ?> table-secondary">
  64. <th class="heading" colspan="2"><?php html($fieldset['title']); ?></th>
  65. </tr>
  66. </thead>
  67. <?php } else { ?>
  68. <thead>
  69. <tr class="props_groups props_group_<?php echo $ctype['name']; ?>_<?php echo $fieldset_id ?>">
  70. <th class="d-none" colspan="2"></th>
  71. </tr>
  72. </thead>
  73. <?php } ?>
  74. <tbody>
  75. <?php if ($fieldset['fields']){ ?>
  76. <?php foreach($fieldset['fields'] as $prop){ ?>
  77. <tr class="prop_wrap prop_<?php echo $prop['type']; ?>">
  78. <td class="title"><?php html($prop['title']); ?></td>
  79. <td class="value">
  80. <?php echo $prop['html']; ?>
  81. </td>
  82. </tr>
  83. <?php } ?>
  84. <?php } ?>
  85. </tbody>
  86. <?php } ?>
  87. </table>
  88. </div>
  89. <?php } ?>
  90.  
  91. <?php
  92. $hooks_html = cmsEventsManager::hookAll("content_{$ctype['name']}_item_html", $item);
  93. if ($hooks_html) { echo html_each($hooks_html); }
  94. ?>
  95.  
  96. <?php if (!empty($item['show_tags'])){ ?>
  97. <div class="tags_bar mt-3">
  98. <?php echo html_tags_bar($item['tags'], 'content-'.$ctype['name'], 'btn btn-outline-secondary btn-sm icms-btn-tag', ''); ?>
  99. </div>
  100. <?php } ?>
  101.  
  102. <?php if ($ctype['item_append_html']){ ?>
  103. <div class="append_html"><?php echo $ctype['item_append_html']; ?></div>
  104. <?php } ?>
  105.  
  106. <?php if (!empty($item['info_bar'])){ ?>
  107. <div class="info_bar">
  108. <?php foreach($item['info_bar'] as $bar){ ?>
  109. <div class="bar_item <?php echo !empty($bar['css']) ? $bar['css'] : ''; ?>" title="<?php html(!empty($bar['title']) ? $bar['title'] : ''); ?>">
  110. <?php if (!empty($bar['icon'])){ ?>
  111. <?php html_svg_icon('solid', $bar['icon']); ?>
  112. <?php } ?>
  113. <?php if (!empty($bar['href'])){ ?>
  114. <a class="stretched-link" href="<?php echo $bar['href']; ?>"><?php echo $bar['html']; ?></a>
  115. <?php } else { ?>
  116. <?php echo $bar['html']; ?>
  117. <?php } ?>
  118. </div>
  119. <?php } ?>
  120. </div>
  121. <?php } ?>
  122.  
  123. </div>
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.