Зробити текст у зображенні на джумла

44

Від автора: вітаю Вас, дорогий друже. У стандартному функціоналі, до кожного потрібно додати матеріалу, можна прив’язати зображення, яке буде відображатися до його основного вмісту. Тому в даній статті ми з Вами поговоримо про те, як зробити текст у картинці джумла, тобто поєднати якесь текстове повідомлення з зображенням.

Хотів би зазначити, що стандартними засобами CMS — вставити текст на картинку джумла не вийде, але ми завжди зможемо написати невелику за обсягом інформацію, під зображенням на сторінках списку матеріалів певної категорії, або сторінці детального перегляду статті. Для цього, додаючи зображення для вступної частини і всього тексту, потрібно в полі «Тема» вказати необхідний текст.

Сделать текст в картинке на джумла

У цьому випадку, при використанні шаблону Beez3, Ви побачите наступний результат.

Сделать текст в картинке на джумла

Звичайно – це не зовсім те, що ми визначили в якості мети даного уроку, але як говориться — перший крок зроблено. Тепер у нас є інформація, яку потрібно всього лише привести до потрібного вигляду, а значить необхідно трохи відредагувати використовується шаблон.

Тому давайте перейдемо в каталог активного шаблону, в моєму випадку це «beez3» і знайдемо папку html. У даному каталозі визначені перевизначення макетів як стандартних компонентів і модулів Joomla так і встановлених додатково. Якщо ми говоримо про матеріали, то нас цікавить компонент com_content, як раз для його макетів (видів) і потрібно створити перевизначення. Таким чином переходимо в папку com_content в каталозі html.

Якщо ж вищевказаної папки у Вас немає, тобто у Вашому шаблоні не передбачені перевизначення для потрібного компонента, то створіть її самостійно (хоча це малоймовірно).

Далі необхідно перевизначити конкретний макет, а саме макет category (макет відображення списку матеріалів окремої категорії), який розташований в однойменній папці. Якщо ж у Вас немає цієї папки, то її треба створити, а скопіювати вміст з теки \tmpl за адресою \components\com_content\views\category. Макет складається з наступного набору файлів.

Сделать текст в картинке на джумла

Зверніть увагу файл blog_item.php якраз формує окремий матеріал, а значить відкриємо його у текстовому редакторі і знайдемо наступні рядки.

Зробити текст у зображенні на джумла
src=»http://savelink.org.ua/images/image_intro, ENT_COMPAT, ‘UTF-8’); ?>» alt=»image_intro_alt, ENT_COMPAT, ‘UTF-8’); ?>»/>

Як Ви бачите в блоці з класом «img-intro» відображається в шаблоні beez3 зображення вступної частини матеріалу. Тому для того що б вставити текст на картинку джумла, давайте замінимо вищевказаний код на наступний:

image_fulltext_alt, ENT_COMPAT, 'UTF-8'); ?>
image_fulltext_caption): ?>

image_fulltext_caption;?>

Тобто, додаємо до блоку div клас «image», який знадобиться для майбутньої стилізації. І під зображенням виведемо вміст, який було вказано при додаванні зображення в полі «Заголовок».

image_fulltext_caption;?>

Зберігши зміни, в браузері ми побачимо наступний результат:

Сделать текст в картинке на джумла

Тепер використовуючи CSS правила, давайте стилизируем відображається рядок. Для цього відкриваємо файл стилів personal.css з каталогу css шаблону (якщо Ви використовуєте шаблон відмінний від beez3, ім’я папки зі стилями і сам файл можуть відрізнятися) і додамо наступні правила:

.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 і знаходимо рядки:

Зробити текст у зображенні на джумла
src=»http://savelink.org.ua/images/image_fulltext,-20ENT_COMPAT,-20’UTF-8′);-20—amp;gt;.jpg» alt=»image_fulltext_alt, ENT_COMPAT, ‘UTF-8’); ?>»/>

Зверніть увагу, що код практично ідентичний макету blog_item.php, а значить виконуємо заміну на наступні рядки:

image_fulltext_alt, ENT_COMPAT, 'UTF-8'); ?>
image_fulltext_caption): ?>

image_fulltext_caption;?>

Таким чином, тепер Ви знаєте як на картинці написати текст joomla. При цьому якщо Ви бажаєте детально вивчити структуру і принцип роботи шаблонів для CMS Joomla і хочете навчитися створювати власні – Вам буде корисний курс Joomla-Майстер. З нуля до преміум шаблону.

На цьому дана стаття завершена. Всього Вам доброго і вдалого кодування!!!