Как вставить картинку на сайт, а потом ещё и создать мини эскиз картинки этой?

Joomla!

Сделали сайт, создали и разместили статьи, но чувствуете, что чего-то не хватает? Может стоить разместить картинки на страницу своего сайта? Конечно, стоит! Ведь с картинками статьи преобладают больше смысла, они способны не только украсить статью, но и привлечь к ней дополнительное внимание, могут они принести и другую пользу.

Но сейчас не об этом. Поговорим в этой статье о том, как вставить картинку на страницу сайта, созданного с помощью joomla. Так же я расскажу вам об одном интересном плагине, который позволяет улучшить кое-какие моменты при работе с картинками.

Ну приступим. Создали вы сайт с помощью joomla, создали разделы, категории, наполнили их материалами, создали меню. Каркас готов, теперь пришло время добавить красоты и жизни своему сайту. Начать стоит с картинок для статей. О том, как и где подбирать картинки, я расскажу в другой раз. Картинка предположим уже есть, и есть статья куда мы её планируем разместить. Как это сделать в joomla? Да проще простого!

Заходим в админку, находим в меню Материалы и выбираем Менеджер материалов. Находим нашу статью, ожидающую появления иллюстрации. Открываем её. Устанавливаем курсор на место где хотим разместить нашу картинку на странице. И жмем кнопку Изображение, что внизу нашего редактора. Появляется следующее окно:

картинки на страницу

Если картинку мы уже закачали на сайт, ищем её, выделяем и жмем Вставить. Если картинка лежит у вас на компе, жмем кнопку Обзор, ищем её  себя на компе, выделяем Открыть и Загрузить. Всё она у вас появляется на сайте, выделяем её и вставляем.

Да, кстати, в окне загрузки картинки есть поля Детали картинки и Заголовок, вспоминаем HTML. Поле Детали картинки это атрибут alt, а Заголовок – атрибут title, тега img. Если оно вам нужно, прописываем их (а оно нужно, для seo в т.ч.). Также имеется возможность указать Выравнивание картинки, атрибут align.

Ну в общем то всё. Как вставить картинку на страницу сайта, мы теперь знаем. Отлично. Но есть одна проблема. Предположим у вас категория, в которой размещается статья с картинкой, выводится как Блог категорий. Это когда выводится весь или часть текста статей этой категории. И представьте такую картину – вы добавили в начало статьи большую картинку, переходя в категорию, мы так же видим эту картинку. Если в рамках статьи её размеры и можно было считать допустимыми, то в категории большие картинки выглядят очень нелепо. А тем более если таких статей будет несколько, а то и все! Как этого избежать? Как вариант либо в ту часть статьи, что выводится в анонс, вставлять картинку поменьше, либо вообще исключить картинки из анонса, чтобы не уродовать категорию. Решением проблемы это назвать сложно, больше это похоже на уход от неё. Хотя может кому-то и этот выход сгодится.

Но как быть тем, кто все же хочет выводить картинку в анонсе, и не хочет уменьшать её размеры в статье для этого? Выход есть – установить плагин SmartResizer. Плагин этот создает 2 копии картинки, одну он выводит в статье, а другую в анонсе статьи – когда материал выводится в блог раздела или категории. О том, как им пользоваться и поговорим ниже.

Качаем актуальную версию этого плагина, устанавливаем его себе на сайт. Затем идем в Менеджер плагинов и включаем плагин SmartResizer. Можно сразу зайти в настройки этого плагина. Там всё понятно и так, все пункты имеют пояснения на русском. Задаем параметры эскиза для блогов и для самих статей.

как вставить картинку на страницу

Можно поэкспериментировать с размером, попробуйте 155-85 и 200-100, например.
Дальше переходим на Расширенные параметры.

Там в подписи к каждому пункту всё популярно расписано. Например, вы выбрали Да в графе Создавать эскизы для всех картинок. Но если есть картинка к которой не нужно применять всё это, пишем в html коде <img … class="nosmartresize"… />
Если выберите Нет, то для того что бы к картинке применить плагин, пишем там же  <img … class="smartresize" … />.

Игнорировать индивидуальный размер картинки, лучше не стоит – вы сами легко можете его привести к нужному. А вот возможность Создавать ссылку на статью в блогах – пригодится. Но тогда стоит у картинки прописать в атрибуты alt и title описание с ключевиками статьи.  

Всё, Сохраняем и выходим. Идем в статью, вставляем картинку, как я выше описывал. Если включили для всех картинок этот плагин. Ничего больше делать не нужно. Если не включили, открываем статью в HTML и добавляем к картинке <img … class="smartresize" … />.

Теперь картинки на странице вашего сайта будут отображаться в надлежащем виде. Где нужно будут большие, а где нет – маленькие. 

 

Комментарии  

 
#1 Михаил 07.08.2012 17:14
Кулл, очень хорошая статья. как добавить alt и title без всяких там скриптов))
Цитировать