Многие пользователи сталкиваются с проблемой, как автоматически создавать изображения стандартного размера в Joomla. Плагин SmartResizer является отличным решением этой задачи.
SmartResizer не только изменяет изображения в статьях, но также может создавать миниатюры для различных макетов, например, таких как блоги.
Пример для этого урока
В приведенном ниже примере я создал макет блога.
Оригинальные фотографии здесь между 300px и 800px в ширину. Мы используем стандартный макет для блога. Как видите, изображения перекрываются. Это непорядок.
Мы используем плагин SmartResizer и покажем вам шаг за шагом, как улучшить макет с автоматическим созданием миниатюр.
Шаг 1: Установка SmartResizer
- Скачайте плагин с JED.
- Откройте админку Joomla и перейдите в меню Расширения > Менеджер расширений.
- Загрузите архив, чтобы установить плагин.
- Перейдите в меню Расширения > Менеджер плагинов и найдите установленный плагин.
- Плагин должен быть включен. Убедитесь, что есть зеленый флажок напротив его имени. Если в колонке "Включен" стоит красная иконка, кликните по ней, чтобы она стала зеленой.
- Кликните на имя SmartResizer, чтобы открыть настройки плагина.
Шаг 2. Настройка основных параметров
- Ширина эскиза для блогов - ширина миниатюры изображения для категории блога, раздела блога и главной страницы.
- Высота эскиза для блогов - высота миниатюры для изображений для категории блога, раздела блога и главной страницы.
- Ширина эскиза по умолчанию для статей - ширина миниатюр изображений внутри статей.
- Высота эскиза по умолчанию для статей - высота миниатюр изображений внутри статей.
- Ширина эскиза по умолчанию для других компонентов - ширина миниатюр для изображений в других компонентах (не com_content)
- Высота эскиза по умолчанию для других компонентов - высота миниатюр для изображений в других компонентах (не com_content)
Если Вы заполните значения только для ширины, высота будет рассчитана автоматически. Если вы заполните значения для ширины и высоты, то изображение может получиться обрезанным.
Шаг 3: Автоматически сгенерированные миниатюры
Вы можете увидеть разницу. Теперь все фотографии одного размера, но они не имеют никаких стилей. Давайте зададим им стили.
Шаг 4. Настройка дополнительных параметров
- Создавать эскизы для всех картинок - Если НЕТ, то эскизы будут создаваться только для картинок с командой 'smartresize'. Если ДА, то эскизы будут создаваться для всех картинок, исключая картинки с командой 'nosmartresize'.
- Игнорировать индивидуальные размеры картинок - Если ДА, то индивидуальные размеры картинки в тэге IMG будут игнорироваться и размер эскиза будет браться из параметров плагина, исключая картинки с командой 'smartresizeindividual'.
- Создавать ссылку на статью в блогах - Если да, то эских в блогах будет ссылаться на статью.
- Стиль эксиза в блоге - Введите значение свойства STYLE тега < img >, которые будут использоваться в блоге. Например: background-color:#EEEEEE; border:1px solid #999999; padding:3px; margin-right:5px;
- Стиль эксиза в статье - Введите значение свойства STYLE тега < img >, которые будут использоваться в статье. Например: background-color:#EEEEEE; border:1px solid #999999; padding:3px; margin-right:5px;
- Стиль эксиза в сторонних компонентах - Введите значение свойства STYLE тега < img >, которые будут использоваться в других компонентах (не com_content). Например: background-color:#EEEEEE; border:1px solid #999999; padding:3px; margin-right:5px;.
- Способ отображения полноразмерной картинки - В новом окне или RokBox - полное изображение откроется в новом окне браузера или в lightbox, если плагин RokBox установлен. Popup окно - полное изображение откроется в всплывающем окне.
- Сохранять эскизы в - ту же папку, где и исходное изображение, или в папку "smart_thumbs", или в папкe "cache".
- Качество эскиза в % - Качество создаваемого эскиза.
- Суффикс эскиза - Суффикс имени файла эскиза. Например, если картинка называется someimage.jpg, то эскиз будет называться someimage_thumb.jpg в той же директории..
Шаг 5. Добавляем стили для миниатюр
- Перейдите к настройкам плагина Расширения > Менеджер плагинов > SmartResizer.
- Откройте его для редактирования, нажав на название, или установите флажок и нажмите кнопку "Изменить".
- Перейдите на вкладку "Расширенные параметры".
- Введите стили в поле "Стиль эскиза в блоге".
- Сохраните.
- Просмотрите результат на сайте.
- Ниже приведен пример кода, использованного мной.
margin:10px 10px 10px 10px;
border:1px solid #CCCCCC;
background:#EEEEEE;
float:left;
Шаг 6: Стилизованная страница блога
Все фотографии теперь одинаково стилизованы, с рамкой, с одинаковыми отступами и выравниванием.
Вот и всё! Надеюсь вам будет полезен этот урок.
Перевод статьи с www.ostraining.com
ВКонтакте
Комментарии
плохому танцору..... если руки из жопы вам ни один движок не поможет
Шаблон TheWordNews 2
Joomla 2.5