Всем привет! Как сделать, чтобы контент был на оном уровне, чтобы заголовок, допустим на это не влиял? Смотрите на скрине. Если заголовок длинный, то картинка ниже получается, а если короткий, то выше. Может есть способ уменьшить заголовок, чтобы он вписывался, так сказать в карточку? И еще такой вопрос, можно ли сделать так, чтобы каждая запись была, как бы сказать, на карточке? Чтобы были четкие границы (как на ВБ) и чтобы все вписывалось в эти границы и эти карточки были все на одном уровне.
Подозреваю, что у вас нет знаний CSS, а по другому никак. Ищите исполнителя либо разбирайтесь со стилями.
Подозреваю, что у вас нет знаний CSS
К сожалению, нет
Без базовых знаний CSS и никак. А в вашем случаем можно было вообще сделать вывод для приведенного контента вывод изображения на которое накладывается Title
Всем привет! Как сделать, чтобы контент был на оном уровне, чтобы заголовок, допустим на это не влиял? Смотрите на скрине.
фиксированную высоту для заголовка нужно сделать стилями
фиксированную высоту для заголовка нужно сделать стилями
Еще бы знать как это сделать
фиксированную высоту для заголовка нужно сделать стилями TOPg Еще бы знать как это сделать
ссылку дайте в лс
Кажется нашел решение Listing. Управление списками и записями типов контента
Но есть проблема. Создаю шаблон для списка контента, применяю его к этому ТК и все норм. К другому ТК он не применяется. Создаю новый шаблон для другого ТК, но так как поля у меня одинаковые, то получается, что я создаю такой же шаблон и если его применить, то тут начинается нечто. В первом списке ТК и во втором, можно сказать, что бесконечные одни и те же записи. То есть список начинает идти по кругу. Как это одолеть?
Без базовых знаний CSS и никак
Мне вроде бы помогли с css, но куда их прописать? Тема modern
Мне вроде бы помогли с css, но куда их прописать? Тема modern
Разобрался)))
Кому интересно, меняем содержимое файла default_list_tiles.tpl.php на код:
<?php
/**
* Template Name: LANG_CP_LISTVIEW_STYLE_TILES
* Template Type: content
* Template Options: {«cols»: «4»}
*/
// Встраиваем CSS и JS один раз на странице
static $icms_grid_css_injected = false;
if (!$icms_grid_css_injected) {
$icms_grid_css_injected = true;
echo '<style>';
echo '
.icms-tiles-template .icms-grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:16px 0}
.icms-tiles-template .icms-grid-container .icms-grid-card{background:#fff;border:1px solid #e9ecef;border-radius:8px;box-shadow:0 2px 8px rgba(100,52,245,0.15);transition:all .2s ease;min-height:320px;display:flex;cursor:pointer}
.icms-tiles-template .icms-grid-card:hover{box-shadow:0 6px 16px rgba(100,52,245,0.25);border-color:#6434f5}
.icms-tiles-template .icms-content-fields{display:flex;flex-direction:column;padding:12px;height:100%!important}
.icms-tiles-template .field.f_title{flex-shrink:0;margin-bottom:12px}
.icms-tiles-template .field.f_title h3{font-size:1rem;font-weight:600;line-height:1.35;color:#212529;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:2.7em;margin:0}
.icms-tiles-template .field.f_title h3 a{color:inherit;text-decoration:none}
.icms-tiles-template .field:not(.f_title){flex-grow:1;margin-bottom:10px;overflow:hidden}
.icms-tiles-template .field .title_left,
.icms-tiles-template .field .title_top{font-weight:500;margin-bottom:3px;font-size:.85rem;color:#6c757d}
.icms-tiles-template .field .value{color:#495057;line-height:1.4;font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Центрирование изображений */
.icms-tiles-template .field.f_photo img,
.icms-tiles-template .field.f_image img,
.icms-tiles-template .field.f_cover img,
.icms-tiles-template .field.f_gallery img{display:block;margin:0 auto 8px auto;max-width:100%;height:auto;border-radius:4px}
.icms-tiles-template .tags_bar,
.icms-tiles-template .info_bar{flex-shrink:0;margin-top:auto;padding-top:12px;border-top:1px solid #f5f5f5;font-size:.75rem;color:#6c757d}
.icms-tiles-template .icms-btn-tag{font-size:.7rem!important;padding:2px 6px!important}
/* Адаптивность */
@media (max-width:575px){
.icms-tiles-template .icms-grid-container{grid-template-columns:1fr}
}
@media (min-width:576px) and (max-width:1199px){
.icms-tiles-template .icms-grid-container{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1200px){
.icms-tiles-template .icms-grid-container{grid-template-columns:repeat(4,1fr)}
}
';
echo '</style>';
// JavaScript для кликабельных карточек
echo '<script>';
echo '
document.addEventListener(«DOMContentLoaded», function() {
// Добавляем обработчик для всех карточек с data-url
document.querySelectorAll(".icms-grid-card[data-url]").forEach(function(card) {
card.addEventListener(«click», function(e) {
// Проверяем, что клик не по ссылке или кнопке
if (!e.target.closest(«a») && !e.target.closest(".dropdown") && !e.target.closest(«button»)) {
window.location.href = this.getAttribute(«data-url»);
}
});
});
});
';
echo '</script>';
}
?>
<?php
if($ctype['options']['list_show_filter']) {
$this->renderAsset('ui/filter-panel', [
'css_prefix' => $ctype['name'],
'page_url' => $page_url,
'fields' => $fields,
'props_fields' => $props_fields,
'props' => $props,
'filters' => $filters,
'ext_hidden_params' => $ext_hidden_params,
'is_expanded' => $ctype['options']['list_expand_filter']
]);
}
?>
<?php if (!$items){ ?>
<p class=«alert alert-info mt-3 alert-list-empty»>
<?php if(!empty($ctype['labels']['many'])){ ?>
<?php echo sprintf(LANG_TARGET_LIST_EMPTY, $ctype['labels']['many']); ?>
<?php } else { ?>
<?php echo LANG_LIST_EMPTY; ?>
<?php } ?>
</p>
<?php return; } ?>
<!-- Обёртка с уникальным классом -->
<div class=«icms-tiles-template»>
<div class=«content_list tiled <?php echo $ctype['name']; ?>_list icms-grid-container»>
<?php foreach($items as $item){ ?>
<?php
// Определяем URL для карточки
$item_url = (!empty($item['is_private_item']) || !$ctype['options']['item_on'])? '': href_to($ctype['name'], $item['slug'].'.html');
?>
<!-- Карточка с data-url атрибутом -->
<div class=«tile <?php echo $ctype['name']; ?>_list_item icms-grid-card<?php echo $item_url? ' cursor-pointer': ''; ?>»<?php echo $item_url? ' data-url="'.htmlspecialchars($item_url).'"': ''; ?>>
<div class=«icms-content-fields d-flex flex-column h-100»>
<?php foreach($item['fields'] as $field){ ?>
<div class=«field ft_<?php echo $field['type']; ?> f_<?php echo $field['name']; ?> <?php html($field['options']['wrap_style'].' '.$field['options']['wrap_style_list']); ?>»>
<?php if ($field['label_pos'] !== 'none'){ ?>
<div class=«title_<?php echo $field['label_pos']; ?>»>
<?php echo string_replace_svg_icons($field['title']). ($field['label_pos']==='left'? ': ': ''); ?>
</div>
<?php } ?>
<?php if ($field['name'] === 'title' && $ctype['options']['item_on']){ ?>
<h3 class=«h5 m-0»>
<?php if (!empty($this->menus['list_actions_menu'])){ ?>
<div class=«dropdown float-end»>
<button class=«btn p-0» type=«button» data-toggle=«dropdown»>
<?php html_svg_icon('solid', 'ellipsis-vertical', 12); ?>
</button>
<ul class=«dropdown-menu»>
<?php foreach($this->menus['list_actions_menu'] as $menu){ ?>
<li>
<a class=«dropdown-item <?php echo isset($menu['options']['class'])? $menu['options']['class']: ''; ?>» href="<?php echo string_replace_keys_values($menu['url'], $item); ?>" title="<?php html($menu['title']); ?>">
<?php echo $menu['title']; ?>
</a>
</li>
<?php } ?>
</ul>
</div>
<?php } ?>
<?php if ($item['parent_id']){ ?>
<a class=«parent_title small text-muted» href="<?php echo rel_to_href($item['parent_url']); ?>"><?php html($item['parent_title']); ?></a>
→
<?php } ?>
<?php if (!empty($item['is_private_item'])) { ?>
<?php html($item[$field['name']]); ?>
<span class=«text-muted ms-1» title="<?php html($item['private_item_hint']); ?>">
<?php html_svg_icon('solid', 'lock', 10); ?>
</span>
<?php } else { ?>
<a href="<?php echo $item_url; ?>">
<?php html($item[$field['name']]); ?>
</a>
<?php if ($item['is_private']) { ?>
<span class=«text-muted ms-1» title="<?php echo LANG_PRIVACY_HINT; ?>">
<?php html_svg_icon('solid', 'lock', 10); ?>
</span>
<?php } ?>
<?php } ?>
</h3>
<?php } else { ?>
<div class=«value»>
<?php echo $field['html']; ?>
</div>
<?php } ?>
</div>
<?php } ?>
<?php if (!empty($item['show_tags'])){ ?>
<div class=«tags_bar»>
<?php echo html_tags_bar($item['tags'], 'content-'.$ctype['name'], 'btn btn-xs btn-outline-secondary icms-btn-tag px-2 py-1', ''); ?>
</div>
<?php } ?>
<?php if (!empty($item['info_bar'])){ ?>
<div class=«info_bar p-0 bg-transparent border-0»>
<?php foreach($item['info_bar'] as $bar){ ?>
<div class=«bar_item <?php echo !empty($bar['css'])? $bar['css']: ''; ?>» title="<?php html(!empty($bar['title'])? $bar['title']: ''); ?>">
<?php if (!empty($bar['icon'])){ ?>
<?php html_svg_icon('solid', $bar['icon'], 10); ?>
<?php } ?>
<?php if (!empty($bar['href'])){ ?>
<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>
</div>
<?php } ?>
</div>
</div>
<?php echo html_pagebar($page, $perpage, $total, $page_url, $filter_query); ?>
Выбираем шаблон списка «Плитка (default_list_tiles)» и получается вот так
Карточки полностью кликабельные, при наведении курсора — выделяются