3. Alternate Images/Formats

In the previous tutorial we built our first image gallery using three images. All of the image files were the same aspect ratio and same file type, .png

In this tutorial we will replace two of the images with ones that have different file formats (.jpg and .svg) and one that is in a different aspect ratio (portrait).

Note: click on any image to enlarge it

Step 1 - Replace a .png file with a .jpg file ⇑

Note: In the previous tutorial we used the three .png files shown below. We will replace the ‘dog.png’ with a ‘dog.jpg’ file.

frog.png

dog.png

cat.png

1. Open the Tutorial folder

2. Copy the dog.jpg, frog_vt.png and frog.svg files into the animals folder (figure #1)

 

Figure #1: Copy files to animals folder

 

3. Open the MSG_Audio.p2vr

4. Click on the Gallery 1 point hotspot to make it active

5. In the Custom Properties scroll down to Popup File Extensions

Note: In the image gallery tutorial we were using files that had the same file type .png. So the entry only needed a single ‘png’ to apply to all files. Now we want to use a .jpg image so we need to update this field.

6. Enter the following png | jpg | png (figure #2)

 

Figure #2: Updated file extensions

 

7. Save the project as MSG_Gallery_Image_Ext.p2vr

8. Publish the project

Note: now when we open the gallery and navigate to the ‘dog’ image it looks the same but the image is now a .jpg file. If we inspect the image we can see in the console that it is in fact a .jpg file format. (figure #3)

Figure #3: Examining the file in the Console window

Step 2 - Replace Raster with Vector ⇑

Let’s do something a bit more obvious and replace the raster frog image with an vector .svg version.

1. In the Popup File Extensions change the entry to svg | jpg | png

2. Save the project

3. Publish the project

Note: When we open the gallery we can clearly see the frog image is a vector .svg file. (figure #4)

Figure #4: The frog is represented by a vector .svg image

Step 3 - Change Image Position ⇑

Note: on a side note if the aspect ratio of the viewport is < 1 the frogs face is pushed hard to the right. This is because the image is currently using ‘max’ and ‘centre’ to define the images scaling and position in the external image holder.

4. We can modify this by setting the Popup Image Position to right | centre | centre (figure #5)

 

Figure #5: Image Position

 

5. Save the Project

6. Publish the Project

Note: Here is the side by side version “centre” on the left and “right” on the right. (figures #6 & 7)

Figure #6: Position = centre

Figure #7: Position = right

Note: MSG supports the following scaling and position options:

  • “Min” – The image will be resized to be as large as possible without clipping. Original aspect ratio is kept. May result in empty space on all edges.

  • “Max” – The image will be resized so that the entire area of the external loader will be used. May result in the image being clipped, if the image’s aspect ratio doesn’t match that of the external image element.

  • “top left” - pins to top-left corner

  • “top” - pins to top edge, centered horizontally

  • “top right“ - pins to top-right corner

  • “left“ - pins to left edge, centered vertically

  • “centre/center” - Default: Perfect center alignment

  • “right” - pins to right edge, centered vertically

  • “bottom left” - pins to bottom-left corner

  • “bottom” - pins to bottom edge, centered horizontally

  • “bottom right” - pins to bottom-right corner

Step 3 - Alternate aspect ratio images ⇑

Another option is to use an alternative image designed to fit the “portrait” aspect. For this we will use the frog_vt.png image (figure #8)

 

Figure #8: Vertical ratio image

 

Note: by adding _vt to an image when the aspect ratio of the viewport is <1 MSG it will display the _vt version.

1. In the Custom Properties change the Popup Image entry to frog_vt | dog | cat

2. Change the Popup File Extension entry back to png | jpg | png

3. Change the Popup Image Position entry back to centre (figure #9)

 

Figure #9: Updated Custom Properties for alternate image

 

4. Save the project

5. Publish the project

Note: now when the aspect ratio changes the alternate “portrait” image is displayed. (figures #10 & 11)

Figure #10: Landscape view

Figure #11: Portrait view

Summary ⇑

The MSG Component has built in support for multi-languages for text and audio files. In the next tutorial we will add this support.

Tony Redhead