Joomla 文章的平铺块
Tile blocks for Joomla articles
我想在图片中以块的形式显示一些带有标题和内文的文章。我使用了 Articles - Newsflash 模块并创建了一个名为 blocks.php
的自定义布局
<div class="newsflash-block<?php echo $params->get('moduleclass_sfx'); ?> mod-list">
<?php for ($i = 0, $n = count($list); $i < $n; $i ++) : ?>
<?php $item = $list[$i]; ?>
<div class="tile col-lg-6 col-md-6">
<?php require JModuleHelper::getLayoutPath('mod_articles_news', '_block-item'); ?>
<?php if ($n > 1 && (($i < $n - 1) || $params->get('showLastSeparator'))) : ?>
<span class="article-separator"> </span>
<?php endif; ?>
</div>
<?php endfor; ?>
我还创建了一个名为 _block-item.php 的 child 布局,用于显示文章元素
<div class="block-item">
<a href="<?php echo $item->link; ?>">
<figure class="newsflash-image">
<img src="<?php echo $item->imageSrc; ?>" alt="<?php echo $item->imageAlt; ?>">
<?php if ($params->get('show_introtext', 1)) : ?>
<span class="text"><?php echo $item->introtext; ?></span>
<?php endif; ?>
<span class="title"><?php echo $item->title; ?></span>
</figure>
</a>
问题出在 html-css 方面,因为我无法让标题或文本显示在图像上方,而不是图像下方。我很确定我没有以正确的方式使用这些元素。
我希望我的积木看起来像这样:
而不是这个:
所以文章的介绍图片应该是特定图块的背景,在 div 我应该有介绍文本和标题。
对名为 _block-item.php 的子布局的更改。
<div class="block-item">
<a href="<?php echo $item->link; ?>">
<div class="newsflash-image">
<img src="<?php echo $item->imageSrc; ?>" alt="<?php echo $item->imageAlt; ?>">
<div class="newsflash-data">
<?php if ($params->get('show_introtext', 1)) : ?>
<span class="text"><?php echo $item->introtext; ?></span>
<?php endif; ?>
<?php if ($params->get('item_title')) : ?>
<span class="title"><?php echo $item->title; ?> ></span>
<?php endif; ?>
</div>
</div>
</a>
更改为 css
.block-item .newsflash-image {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.block-item .newsflash-data .text{
padding-left: 10px;
position: absolute;
top: 10px;
left: 0;
right: 0;
z-index: 3;
color: #fff;
font-size: medium;
font-weight: 600;
}
.block-item .newsflash-data .title{
padding-left: 10px;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
z-index: 3;
color: #fff;
font-size: large;
font-weight: 800;
text-transform: uppercase;
}
.newsflash-block .tile {
padding-bottom: 135px;
}
.tile .block-item {
padding: 5px;
}
.newsflash-image img {
max-width:100%;
max-height:100%;
object-fit: contain;
}
唯一丑陋的解决方案是
.newsflash-block .tile {
padding-bottom: 135px;
}
所以方块不会相互堆叠。任何人都有更好的解决方案;
我想在图片中以块的形式显示一些带有标题和内文的文章。我使用了 Articles - Newsflash 模块并创建了一个名为 blocks.php
的自定义布局<div class="newsflash-block<?php echo $params->get('moduleclass_sfx'); ?> mod-list">
<?php for ($i = 0, $n = count($list); $i < $n; $i ++) : ?>
<?php $item = $list[$i]; ?>
<div class="tile col-lg-6 col-md-6">
<?php require JModuleHelper::getLayoutPath('mod_articles_news', '_block-item'); ?>
<?php if ($n > 1 && (($i < $n - 1) || $params->get('showLastSeparator'))) : ?>
<span class="article-separator"> </span>
<?php endif; ?>
</div>
<?php endfor; ?>
我还创建了一个名为 _block-item.php 的 child 布局,用于显示文章元素
<div class="block-item">
<a href="<?php echo $item->link; ?>">
<figure class="newsflash-image">
<img src="<?php echo $item->imageSrc; ?>" alt="<?php echo $item->imageAlt; ?>">
<?php if ($params->get('show_introtext', 1)) : ?>
<span class="text"><?php echo $item->introtext; ?></span>
<?php endif; ?>
<span class="title"><?php echo $item->title; ?></span>
</figure>
</a>
问题出在 html-css 方面,因为我无法让标题或文本显示在图像上方,而不是图像下方。我很确定我没有以正确的方式使用这些元素。
我希望我的积木看起来像这样:
而不是这个:
所以文章的介绍图片应该是特定图块的背景,在 div 我应该有介绍文本和标题。
对名为 _block-item.php 的子布局的更改。
<div class="block-item">
<a href="<?php echo $item->link; ?>">
<div class="newsflash-image">
<img src="<?php echo $item->imageSrc; ?>" alt="<?php echo $item->imageAlt; ?>">
<div class="newsflash-data">
<?php if ($params->get('show_introtext', 1)) : ?>
<span class="text"><?php echo $item->introtext; ?></span>
<?php endif; ?>
<?php if ($params->get('item_title')) : ?>
<span class="title"><?php echo $item->title; ?> ></span>
<?php endif; ?>
</div>
</div>
</a>
更改为 css
.block-item .newsflash-image {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.block-item .newsflash-data .text{
padding-left: 10px;
position: absolute;
top: 10px;
left: 0;
right: 0;
z-index: 3;
color: #fff;
font-size: medium;
font-weight: 600;
}
.block-item .newsflash-data .title{
padding-left: 10px;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
z-index: 3;
color: #fff;
font-size: large;
font-weight: 800;
text-transform: uppercase;
}
.newsflash-block .tile {
padding-bottom: 135px;
}
.tile .block-item {
padding: 5px;
}
.newsflash-image img {
max-width:100%;
max-height:100%;
object-fit: contain;
}
唯一丑陋的解决方案是
.newsflash-block .tile {
padding-bottom: 135px;
}
所以方块不会相互堆叠。任何人都有更好的解决方案;