Posting 3D photos on website. Part 3. FTP + iFrame integration

For websites with admin panel for content control and editing.

This concerns CMS-based websites (Joomla, 1C-bitrix, Drupal, Wordpress, NetCat etc.)

  1. Create a separate catalog for 3D photos on server.
  2. Save  your photo in HTML5+JavaScript or HTML+SWF format on your PC.
  3. Copy the folder content with the saved 3D photo on server (Pic. 4). In most cases you will need FTP website access, as well as any– FTP-client software (for example, FileZilla).

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

Pic.4. How to copy a 3D photo on server via FTP.

Saving several 3D photos, you can store them all in one folder on server. Files and catalogs with identic names (for example, catalog photo3d-HTML-files), are the same for different 3D photos and can be easily rewritten.

  1. Open the copied photo in browser (Pic. 5). In our case, (Pic. 4, 5) the folder “photomechanics.ru/public_HTML” matches the website root of http://photomechanics.ru.
    Correspondingly, the file
    /photomechanics.ru/public_HTML/public/ test_photo/img3d_000052.HTML
    matches the address
    http://photomechanics.ru/public/ test_photo/img3d_000052.HTML
  2. Got to the editing mode of the page, where you want the 3D photo to be placed. (Pic. 6).

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

Рic. 6. How to edit an article on website – media inserting key

  1. The editing panel usually contains the embed HTML-editor, where you can edit text and see the HTML-code, if necessary.
    Examples for this manual were done with CMS Joomla. This CMS has an embed editor Tiny MCE, which is one of the most popular embed HTML-editors nowadays. Most CMS contain this editor as well.
    So, you find a media insert key in your HTML-editor. Then you choose media type iframe and write website address (without http and website domain). In our case this address is following: “public/test_photo/img3d_000052.HTML”. Set a little more iframe size, than the original photo is. It allows to avoid scroll bars. In our example we used a 3D-animation with 535px width and iframe with 550px width.

.

 редактирование 3D фото в айфрейм

Pic. 7. How to insert iframe via embed HTML-editor of admin control panel

  1. In some cases it is necessary to permit iframe inserting and <iframe> tag usage at first. This can be made in website or HTML-editor settings.
  2. Finish media insert. After that open your HTML-code editor (Pic. 8) and add following parameters to your iframe code: style=”border: 0px;”. It allows to delete the iframe border.

 

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

Pic.8. HTML-code editing with iframe.

  1. Save the HTML-page
  2. Open the website page with 3D animation and make sure, that everything works in the correct way.
  3. Do steps 1-4 for CMS-based websites (see information above).
  4. Open the required HTML-page and add the following code

For static HTML-websites

<iframe style="border: 0px currentColor;" src="/public/test_photo/img3d_000052.HTML" width="550" height="440"></iframe>

by width and height the corresponding parameters pf iFrame are meant. iFrame size has to be a little more, than the size of the photo (to avoid scroll bars). Scr is a path to the HTML-file with 3D photo.

Check the result, opening the website page with built-in 3D photo in browser (Pic. 8).

просмотр 3D фото на сайте

Pic. 9. 3D photo view, via iFrame, on the website