Хотел бы отметить, что стандартными средствами CMS — вставить текст на картинку джумла не не получится, но мы всегда сможем написать небольшую по объему информацию, под изображением на страницах списка материалов определенной категории, или странице детального просмотра статьи. Для этого, добавляя изображения для вводной части и всего текста, нужно в поле “Заголовок” указать требуемый текст.
В этом случае, при использовании шаблона Beez3, Вы увидите следующий результат.
Конечно – это не совсем то, что мы определили в качестве цели данного урока, но как говориться — первый шаг сделан. Теперь у нас есть информация, которую нужно всего лишь привести к нужному виду, а значит необходимо немного отредактировать используемый шаблон.
Поэтому давайте перейдем в каталог активного шаблона, в моем случае это “beez3” и найдем папку html. В данном каталоге определены переопределения макетов как стандартных компонентов и модулей Joomla так и установленных дополнительно. Если мы говорим о материалах, то нас интересует компонент com_content, как раз для его макетов (видов) и нужно создать переопределение. Таким образом переходим в папку com_content в каталоге html.
Если же вышеуказанной папки у Вас нет, то есть в Вашем шаблоне не предусмотрены переопределения для интересующего компонента, то создайте ее самостоятельно (хотя это маловероятно).
Дальше необходимо переопределить конкретный макет, а именно макет category (макет отображения списка материалов отдельной категории), который располагается в одноименной папке. Если же у Вас нет данной папки, то ее нужно создать, а содержимое скопировать из каталога \tmpl по адресу \components\com_content\views\category. Данный макет состоит из следующего набора файлов.
Обратите внимание файл blog_item.php, как раз формирует отдельный материал, а значит откроем его в текстовом редакторе и найдем следующие строки.
|
1
2
3
4
5
6
7
|
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' . htmlspecialchars($images->image_intro_caption, ENT_COMPAT, 'UTF-8') . '"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro, ENT_COMPAT, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>"/>
</div>
|
Как Вы видите в блоке с классом “img-intro” отображается в шаблоне beez3 изображение вводной части материала. Поэтому для того что бы вставить текст на картинку джумла, давайте заменим вышеуказанный код на следующий:
|
1
2
3
4
5
6
7
8
|
<div class="image img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img src="<?php echo htmlspecialchars($images->image_fulltext, ENT_COMPAT, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($images->image_fulltext_alt, ENT_COMPAT, 'UTF-8'); ?>"/>
<?php if ($images->image_fulltext_caption): ?>
<div class="image_txt"><span><?php echo $images->image_fulltext_caption;?></span></div>
<?php endif; ?>
</div>
|
То есть, добавляем к блоку div класс “image”, который понадобится для будущей стилизации. И под изображением выведем содержимое, которое было указано при добавлении изображения в поле “Заголовок”.
|
1
|
<div class="image_txt"><span><?php echo $images->image_fulltext_caption;?></span></div>
|
Сохранив изменения, в браузере мы увидим следующий результат:
Теперь используя CSS правила, давайте стилизируем отображаемую строку. Для этого открываем файл стилей personal.css из каталога css шаблона (если Вы используете шаблон отличный от beez3, имя папки со стилями и сам файл могут отличаться) и добавим следующие правила:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.image {
position : relative;
width : 100%;
}
.image_txt {
position : absolute;
top : 200px;
left : 0;
width : 100%;
}
.image_txt span {
color : white;
font : bold 24px/45px Helvetica, Sans-Serif;
letter-spacing : -1px;
background : rgb(0, 0, 0);
background : rgba(0, 0, 0, 0.7);
padding : 10px;
}
|
После сохранения в браузере мы увидим следующий результат.
Как Вы видите, текст успешно отображается на изображении и теперь необходимо проделать аналогичные действия с макетом, который формирует страницу полного текста. Для этого в каталоге com_content, находим макет article.
Далее открываем в текстовом редакторе макет default.php и находим строки:
|
1
2
3
4
5
6
7
|
<div class="img-fulltext-<?php echo htmlspecialchars($imgfloat, ENT_COMPAT, 'UTF-8'); ?>">
<img
<?php if ($images->image_fulltext_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_fulltext_caption, ENT_COMPAT, 'UTF-8') .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_fulltext, ENT_COMPAT, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($images->image_fulltext_alt, ENT_COMPAT, 'UTF-8'); ?>"/>
</div>
|
Обратите внимание, что код практически идентичен макету blog_item.php, а значит выполняем замену на следующие строки:
|
1
2
3
4
5
6
7
8
|
<div class="image img-fulltext-<?php echo htmlspecialchars($imgfloat, ENT_COMPAT, 'UTF-8'); ?>">
<img src="<?php echo htmlspecialchars($images->image_fulltext, ENT_COMPAT, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($images->image_fulltext_alt, ENT_COMPAT, 'UTF-8'); ?>"/>
<?php if ($images->image_fulltext_caption): ?>
<div class="image_txt"><span><?php echo $images->image_fulltext_caption;?></span></div>
<?php endif; ?>
</div>
|
Таким образом, теперь Вы знаете как на картинке написать текст joomla. При этом если Вы желаете подробно изучить структуру и принцип работы шаблонов CMS Joomla и хотите научиться создавать собственные – Вам будет полезен курс Joomla-Мастер. С нуля до премиум шаблона.