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

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

От автора: приветствую Вас дорогой друг. В стандартном функционале, к каждому добавляемому материалу, можно привязать изображение, которое будет отображаться до его основного контента. Поэтому в данной статье мы с Вами поговорим о том, как сделать текст в картинке джумла, то есть совместить некое текстовое сообщение с изображением.

Хотел бы отметить, что стандартными средствами CMS — вставить текст на картинку джумла не не получится, но мы всегда сможем написать небольшую по объему информацию, под изображением на страницах списка материалов определенной категории, или странице детального просмотра статьи. Для этого, добавляя изображения для вводной части и всего текста, нужно в поле “Заголовок” указать требуемый текст.

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

В этом случае, при использовании шаблона Beez3, Вы увидите следующий результат.

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

Конечно – это не совсем то, что мы определили в качестве цели данного урока, но как говориться — первый шаг сделан. Теперь у нас есть информация, которую нужно всего лишь привести к нужному виду, а значит необходимо немного отредактировать используемый шаблон.

Поэтому давайте перейдем в каталог активного шаблона, в моем случае это “beez3” и найдем папку html. В данном каталоге определены переопределения макетов как стандартных компонентов и модулей Joomla так и установленных дополнительно. Если мы говорим о материалах, то нас интересует компонент com_content, как раз для его макетов (видов) и нужно создать переопределение. Таким образом переходим в папку com_content в каталоге html.

Если же вышеуказанной папки у Вас нет, то есть в Вашем шаблоне не предусмотрены переопределения для интересующего компонента, то создайте ее самостоятельно (хотя это маловероятно).

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

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

Обратите внимание файл blog_item.php, как раз формирует отдельный материал, а значит откроем его в текстовом редакторе и найдем следующие строки.

<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 изображение вводной части материала. Поэтому для того что бы вставить текст на картинку джумла, давайте заменим вышеуказанный код на следующий:

<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”, который понадобится для будущей стилизации. И под изображением выведем содержимое, которое было указано при добавлении изображения в поле “Заголовок”.

<div class="image_txt"><span><?php echo $images->image_fulltext_caption;?></span></div>

Сохранив изменения, в браузере мы увидим следующий результат:

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

Теперь используя 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 и находим строки:

<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, а значит выполняем замену на следующие строки:

<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-Мастер. С нуля до премиум шаблона.

На этом данная статья завершена. Всего Вам доброго и удачного кодирования!!!

Курс Joomla-Ученик

12 фишек без которых Вы гарантированно не создадите полноценный сайт на Joomla!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree