Плитка для изделий Joomla

Question

Я хочу отображать некоторые статьи в виде блоков с заголовком и интротекстом на картинке. Я использовал модуль Articles - Newsfla sh и создаю собственный макет, называемый блоками. 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 для отображения элементов статьи

<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 стороне, потому что я не могу получить заголовок или текст поверх изображения, а не ниже. Я почти уверен, что неправильно использую элементы.

Я хочу, чтобы мои блоки выглядели так:

вместо этого:

Таким образом, представление статьи должно быть фоном для конкретной плитки c, а в 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;

}

, поэтому плитки блоков не накладываются друг на друга. У любого есть лучшее решение;