Webmaster's Blog

360 Images

Published
By

Interactive images, where the user can move around in the image to view the scene from every angle, 360 photos are becoming more widespread and easier to create. You can embed them on your Modern Campus CMS website in the upper page image or within the body content.You 360 image must first be set up in Flickr. Check out some of the 360 images we have done. If you have suggestions for additional 360 images on campus, please email photoservices@mtu.edu.

As the Page Image

View a 360 Page Image in the Style Guide.

  1. Select the Header Image Parameter option for the desired layout in the Page Parameters. You can choose Feature, Banner, or Sub-Banner.
  2. In MultiEdit Content select the Video/360 Image option from the Media Type dropdown.
  3. Paste the .jpg URL from Flickr in the Video ID/360 Image URL field. To get the Flickr URL:
    1. Open the special 360 image you want to use from Michigan Tech’s Flickr account.
    2. Click the Download icon.
    3. Right-click the Large option and choose Copy Link Address.
  4. Save your changes.

Within the Body Content

  1. Insert the Video/360 Image snippet in the location where you want the 360 to appear.
  2. Paste the .jpg URL from Flickr in the URL field.
    1. To get the URL, go to the Flickr page for the 360, click the Download icon, right click the Large option and choose Copy Link Location.
  3. If desired, enter a value in the height field.
  4. Save your changes.

Change Default Preview Angle

If the default preview location of the image is not where you want it, you can change it.

  1. Go to the code view (<> icon).
  2. Find the video/360 image snippet by doing a Ctrl/command + F and searching for the URL of the Flickr image.
  3. Scroll down to end the of that snippet. You will see:
    </tbody>
    </table>
  4. On the line before the </tbody> insert:
    <tr>
    <td>default_yaw</td>
    <td>&nbsp;</td>
    </tr>
  5. Save.
  6. In the column for the new default_yaw parameter, enter the numerical angle in degrees that the view should be adjusted by. The degrees move the image counter-clockwise (as if you were dragging from left to right). During the initial loading of a page the automatic pan spans approximately 40 degrees.
, , , , ,