Joomla 文章的平铺块

Question

我想在图片中以块的形式显示一些带有标题和内文的文章。我使用了 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">&#160;</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 我应该有介绍文本和标题。

Answer 1

对名为 _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;

}

所以方块不会相互堆叠。任何人都有更好的解决方案；

Joomla 文章的平铺块

Tile blocks for Joomla articles

html

css

joomla