Добавление 3D фото на веб-сайт. Часть 3. Интеграция через FTP + iFrame

...

Для сайтов, имеющих панель администрирования и редактирования контента.

Как правило, это сайты, созданные на основе различных CMS (Joomla, 1C-bitrix, Drupal, Wordpress, NetCat и др.)

Кроме доступа к административной панели необходим доступ к серверу, на котором будут храниться 3D фотографии. Подойдет любой сервер, позволяющий выгружать на него файлы (через SFTP/FTP или любым другим способом) и раздавать статический контент (т.е. отдающий эти файлы по соответствующим URL).

  1. Создайте на сервере отдельный каталог для хранения 3D фотографий.
  2. Сохраните фотографию в формате HTML+JavaScript на диск вашего компьютера.
  3. Скопируйте содержимое папки с сохраненной 3D фотографией на сервер (рис. 4). Для копирования может понадобиться программа-клиент с поддержкой используемого сервером протокола (например, WinSCP или FileZilla). Если используется протокол FTP, для доступа к достаточно набрать адрес сервера в проводнике Windows - он поддерживает протокол FTP.

    Загрузка 3D фотографии на сайт по FTP

    Рис.4. Копирование 3D фотографии на сервер по FTP.

    При сохранении нескольких 3D фотографий их все можно складывать в одну папку на сервере. Файлы и директории с одинаковыми именами (как, например, файл vue.min.js или директория icons), идентичны для различных 3D фотографий и могут быть без проблем перезаписаны при копировании. В нашем примере мы копируем две 3D фотографии: img3d_54 и img3d_55.
  4. Откройте фотографию, скопированную на сервер, в браузере (рис. 5). В нашем случае (рис. 4,5) файл
    /photomechanics.ru/photo-test/img3d_54.html
    соответствует адресу
    https://photomechanics.ru/photo-test/img3d_54.html
  5. Если всё было сделано правильно, вы должны увидеть работающий проигрыватель с загруженной фотографией.
  6. Перейдите в режим редактирования той страницы, на которую Вы хотите добавить 3D фотографию (рис. 6).

    Добавить 3D фото CMS Joomla

    Рис. 6. Редактирование статьи на сайте – клавиша добавления медиа-контента.

  7. Как правило, панель редактирования контента страницы содержит встроенный HTML-редактор, в котором Вы можете редактировать текст страницы, а также при необходимости увидеть HTML-код.
    Примеры для данной инструкции были подготовлены в CMS Joomla.
    Итак, в HTML-редакторе Вы находите клавишу вставки медиа-контента. Далее выбираете тип медиа-контента iframe и указываете адрес страницы. В нашем случае этот адрес     “https://photomechanics.ru/photo-test/img3d_54.html”. Выберите подходящий размер iframe.

     вставка 3D фото через iframe

    Рис.7. Добавление iframe через встроенный HTML-редактор панели администрирования.

  8. В некоторых случаях необходимо вначале разрешить добавление iframe на страницу в настройках сайта и разрешить использование тэга <iframe> в настройках сайта или HTML-редактора.
  9. Завершите добавление медиа-контента. После этого откройте редактор HTML-кода (рис. 8) и добавьте к коду Вашего iframe следующие параметры: style=”border: 0px;” для того, чтобы убрать рамку и полосы прокрутки вокруг iframe.

     

     редактирование html iFrame с 3D фото

    Рис.8. Редактирование HTML-кода страницы с iframe.

  10. Сохраните страницу.
  11. Откройте страницу сайта с 3D фотографией и убедитесь, что все работает правильно.

Для других web-сайтов

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

  1. Выполните шаги 1-4, описанные для сайтов, созданных на основе CMS (см. выше).
  2. Откройте нужную HTML-страницу (или соответствующей ей шаблон, в зависимости от используемых Вами технологий) и добавьте на неё код 
    <iframe style="scrolling: no; border: 0px;" src="photo-test/img3d_54.html" width="800" height="600"/>

    где width и height – ширина и высота iFrame. Scr- это пусть к HTML-файлу с 3D фотографией.

  3. Проверьте результат, открыв страницу сайта со встроенной 3D фотографией в браузере.