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

Lite-blog.ru

You are using an outdated browser.
Please upgrade your browser to improve your experience.

• Вы здесь:
• Главная
• Joomla
• joomla k2 картинка обтекаемая текстом

joomla k2 картинка обтекаемая текстом

Используя компонент K2 для cms joomla у малоопытных верстальшиков или вообще у тех кто не умеет верстать, встает вопрос как сделать так что бы картинка не была по середине, а была слева и обекала текстом.

По умолчанию новости(статьи) выводятся так:

Компонент K2 часто обновляется, я пошел по простому пути что бы обновления не затрагивали меня.

Что бы сделать все как надо, нужно зайти /templates/наш_шаблон/css и открыть css файл и добавить строчку:

.itemFullText img — это текст и картинка в тексте, при подробном просмотре.

.catItemIntroText img — это в тех новостях которые выводятся в категории (превью).

Что бы было более красиво предлагаю добавить отступ и рамку:

(Цвет указывайте согласно ваших цветов на сайте.)

Размещаем текст поверх изображения, используя css

Некоторые находят неправильный выход: рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в html документах. Но что делать, если текст надо заменить? Опять перерисовывать картинку? Есть более простые решения.

В результате получаем:

Суть представленного способа в том, что мы делаем div-контейнер, который будет содержать в себе картинку и текст. При этом текст мы будем позиционировать относительно левого нижнего угла контейнера.

Код html:

Код css:

• display: inline-block — нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
• position: relative — заставляет все вложенные блоки с position: absolute вести отсчёт координат своего положения не от окна браузера, а от блока .container

• display: inline-block — для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
• position: absolute — для размещения блок с помощью конкретных координат: bottom, left — отступы снизу и слева (координаты) возможно вместо них использовать top (сверху) и right (справа)

Показываем описание при наведении на картинку

Показанный выше способ можно использовать для отображение текста при наведении картинку мышкой (может пригодиться для описания товаров в интернет-магазине).

Код css будет выглядеть следующим образом (код html не изменился):

Как вставить изображение на сайт Joomla.

В Joomla, возможно вставить изображение на страницу сайта несколькими способами, самый простой и распространённый среди них — это вставка картинок с помощью текстового редактора.

Вставка изображения

1. Для этого нужно зайти в панель управления сайтом,
2. далее, жмём «Менеджер материалов»
3. открываем страницу редактирования материала, в который нам нужно вставить изображение, нажав на его название.
4. Теперь, установив курсор, обозначим место куда мы будем вставлять картинку
5. и жмём на кнопку «Изображение» в нижней панели редактора.

Откроется окно каталога изображений.

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

Выбираем нужное изображение, отмечаем его и жмём «открыть» далее «Загрузить».

В каталоге появится загруженная картинка, отметим её кликнув по ней левой кнопкой и жмём «Вставить» в верхнем правом углу.

Изображение появилось в ранее отмеченном месте, на редактируемой странице.

Для этого: кликнем левой кнопкой по картинке (пока не посинеет),

потом жмём кнопку с деревом «Добавить/изменить изображение» в верхней панели редактора и открываем окно «Параметры изображения».

Введите на ваш выбор «описание» и «заголовок», который будет отображаться при наведении курсора на картинку. Далее вверху жмем кнопку «положение» и установим:

• Выравнивание — выберем из предложенного, например «по левому краю».
• Размер — можно указать в пикселях, можно пока пропустить.
• Верт. отступ — поставим 5.
• Гориз.отступ — поставим 5

Остальное пока оставим без изменений, до лучших времён и жмём «Обновить».

Изображение приобрело заданные параметры. Здесь ещё можно подкорректировать размеры картинки вручную, взяв за края сузить её или расширить.

Joomla 3.0. Добавление материалов с изображением на сайт

Видео «Joomla 3.0. Добавление материалов с изображением на сайт» посвящено вопросу о том, как добавлять материалы с изображением. Для начала зайдите в панель управления на страничку менеджера материалов. Теперь добавьте новую статью, либо отредактируйте существующую, добавив к ней изображение. Для этого поставьте курсор на то место в тексте, где планируете поместить фотографию. Поставим курсор вначале текста и нажмем на кнопку Изображение. В открывшемся окне можно выбрать нужную картинку на сервере, если там такой нет, то сначала загрузите её на сервер. После выбора фотографии нажмите на кнопку — Вставить. После этого данное изображение добавится в статью. Теперь можно изменить размер картинки и способ обтекания текста вокруг картинки. Для выравнивания картинки по левому краю щелкните по ней мышкой и вверху нажмите на соответствующую кнопку выравнивание текста. Сам текст можно также выделить и выполнить выравнивание по ширине. Для сохранения изменений нажмите на кнопку — Сохранить. Теперь можно проверить сделанные изменения, зайдя на главную страничку сайта Видео урок «Joomla 3.0. Добавление материалов с изображением на сайт» вы можете смотреть онлайн в любое время абсолютно бесплатно. Успехов!

Информационный центр

Управление материалами в Joomla 3.x

О работе с материалами в предыдущих версиях Joomla мы уже писали. В Joomla 3.х немного изменился интерфейс панели управления, но общие принципы управления остались неизменными.

Напомню, что вход в панель управления остался по адресу: http://домен_сайта/administrator/, который нужно ввести в адресной строке браузера. Как и прежде, откроется окно с приглашением ввести имя и пароль. И только после авторизации пользователь попадает в панель управления, которую еще называют административной панелью.

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

Рисунок 1. Внешний вид панели управления сразу после входа

Все команды управления сосредоточены в верхнем горизонтальном меню.

Где находятся все мои текстовые материалы?

Текстовые материалы находятся в менеджере материалов и доступны через меню: Материалы — Менеджер материалов (смотрите рисунок 1).

Рисунок 2. Менеджер материалов

Чтобы создать новый материал нужно нажать на зеленую кнопку «Создать», которая находится в левом верхнем углу интерфейса «Менеджера материалов».

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

Процессы редактирования и создания материала фактически однозначны, с той разницей, что редактирование подразумевает, что материал на сайте уже существует и где-то отображается.

Редактирование (изменение) материала

Рисунок 3. Форма редактирования материала

Форма редактирования материала имеет вид как на рисунке 3. Как и в предыдущих версиях, в Joomla 3.х используется редактор TinyMCE. Его интерфейс похож на интерфейс привычного Microsoft Word, поэтому мы не будем рассматривать как в нем работать. Рассмотрим особенности.

Вставка текста из текстового редактора

Набирать текст материала непосредственно на сайте — не очень хорошая идея, гораздо правильнее материал предварительно набрать и вычитать в каком-то текстовом редакторе на вашем компьютере (это может быть Microsoft Word или Open Office Writer, или даже примитивный WordPad), а затем уже вставить его в форме редактора. Вставить текст, предварительно скопированный из текстового редактора, можно только с помощью клавиатуры комбинацией клавиш Ctrl+V.

После вставки необходимо выполнить процедуру очистки формате от невидимого мусора. Делается это с помощью команды «Очистить формат» в меню «Формат» (смотрите рисунок 4). Текст выделяется комбинацией клавиш Ctrl+A, а затем уж и «Формат — Очистить формат».

Рисунок 4. Очистка формата.

Вставка изображения

Встроенные в TinyMCE (TinyMCE — это название текстового редактора, который используется в Joomla) средства для вставки в текст картинок неудобные, поэтому под редактором (или выше редактируемого текста, но под кнопками редактирования) имеется серая кнопка «Изображение», нажав на которую пользователь получает окно для визуального выбора изображения на сайте или загрузки его туда, для выбора. Достаточно просто кликнуть по изображению и кликнуть по синей кнопке «Вставить» чтобы изображение оказалось там, где находится курсор (смотрите рисунок 5).

Рисунок 5. Вставка изображения

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

Ошибкой является загрузка на сайт изображений в состоянии «из фотоаппарата». Такие изображения имеют большой размер (более 5 тысяч точек по одной из сторон) и большой вес исчисляемый несколькими мегабайтами. Такие изображения займут на сервере много места, которое далеко не безгранично, будут медленно загружаться при просмотре страницы и возможны потери мелких деталей изображения при его уменьшении браузером. Поэтому, перед тем как загружать изображения на сайт необходимо их обработать, в частности уменьшить. Вполне подойдет 1000 точек по ширине с качеством 70-80% и разрешением 72dpi. С этой задачей отлично справится бесплатная программа «FastStone Photo Resizer».

Рисунок 6. Кнопка наложения стилей на элементы материала.

Для наложения стилей на элементы материала служит кнопка «Формат» (не меню «Формат», смотрите рисунок 6). Эта кнопка открывает список всех стилей, которые предопределены и могут быть использованы. Часть стилей отображается бледно серым цветом — их в данный момент использовать нельзя. Например, нельзя наложить на изображение стиль предназначенный для таблиц.
Чтобы наложить стиль, нужно выделить элемент (для выделения изображения — кликните по нему один раз, для таблиц — просто поставьте курсор в таблицу)

После вставки в материал изображения стоит ему присвоить стиль. Для изображения имеются три предопределенных стиля (в стандартную поставку эти стили не входят): img.img-intext, img.img-intext200-left и img.img-intext200-right. Все три стиля устанавливают отступы, рамку и тень для изображения. Также они контролируют ширину изображения. Стили img.img-intext200-left и img.img-intext200-right задают изображению ширину менее половины возможной, прижимают изображение к левой или правой границе, а также обтекание текстом с другой стороны.

Стиль img.img-intext размещает изображение в середине контента и не задает обтекание текстом.

Если сайт находится на киррилическом домене, то дополнительные стили могут не отображаться

Зачем нужны категории?

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

Управление категориями осуществляется в «Менеджере категорий», который доступен по команде «Материалы» — «Менеджер категорий».

При создании категории достаточно задать ей имя , иногда можно дать описание. Описание, в зависимости от настроек, может выводиться на странице.

При установке программного обеспечения сайта, сразу же создается одна категория и все создаваемые тексты автоматически присваиваются этой категории.

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

Следует помнить, что если разместить материал в категорию, которая выводится на «лицо» сайта в виде блога или списка каким-то пунктом меню, то такой материал будет виден всем посетителям сайта сразу же после его сохранения.

Изменить категорию к которой принадлежит материал очень просто, достаточно открыть материал на редактирование и с помощью кнопки расположенной справа от формы редактирования изменить категорию. И сохранить изменения.

Рисунок 8. Изменение категории

Вывод материалов в виде блога

Если вы выводите материалы в виде блога, то не забывайте отделять вступительную часть текста от основной с помощью кнопки «Подробнее», которая находится ниже окна редактора (кнопку смотрите на рисунке 3 или 4). На рисунке 9 видно как могут выводиться материалы в виде блога. Здесь в каждом элементе блога выводятся заголовок материала , вступительный текст материала , изображение вступительной части материала и ссылка » Подробнее «.

Рисунок 9. Отображение материалов в виде блога

Как вставить изображение вступительной части материала

В форме редактирования материала нужно перейти на вкладку «Изображения и ссылки» и нажать кнопку «Выбрать» в разделе «Изображение для вступительной части материала» (смотрите рисунок 10).

Рисунок 10. Вставка изображения для вступительного текста материала

А дальше откроется окно выбора изображения, в котором нужно визуально выбрать изображение и один раз кликнуть по нему, после чего нажать кнопку «Вставить». Рекомендую заранее подготовить несколько небольших (например 100 х 100 точек) изображений и поместить их в отдельную папку.

Изображение вступительной части материала не отображается при просмотре полного материала (после клика по ссылке «Подробнее» открывается страница с полным материалом).

Как добавить статью (материал) в Joomla. Подробная инструкция.

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

Создание и публикация статьи (материала) в Joomla.

Давайте для начала просто попробуем создать и опубликовать первый материал (article) на сайте и посмотрим, появится ли он на нашем сайте. Запомните, что любые операции с материалами в Joomla (создание новых, редактирование существующих, публикация, снятие с публикации и удаление статей) производятся в менеджере материалов. Чтобы туда попасть логинимся в админку Joomla, далее в верхнем меню переходим Материалы -> Менеджер материалов. Для создания материала жмем наверху на кнопку Создать.

Мы попадем на страницу создания материала. Данная страница состоит из нескольких вкладок. При добавлении на сайт новых статей я пользуюсь в основном вкладками: Материал и Публикация. Давайте пробежимся по всем вкладкам.

Вне вкладок расположено два элемента:

Заголовок. Здесь указываем название нашей будущей статьи. Содержимое данного поля по умолчанию отобразится в теге title страницы (это то, что выводится в заголовке окна браузера) и в тегах h1 (или h2, в зависимости от используемого шаблона).

Алиас. Псевдоним, использующийся для формирования URL адреса страницы с нашим материалом. Если оставить пустым, то джумла сама заполнит это поле, переведя название статьи в транслит. Можно заполнить самому латинскими буквами без пробелов, допускаются дефисы и знаки подчеркивания.

Остальные элементы расположены во вкладках.

Вкладка Материал. Это основная вкладка. В ней присутствует текстовый редактор, в котором мы и набиваем непосредственно текст статьи. По умолчанию Joomla поставляется с WYSIWYG редактором TinyMCE. Кнопки редактора очень похожи на кнопки обычного текстового редактора. При наведении на кнопку появляется всплывающая подсказка, так что думаю здесь вы и сами разберетесь.

По умолчанию текстовый редактор отображается в стандартном режиме. В этом режиме отображаются не все кнопки. Как перевезти редактор в расширенный режим для отображения всех кнопок я расскажу ниже.

Справа от редактора есть еще группа полей, которые показаны на рисунке ниже.

Давайте пробежимся по ним.

Поле Состояние является важным, т.к. позволяет публиковать или снимать статью с публикации на сайте. Не опубликованные статьи не выводятся на сайте. Выставляем данное поле в значение Опубликовано.

В поле Категория выбираем из выпадающего списка категорию к которой будет относится статья. Так как мы с вами категории еще не создавали, то по умолчанию имеем только одну единственную категорию Uncategorised. Создавать категории мы будем позже в следующих уроках.

Назначение поля Избранные разберем чуть ниже в данной статье. Пока оставляем по умолчанию в значении Нет.

В поле Доступ выставлено значение по умолчанию Public, т.е. данный материал после публикации его на сайте будет доступен всем посетителям сайта. Если вы захотите в будущем, чтобы статья была доступна только зарегистрированным пользователям, нужно выбрать из выпадающего списка Registered.

Поле Язык используется только в случае, если вы создаете мультиязычный сайт. Оставляем его настройки по умолчанию в значении Все.

Следующее поле Метки появилось в Joomla начиная с версии 3.x. Метки (их еще называют тегами, англ. tags) чем то напоминают категории, но в то же время они дополняют их, позволяя объединять в группы материалы из разных категорий. Пока оставляем это поле пустым.

Далее переходим во вкладку Публикация.

Возьмите за правило всегда заполнять поля Мета-тег Description и Мета-тег Keywords. Многие вебмастера утверждают, что поисковики уже не учитывают содержимое данных полей и их заполнять не нужно. Хочу вам сказать, что по крайней мере Гугл учитывает содержимое этих полей. Вкратце скажу, что содержимое мета-тега Description используется поисковыми системами при формировании сниппетов в поисковой выдаче, а при помощи мета-тега Keywords вы помогаете понять поисковой системе какие ключевые слова несут основную смысловую нагрузку в данной статье. Ключевые слова заполняем через запятую. Пять шесть ключевиков достаточно, указываем те слова, по которым можно составить представление о содержании статьи.

Поле Мета-тег Robots указывает поисковым роботам каким образом индексировать вашу статью и нужно ли ее вообще индексировать. Если вы хотите запретить индексирование данной статьи (т.е. чтобы она не появлялась в выдаче поисковых систем), то можете выставить это поле в значение No index. Значение No Follow означает, будут ли переходить поисковые роботы по ссылкам, содержащимся на данной странице и передавать другим страницам, на которые ведут ссылки, «вес» текущей страницы. В нашем случае оставляем это поле в значении По умолчанию, что равноценно значению Index, Follow.

Остальные поля в данной вкладке заполнять не обязательно.

Сохраняем статью и открываем главную страницу сайта, чтобы посмотреть появилась ли наша статья.

Как видим, статья не появилась. Давайте разбираться, почему она не появилась.

Нам нужно понять, что выводится на главной странице сайта сразу после его установки и как сделать, чтобы созданная нами статья появилась на сайте. Для этого в верхнем меню админки Джумлы переходим по пунктам Меню — > Менеджер меню. Открываем одно единственное меню. Открываем в нем единственный пункт меню Главная и видим, что пункт меню Главная выводит Избранные материалы.

Значит, чтобы наша статья выводилась на главной странице сайта, нам нужно пометить ее как избранную. Возвращаемся в менеджер материалов, открываем созданную нами статью на редактирование и справа от редактора выставляем поле Избранные в значение Да. Сохраняем изменения и обновляем главную страницу сайта. Мы видим, что наша статья появилась на главной странице сайта. Таким образом мы выяснили, что на главной странице сайта по умолчанию после его установки выводятся избранные материалы.

Выводим анонс статьи и кнопку «Подробнее» («Читать далее») на полную версию статьи.

Наша статься выводится на главной странице целиком. Мы же хотим, чтобы на главной выводились только анонсы статей, а под анонсами отображалась бы кнопка Подробнее (Читать далее), которая ведет на страницу с полной версией нашей статьи. Для этого снова открываем нашу статью на редактирование. Ставим курсор мыши в том месте нашей статьи, на котором будет заканчиваться анонс и жмем на кнопку Подробнее.

В редакторе появился горизонтальный текстовый разделитель. Весь текст, который до разделителя, появится в анонсе. Сохраняем статью и смотрим. Теперь на главной выводится только часть статьи, которая до разделителя кнопки Подробнее. При переходе по кнопке Подробнее попадаем на полную версию статьи.

Вставляем картинки в статью на Joomla.

Какая же статья обходится без красивой картинки? Редактор TinyMCE, который используется по умолчанию в Joomla, позволяет легко и быстро добавить картинку в материал.

Есть два способа отображения картинки в материале:

• Первый способ — это когда мы загружаем картинку на сервер нашего сайта и затем встраиваем ее в наш материал.
• Второй способ — это когда мы заливаем картинку на какой нибудь внешний хостинг картинок типа радикала или на внешние диски (Яндекс.Диск, Google Drive, Microsoft SkyDrive, DropBox) и затем встраиваем картинку в наш материал.

Некоторые советуют использовать второй способ аргументируя это тем, что данный способ не создает никакой нагрузки на сервер сайта, т.к. картинки подтягиваются с внешних ресурсов. Но я с этим утверждением не согласен. Если вы будете оптимизировать свои картинки перед их публикацией, т.е. размер картинки будет не более 70 Килобайт и вы настроите на сервере кэширование картинок, то нагрузку на сервер они будут давать мизерную. Могу вас уверить, что основную нагрузку на сервер создает база данных, а не картинки. Поэтому, советую сохранять картинки именно на своем сервере при их публикации.

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

• загрузить с компьютера на сервер сайта нужную нам картинку;
• выбрать загруженную картинку для вставки в материал.

Все картинки, которые мы загружаем на сервер сайта и вставляем на сайт, хранятся в папке images вашего сайта. Если в папке images созданы вложенные папки, то мы можем сохранить картинки в любой из этих вложенных папок. Для этого в выпадающем поле Каталог в самом верху модального окна выбираем папку назначения. Мы также можем выбрать нужную нам папку щелкнув на синий значок конкретной папки. Сразу после установки джумлы в папке images уже имеется некоторый набор созданных папок (banners, headers, sampledata) и картинок.

Я обычно удаляю все содержимое папки images и создаю в ней свою структуру папок со своими названиями, куда и сохраняю картинки. Удалять существующие каталоги и создавать новые удобнее всего подключившись к сайту при помощи самого популярного FTP клиента FileZilla.

После выбора папки для загрузки картинки с компьютера на сервер прокручиваем модальное окно до самого низа и в разделе Загрузить файл жмем на кнопку Обзор.

Выбираем нужную картинку на компьютере, которую хотим загрузить на сервер и жмем на кнопку Загрузить. В итоге наша картинка закачается в выбранную нами папку.

Но это еще не все. Мы только закачали картинку на наш сервер и теперь она доступна для вставки в нашу статью. Теперь, чтобы вставить картинку в статью мы выбираем нашу картинку из списка загруженных в нашей папке и жмем на кнопку Вставить, которая расположена в правом верхнем углу модального окна. Вот теперь наша картинка появилась в нужном месте нашего редактора. Но мы видим, что наша картинка вставилась как то не так. Появился ненужный отступ в тексте. Нам нужно, что бы текст огибал картинку слева или справа. Для этого выбираем курсором мыши нашу картинку и жмем на маленькую кнопку insert/edit image в панели кнопок нашего редактора. Появится другое модальное окно, в котором в поле Source уже забит путь к нашей картинке. Переходим во вкладку Advanced и в поле Style вбиваем следующую строку:

Данное стилевое свойство выравняет картинку по левому краю и заставит текст обтекать ее справа.

Для выравнивания картинки по правому краю и соответственно обтекания ее текстом слева вбиваем следующую строку:

При необходимости, мы также можем задать отступ текста от картинки указав в полях Vertical space и Horizontal space соответственно отступ по вертикали и отступ по горизонтали в пикселях.

В поле Border вкладки Advanced можем указать в пикселях ширину границы вокруг картинки.

Как расширить текстовый редактор в Joomla.

Для того, чтобы перевезти текстовый редактор TinyMCE в расширенный режим, идем в Расширения -> Менеджер плагинов. Находим в списке плагин с названием Редактор — TinyMCE и открываем его. В поле Режим редактора выбираем Расширенный и сохраняем настройки.

Редактор в расширенном режиме имеет уже набор кнопок как на рисунке ниже.

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

Вы можете помочь проекту, рассказав о нем в социальных сетях:

Как вставить теги изображений на Joomla 3

Вступление

Изображения, вставленные на страницы сайта, должны улучшать не только визуальное восприятие статьи, но участвовать в её продвижении и продвижении всего сайта, в поисковой выдачи. Алгоритмы поисковых систем учитывают правильное оформление HTML кода для показа изображений, включением в него специальных тегов.

Теги для изображений, важные для оптимизации

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

, где «участвует» только один элемент, это patch до вставляемой картинки в каталоге images Joomla. Такого кода вполне достаточно, чтобы показать изображение, но слишком мало, чтобы поисковики обратили на него внимание. однако правильный код должен выглядить так:

Немного теории

В языке HTML для картинок работают следующие теги:

Тег img src. Адрес файла изображения, которое будет отображаться на странице. Если вставляете изображение из каталога images, то достаточно, относительного адреса картинки (как в примере). Если картинка вставляется со стороннего ресурса, например из файлового хранилища, то нужен полный адрес картинки с http.

Тег alt. Текстовой тег альтернатива изображению. По определению, он будет показываться вместо изображения, если по каким, либо причинам, адрес фото не доступен. Тег altочень важен для поисковых систем. Поясню почему. Если вы скопируете всю статью, вместе в правильно оформленным картинками и перенесете статью в тестовой редактор, то увидите, что все теги alt, видны как тестовые фразы. Именно так их видит поисковик, оценивая релевантность текста. Это значит, что вы можете тегом altдобавить в статью уникальные ключевые фразы и тем самым, улучшить статью для поисковых систем.

Тег Title. В примерах этого тега нет. Он вставляется таким образом:

title=»Заголовок» src=»https://joomla3-x.ru/images/headers/maple.jpg» alt=»» />

Тег необязательный, потому что сложный для SEO. Сложный потому что, он должен быть уникальным и достаточно тяжело набрать уникальных заголовков для всех изображений.

Теги размеров. В Joomla эти теги считаются не обязательными. В отличие от WordPress, в которой тег размеров вставляется автоматом, Joomla (в штатном редакторе) этого не делает и считает этот тег необязательным. Однако размер фото положительно влияет на скорость загрузки страницы.

Выглядит тег размеров так:

Этот последний пример показывает полный код изображения со всеми вставленными тегами.

Посмотрим, как вставить теги изображений на Joomla 3

Конечно, можно вставлять теги изображений в ручном режиме и если вы готовите статьи на сторонних редакторах это нормально. Но на Joomla, есть визуальные редакторы, которые помогают вставлять теги изображений на Joomla автоматом. В разных редакторах вставки тегов различны. Связано это с несколько непонятными переводами в визуальном редакторе. Начнем с редактора по умолчанию TinyMCE.

Вставить теги изображений в редакторе TinyMCE

В редакторе Tiny MCE есть две кнопки для вставки:

Одна кнопка в сайдбаре (1 на фото). Эта кнопка вставляет фото по URL адреса картинки. Кнопка позволяет вставить только теги:

Вторая кнопка внизу редактора (2). Кнопка богатая и позволяет вставить все теги, даже подпись к фото, но не вставляет теги размеров. Здесь следует пояснить, переводы вставляемых тегов:

• Описание изображения — Это тег alt;
• Заголовок — это подпись к изображению, тег figcaption;
• Заголовок изображения — Это тег title.

Важно! Комбинируя кнопку под редактором и кнопку в сайдбаре, можно вставить все теги для изображений.

Примечание: На Joomla 3.5 обновили и редактор TinyMCE. В новой версии кнопки «переехали» наверх редактора.

Вставить теги изображений в редакторе JCE

JCE самый популярный редактор Joomla. Посмотрим, как в нем, вставляются теги картинок.

• Ссылка это тег imgsrc (адрес картинки);
• Текст это тег alt;
• На вкладке «Расширенные», строка «Название» это тег title.

В этом редакторе теги размеров изображения показываются автоматом.

Выводы статьи

Как видите, в системе Joomla 3, есть все возможности вставить все теги изображений и оптимизировать картинки для поисковиков, без лишних усилий.

Как вставлять изображения в материалы

В Joomla существует два способа вставки изображений в материалы. Особой популярностью пользуется вставка изображений из визуального редактора. Этот метод особенно прост для начинающих пользователей: нажатием одной кнопки вы вызываете окно, в котором можно выбрать картинку с сервера или закачать новую. Если же вы не пользуетесь редактором или, по какой-либо причине, не хотите вставлять изображения таким способом, можно воспользоваться стандартными средствами Joomla.

Для вставки изображения в текст материала стандартным методом, в режиме редактирования материала переключитесь на закладку «Изображения». Затем в списке «Галерея картинок» выберите одно или несколько изображений, которые вы хотите вставить в материал и нажмите кнопку >>.

Примечание: для выделения нескольких изображений нажмите кнопку ctrl и мышью выберите изображения.

Для выбора директории с изображениями воспользуйтесь выпадающим списком, расположенным чуть ниже списка изображений. Загрузить дополнительные изображения на сервер можно с помощью Медиа-менеджера (пункт меню «Сайт->Медиа-менеджер»).

После этого изображения появятся в списке «Картинки материала». Выбрав любое изображение в этом списке, вы можете задать выбранному изображению дополнительные параметры:

• Источник — Отображает имя выбранного изображения. Вы можете изменить имя.
• Выравнивание картинки — выберите одно из значений: «Нет», «Центр», «Лево» или «Право».
• Alt текст — Введите здесь альтернативный текст изображения.
• Рамка — Введите толщину рамки вокруг изображения в пикселях.
• Подпись — Подпись для изображения.
• Расположение подписи — выберите одно из значений: «Снизу», «Сверху».
• Выравнивание подписи — выберите одно из значений: «Нет», «Центр», «Лево» или «Право».
• Ширина подписи: Введите число пикселей ширины изображения.
• Применить: Применение выбранных параметров для выбранного изображения.

Примечание: для сохранения изменений при редактировании параметров изображения, обязательно нажмите кнопку «Применить» под списком параметров.

После того как изображения выбраны и настроены параметры отображения приступаем непосредственно к вставке изображений в текст материала. Для этого, в тексте материала, там где необходимо отобразить картинку, пишем тег . При отображении материала специальный мамбот Joomla автоматически заменит эти теги, на картинки с указанными параметрами.

Перед публикацией материала можно нажать кнопку «Просмотр» и посмотреть, как будет выглядеть статья. В случае неправильного порядка отображения картинок, необходимо изменить порядок в списке изображений материала c помощью кнопок «Вверх» и «Вниз».

Добавление ссылок и изображений в материалы на Джумле

В наших предыдущих уроках мы рассказали о создании материалов на CMS Joomla 3:

А так же научились редактировать материалы и изменять их описание, формат вывода и т.д.:

Но любой материал посетителям Вашего сайта будет интереснее читать, если в нем будут присутствовать различные элементы (изображения, видео и т.д.). Так же иногда приходится проставлять ссылки на другие материалы или же другие сайты. О том, как вставить все эти элементы мы расскажем в этом уроке. Все функции будут рассмотрены с установленным на сайте текстовым редактором JCE — Урок 6. Установка и настройка текстового редактора JCE.

Как вставить ссылку в материал Joomla 3

Начнем наш урок с, пожалуй, самого популярного вопроса вставки ссылок в материалы на Джумле. На самом деле выполняется это довольно просто. Давайте поэтапно рассмотрим весь процесс.

1) Переходим в раздел МАТЕРИАЛЫ – МЕНЕДЖЕР МАТЕРИАЛОВ – СОЗДАТЬ МАТЕРИАЛ

2) Здесь же выбираем на панели текстового редактора значок «ВСТАВИТЬ ССЫЛКУ»

3) В открывшемся окне заполняем нужные нам поля

Ссылка – введите сюда адрес ссылки

Текст – введите текст ссылки (анкор)

Так же тут присутствует параметр поиска ссылок и атрибуты для вставки якоря в статью.

Нажав на вкладку «РАСШИРЕННЫЕ» Вы сможете задать для Вашей ссылки различные классы и атрибуты.

А во вкладке «ВСПЛЫВАЮЩИЕ ОКНА» Вы можете настроить эти самые окна на странице материала

4) Давайте теперь пропишем, какую либо ссылку и посмотрим, как она будет отображаться в нашем материале.

Вариант 1 – Безанкорная ссылка . Для ее создания пропишите следующее:

Вариант 2 – Ссылка с анкором . Для ее создания пропишите следующее:

Теперь давайте посмотрим, как это будет выглядеть в нашем материале на сайте

Думаю с размещением ссылок на своем сайте все понятно.

Как вставить изображение в материал на Джумле 3

Так же очень важно добавлять в свой текст различные картинки и фотографии. Это позволит сделать материал более красочным, а поисковые системы будут лучше индексировать Ваш сайт. Давайте поэтапно рассмотрим процесс размещения изображений на Вашем сайте.

1) Подберите необходимое изображение для размещения в статье

2) Кликните по вкладке «ДОБАВИТЬ ИЗОБРАЖЕНИЕ» в поле редактора

3) После этого перед нами раскрывается окно редактора изображений .

Чтобы добавить новое изображение Вам необходимо нажать на значок картинки

4) После этого перед Вами откроется окно для загрузки нового изображения.

— Кликните по вкладке «ОБЗОР»

— Выберете изображение на своем компьютере

— Нажмите клавишу загрузить

После этого изображение появится в корневой папке Вашего сайта, где расположены все рисунки. Выберете его и нажмите ВСТАВИТЬ , и изображения появится в тексте материала Вашего сайта.

Кстати, для удобства Вы можете создавать новые папки для хранения изображений. Например, если хотите, чтобы картинки располагались по категориям, Вам достаточно создать несколько папок, присвоив им имена категорий. Для создания папки необходимо нажать на значок папки.

Теперь давайте разберемся с остальными функциями, которые нам доступны при добавлении картинок на свой сайт. Как Вы уже успели заметить, в верхней части расположены еще 3 вкладки: изображение, альтернатива и расширенные. Давайте разберемся, какие функции доступны в каждой из этих вкладок.

Вкладка «ИЗОБРАЖЕНИЕ»

Ссылка – здесь автоматически прописывается адрес к Вашему изображению

Текст – название Вашего изображения, под которым оно сохранено на сайте

Размер – размер Вашего изображения в пикселях

Выравнивание – Вы можете выровнять ваше изображения (по центру, по верху и т.д.)

Отступ – отступ изображения от правого, левого, верхнего и нижнего края

Границы – здесь Вы можете указать стиль, цвет и размер границ изображения

Вкладка «АЛЬТЕРНАТИВА»

В данной вкладке Вы можете указать два вида изображения, одно из них при наведении курсора мыши, а другое без этого. Подойдет для увеличения картинки при наведении курсора, но при этом нужно загрузить на сайт рисунки 2-х размеров.

Вкладка «РАСШИРЕНЫЕ»

Стиль – Вы можете указать один из встроенных CSS стилей

Список классов – Вы можете указать доступный класс для изображения, выбрав его из выпадающего списка

Классы – Вы можете самостоятельно прописать класс для Вашего изображения.

Название – укажите название картинки, которое будет отображаться при наведении на нее курсора мыши

Так же Вы можете указать ID , направление, код языка и другие параметры для Вашего изображения.

Заключение

В этой статье мы рассказали о том:

— Как вставить ссылку в материал Джумла 3

— Как вставить изображение в материал Джумла 3

Так же мы разобрали основные функции, доступные при добавлении этих элементов в материал

Плагины для оформления статей Joomla, тексты, фото, галереи, видео

Вступление

Любая статья сайта складывается из трех составляющих: текста, фото, видео. Конечно, не все виды контента могут присутствовать в одной статье, но в пределах всего сайта Joomla они присутствуют обязательно.

Содержание:

• Плагин xTypo
• mavik Thumbnails
• Плагин Simple Image Gallery
• AllVideos

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

Плагины для оформления текстов Joomla

Плагин xTypo

Плагин xTypo добавляет в файл CSS сайта свои стили. Текст выделяется цветом, цветом с картинкой-пометкой, фоном. Также можно сделать специально оформленную цитату справа или слева в тексте. Также можно сделать цветную кнопку и список с оригинальными маркерами.

Устанавливается плагин стандартно. В бесплатной версии плагина xTypo настроек нет. Синтаксис плагина простой, но объемный. Чтобы выделить текст, нужно заключить его в специальные теги в режиме визуального редактора.

Синтаксис плагина xTypo

Синтаксис плагина это теги, в которые нужно заключить выделяемый текст. Тег заключен в фигурные скобки один тег открывающий, второй закрывающий.

Пример: <Тег>здесь текст, который нужно выделить

Список тегов вы найдете после установки плагина в Менеджере плагинов→Content – Xtypo (тип content).

Скачать плагин можно у автора: https://www.templateplazza.com/tags/freebies .

Чтобы скачать бесплатную версию плагина потребуется регистрация на сайте автора плагина.

Плагины для оформления фото в статьях Joomla

mavik Thumbnails –плагин для оформления фото в модальных окнах

Плагин mavik Thumbnails открывает фотографии с измененными размерами в размерах оригинала во всплывающих окнах (Slimbox, Joomla modal). Применяется плагин ко всем фотографиям сайта, либо к отдельным группам фотографий. Установка плагина стандартная. Настройка плагина в Менеджере плагинов→ mavik Thumbnails (тип Content).

Плагины для оформления простых фото галерей Joomla

Плагин Simple Image Gallery для оформления простых фото галерей Joomla

Одним из лучших плагинов для оформления фото галерей в статье является плагин Simple Image Gallery.Плагин отличается узкой специализацией, только для фото галереи, поэтому очень легкий и простой в исполнении.

Плагин Simple Image Gallery позволяет вставить в статью галерею до 20 фотографий (количество настраивается). В статье фотографии будут отображены миниатюрами, выстроенными в табличном варианте (колонки и ряды). Размер миниатюр настраивается в настройках плагина (менеджер плагинов)

Чтобы вставить фото галерею в статью достаточно загрузить фотографии галереи в отдельную папку в каталоге image(для Joomla 2.5) или в папку каталога image/stories (для Joomla 1.5).Далее в статью вставляете код в визуальном редакторе:

gallery Название папки с фотографиями галереи /gallery. Теги gallery в фигурных скобках.

Фотографии появляются в статье в формате миниатюр одного размера, размещенных в табличном варианте. Размер миниатюр, количество столбцов миниатюр настраивается в настройках плагина. Открываются фотографии в полном размере во всплывающем lightbox.

Работает плагин на Joomla 1.5 и 2.5 и 3. Устанавливается плагин стандартным способом установки Joomla.

Скачать плагин можно у автора: http://www.joomlaworks.net/extensions/free-premium/simple-image-gallery . Проверена до joomla 3.3.6.

mgThumbnails новый плагин для оформления фото галерей Joomla 2,5

Есть версия для Joomla 3.x.

Плагин mgThumbnails новый плагин для оформления (вставки) фото галерей и отдельных фото в статьи. Плагин создает содержание лайтбокс галерей с помощью следующих библиотек JavaScript: JQuery, Mootools, Colorbox, Fancybox, Greybox, Shadobox, Slimbox2, Joomla Modal (Squeezebox).

Просто вставляется полноразмерное фото в статью. В редакторе уменьшается ее размер. Плагин автоматически создает ссылку для модального окна для фото оригинального размера и сохраняет ссылку на уменьшенное изображения тоже. Это нужно для быстрой загрузки изображений.

Скачать плагин можно у автора: http://echoweb.sk/eng/download-for-free-2/mg-thumbnails-gallery-plugin-for-joomla-1-7-2-5-3-x.html.

Плагины для оформления видео на Joomla 1,5 -2,5-3,0

AllVideos плагин для оформления видео от всех видеопровайдеров интернет

Очень простой и бесконфликтный плагин вставки видео в статьи сайта это плагин AllV >Скачать плагин можно у автора: http://www.joomlaworks.net/extensions/free-premium/allvideos .

Устанавливается плагин стандартным способом:

• Расширения >> Установка / Удаление (для Joomla 1.5) или
• Расширения >> Менеджер расширений (для Joomla 2.5 и 3.0)

Плагин вставляет в статью видео любого формата и от любого провайдера. Синтаксис плагина простой. Нужен ID (индетификатор) видео. ID видео заключается в теги. Для каждого провайдера теги свои. Например, для YouTube вставка видео выглядит так:

youtube ID Video /youtube .Теги youtube в фигурных скобках.

Так как плагин поддерживает большое количество провайдеров, то полный список лучше посмотреть у автора: http://www.joomlaworks.net/docs/allvideos.

Примечание: Плагин AllVideos поддерживает вставку в статьи не только видео, но и аудио материалов.

Предложенные плагины для оформления статей Joomla, лишь небольшой список плагинов. Но все предложенные плагины работают стабильно и не конфликтуют с другими плагинами использующими библиотеки jQuery.

На этом про плагины для оформления статей все!

Топ-пост этого месяца:  Как работают в приложении Angular циклы описание процессов