Как вставить картинку на сайт ucoz

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

В данной инструкции мы рассмотрим:

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

Добавление изображений из панели управления

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

Зайдите в панель управления и выберите модуль «Фотоальбомы» из списка:

На открывшейся странице нажмите на кнопку «Добавить»:

Откроется страница добавления изображений:

Страница в зависимости от настроек модуля может иметь различные поля, которые можно условно разделить на: «Основное», «Дополнительные поля», «SEO-настройки», «Фильтры» и «Опции»

Основное

• Категория. Поле является обязательным для заполнения. Сразу после установки в модуле есть две категории: «Мои фотографии» и «Моя семья». Их названия могут быть изменены на странице управления категориями. За вывод названия и URL категории изображения отвечают переменные $CAT_NAME$ и $CAT_URL$.
• Название фотографии. Отображается в списке фотографий, а также на странице фотографии. Кроме того, по названию фотографии можно выполнять поиск. Название изображения можно вывести с помощью переменной $PHOTO_NAME$.
• Краткое описание. Отображается под названием фотографии и выводится в шаблоне с помощью переменной $PHOTO_DESCR$. Максимальная длина устанавливается в настройках модуля и может иметь значение от 500 до 1000 символов.
• Фотография. Поле для загрузки изображения по ссылке или из папки на компьютере. Изображение будет помещено в папку на сайте /_ph/. В шаблонах изображение может быть показано несколькими способами с помощью переменных $PHOTO$, $PHOTO_URL$, $FULL_PHOTO_URL$, $FULL_PHOTO_DIRECT_URL$, $THUMBNAIL_URL$. Подробнее об этих переменных вы можете прочитать в инструкции «Управление дизайном модуля «Фотоальбомы».

Дополнительные поля

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

Фильтры

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

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

Опции

• Автор материала, которым может быть любой зарегистрированный пользователь. Если оставить поле пустым, то автором станет пользователь с ID, равным 1.
• Получать уведомления о комментариях. Опция позволит получать комментарии на email, указанный в профиле автора материала.
• Теги (через запятую). Слова или словосочетания, которыми можно охарактеризовать изображение. Теги указываются через запятую и участвуют в поиске материалов на сайте. Указав значение тега в поиске, можно найти все материалы, содержащие данный тег.
• Сохранять оригинал изображения. Оригинальная фотография будет сохранена, даже если она превышает установленные в настройках значения (по умолчанию 1600×1600 пикселей).
• Порядок вывода материала. Число от 0 до 255, которое устанавливает порядок вывода материала в списке. Чем меньше число, тем выше материал в перечне на главной странице модуля или в категории. Опция отображается, если в настройках выбрана пользовательская сортировка.
• Материал недоступен для просмотра (премодерация). Включает/отключает возможность просмотра материала пользователями. При включении данной опции материал после добавления неактивен (скрыт). При этом в шаблоне можно узнать, что материал неактивен, с помощью переменной $NOT_ACTIVE$.
• Комментирование. Включает/отключает возможность оставлять комментарии к статье. Данная настройка появляется только тогда, когда отключено соц. комментирование, и в настройках модуля статей выключена опция «Комментирование».

SEO-настройки

После оплаты пакета услуг «Оптимальный», «Магазин» или «Максимальный» становятся доступными SEO-настройки:

• URL материала. Латиница в нижнем регистре (a-z). В URL не рекомендуется использование слов, присутствующих в названиях папок раздела «Инструменты» / «Файловый менеджер».
• Title. Используется для кода $SEO_TITLE$. Рекомендуемая длина — 60 символов.
• Мета Description. Используется для кода $SEO_DESCRIPTION$. Рекомендуемая длина — 160 символов.
• Мета Keywords (через запятую и пробел). Используется для кода $SEO_KEYWORDS$.

Переменные $SEO_TITLE$, $SEO_DESCRIPTION$, $SEO_KEYWORDS$ нужно разместить внутри тега шаблонов фотоальбома.

Когда будет готово, нажмите на кнопку «Добавить», и новое изображение появится в списке:

Обычное добавление

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

Перейдите на страницу добавления изображений (/photo/0-0-0-1) с помощью ссылки «Добавить фотографию»:

Или с помощью соответствующего пункта в панели инструментов:

Если в качестве загрузчика по умолчанию используется «Мультизагрузчик», то переключитесь в режим обычного добавления:

Появится форма добавления изображения:

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

За один раз можно добавить до 10 изображений.

Чтобы изображения были опубликованы на сайте, нажмите на кнопку «Добавить».

Пакетная загрузка

Перейдите на страницу пакетной загрузки изображений (/photo/0-0-0-1-2) с помощью ссылки «Добавить фотографию»:

Или с помощью соответствующего пункта в панели инструментов:

Если в качестве загрузчика по умолчанию используется «Стандартный», то переключитесь в режим «Мультизагрузка»:

Появится форма добавления изображения:

Перетащите изображения из папки на компьютере в область «Фотографии» или укажите их с помощью кнопки «Выбрать».

Нажмите на кнопку «Загрузить»:

Затем с помощью кнопки «Далее» заполните информацию об изображениях:

Чтобы пропустить добавление информации, нажмите на кнопку «Пропустить все» и подтвердите загрузку:

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

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

Добавление ZIP-архивом

Перейдите на страницу пакетной загрузки изображений (/photo/0-0-0-1-1) с помощью ссылки «Добавить фотографию»:

Или с помощью соответствующего пункта в панели инструментов:

Переключитесь в режим «Добавление ZIP-архивом»:

Главное отличие данного способа загрузки заключается в том, что для добавления изображений потребуется указать zip-архив на компьютере или удаленном сервере:

После нажатия кнопки «Добавить» во всплывающем окне появится информация о добавленных изображениях:

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

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

Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.

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

А мы приступим

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

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

Первый вариант

Так вот, авторизуйтесь на сайте как администратор, и нажмите кнопку добавить новость на сайт (читайте статью по ссылке выше, если не знаете как добавлять новости на сайт). Должна сразу открыться форма с визуальным редактором, щёлкните мышкой в том месте, где хотите что-бы стояла картинка, у меня это будет под текстом. После этого нажмите на иконку изображение.

Должно открыться окно, в котором нужно вставить ссылку на картинку. У нас есть два варианта как это сделать, взять ссылку с другого сайта и вставить её в поле для ссылки, на картинке ниже стрелочка под номером №1. Второй варианта, пойти в файловый менеджер и загрузить картинку с компьютера, стрелочка под номером №2. Под номером №3, стрелочка указывает на поле, которое нужно заполнить, дать название нашей картинке. Это очень полезно для поисковых машин.

Поля под номером №4, помогают задать высоту и ширину для картинке. Стрелочка под номером №5, помогает задавать вокруг картинки границу, в данном случае граница чёрного цвета. Стрелочки под номером №6, указывают на отступы вокруг картинки, какое расстояние пропишите в полях, на такое к картине не приблизятся другие элементы, к примеру текст. Под номером №7, мы можем выравнивать нашу картинку, по левому и правому караю, если мы выбираем один из параметров, картинка перемещается в нужный край, а текст обтекает её с другой стороны. Если все настройки были настроены, нажмите кнопку под номером №8.

Картинка должна была появится возле текста. Если нажать на картинку, вокруг неё появятся маленькие квадратики. Данные квадратики помогают нашу картинку увеличивать и уменьшать, советую картинку растягивать только за углы, что-бы не нарушать пропорции изображения.

Второй вариант

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

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

Щёлкну по кнопке, откроется HTML редактор. В нём напишите код такой конструкции. Две скобки, одна открывается другая закрывается <>. Промеж этих скобок напишите три буквы img, эти буквы скажут браузеру что этот тег для картинки. После трёх букв поставьте пробел и напишите ещё три буквы src, и сразу после этих букв, ставим равно = а за равно, две двойные кавычки, промеж этих кавычек нужно указать ссылку на картинку. Если напишите такую конструкцию и вставите ссылку на картинку, картинка должна появится после добавления новости на сайт, или можно вернутся назад в визуальный редактор и посмотреть.

Давайте немного подробнее разберём тег. Данный img тег одинарный, есть парные теги, есть одинарные. Вот так пишутся одинарные , вот так пишутся парные

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

Третий вариант

Ну и последний вариант, это добавить картинку, через кнопки под редактором. Сейчас не важно какой редактор вы выберете, визуальный или HTML. Данный способ добавления картинки, будет работать и так и так. Найдите под редактором поле, которое позволяет выбрать картинку на компьютере и нажмите на кнопку обзор, должно открыться окно, в котором найдите картинку на компе и добавьте её на сайт. Если нажать на плюс, можно добавить несколько картинок в новость.

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

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

Важно! Если вдруг у вас получилось настроить сайт с помощью моих уроков, и вам уже не в первый раз он помогает разобраться с разными задачами, тогда не забудьте поблагодарить Автора в комментариях! После благодарности Автор знает что труд был ценен и полезен, а то время которое было затрачено на урок, не потрачено в пустую и пригодилось хорошим людям.
Спасибо за внимание и понимание.
Реклама:

1. Благодарность бывает разная, поддержка проекта в денежном выражении.
2. Поделится ссылкой, на пример на своём сайте или в соц сетях.
3. Оставить комментарий на сайте.

Есть много разных вариантов как отблагодарить Автора.

Любой сайт невозможен без художественного оформления. Поэтому прежде всего необходимо уметь вставлять изображение на сайт.

Я уже писала, что один из основных языков, с помощью которого написаны веб-страницы, — HTML. Соответственно начнем с самых азов. Тег HTML с помощью которого вставляется картинка на сайт — это и выглядит это так:

Вместо «ссылка_на_изображение.jpg» Вам просто нужно вставить путь к необходимой картинке. Естественно, что языком HTML нужно пользоваться в HTML редакторах.

Самый необходимый атрибут, на мой взгляд, который вы будете употреблять, это ширина картинки — w >

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

Зарегистрируйтесь в системе uCoz, чтобы создать полноценный сайт всего за несколько кликов.

Способ 1

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

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

• Первое и самое главное, без чего Вы никак не обойдетесь, это сама ссылка на изображение — путь к файлу. Если Вы его знаете просто вставляйте в строку, а если нет нажмите на значок папки справа и попадете в файловый менеджер, где Вы сможете выбрать уже имеющее изображение или загрузить новое.
• Название. Тут Вы пишите название картинки. По этому названию поисковые системы будут индексировать это изображение.
• Выравнивание. Где будет размещен рисунок: влево, вправо, середина и др. значения.
• Отступ. Тут имеется ввиду отступ от текста. Величина задается в пикселях.

После того, как Вы все заполнили нажимайте кнопку вставить.

Способ 2

В модуле «Каталог сайтов» есть еще одна возможность добавления изображений, кроме вышеупомянутой. Добавляя картинки таким образом появляется дополнительная функция: при нажатии на картинку она открывается в увеличенном размере — эффект «lightbox» (автоматически установлен на всех сайтах uCoz с 12..06.2012). Этим способом хорошо делать скриншоты в статье, статьи с иллюстрациями. Плюсы этого способа в том, что все картинки будут одинакового размера. Это очень удобно, так как сама картинка добавляется в два шага, быстро и прямо в визуальном редакторе.

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

Этот системный код, например $IMAGE1$, вы копируете и вставляете в любое место Вашей статьи прямо в визуальном редакторе. Справа от системного кода Вы можете задать размер изображения.

Способ 3. Lightbox на uCoz

2.06.2012 — на uCoz внедрили использование эффекта для изображений fancyBox v2.0.5 он же ulightbox (название юкоза). По умолчанию (это значит, что скрипт встроен по умолчанию и есть на каждой странице) появился рабочий скрипт fancyBox v2.0.5 со своими стилями оформления.
Fancybox — это инструмент для отображения картинок, html контента и мульти-медиа в стиле «lightbox», при котором картинка накрывает основную страницу сайта. Как использовать эту функцию в два клика описано выше, в Способе №2.
Но, если Вы хотите поэкспериментировать с этой возможностью в ручном режиме (в тегах HTML) читайте дальше.
Функция «lightbox» в модулях встроена автоматически. но если Вы хотите внести в нее какие-то свои небольшие изменения, тогда третий способ для Вас:

• Открываете файловый менеджер и добавляете новое изображение (или находите необходимое). Копируете ссылку на это изображение куда-нибудь.
• Открываете «Панель HTML кодов» и в нужное место вставляете следующий код: