Create a Popup Image with Expanding Text

Learn how to create a custom image popup with a text box that expands to fit the amount of text.

This popup image with text will be applied to a point hotspot. It’s comprised of a background, an external image loader, a text box, and a screentint.

This popup is useful if you have multiple image hotspots with different images that have varying amounts of descriptive text. The textbox will expand to a specified length to fit the text. Once that length is reached, a horizontal scroll bar will be added.

To follow along, download this project file from our webinar on Styling Skins. Look for the folder, Image Popup with Text.

Build the Pop-Up

In the Skin Editor:

1. Draw a Rectangle. This rectangle will act as a container/parent element and a border and background color for the pop up. For this example, it’ll be 206 pixels wide and 160 pixels high.
2. Next, draw a Text Box under the Rectangle. This will hold the description for the image. Match its width to the Rectangle.
3. Make the Text Box a child of the Rectangle.
4. Move the Text Box to have its top align to the bottom of the Rectangle: Set its Anchor to top-center. And it’s position is X=0, Y=160.
5. Add a Lottie animation as a loading graphic. This will show if the image hasn’t yet downloaded. It will hide behind the image. Make it a child of the Rectangle and position it in the center of the Rectangle. Anchor is center and postion is 0/0.
6. Make changes needed to the animation, like Loop. For endless loop, change Loop to 0.
7. Add an External Image Loader element and make it a child of the Rectangle. Change its Anchor to top-middle. The external image loader will load the images for each hotspot.
8. Place the Image Loader over the Rectangle, leaving about 3 pixels of a border on the top and sides and 7 pixels of the Rectangle showing on the bottom. About 200px wide and 150 pixels high.
   

   

9. Deselect the External Image Loader (Ctrl/Cmd-click).
10. Change background color to blue and reduce the Alpha Transparency for the Rectangle and Text Box.
11. Change the Border width to 0.
12. Deselect the Rectangle and change the color of the Text to white or other contrasting color. You can make any other changes here to the text as well.
13. Add a close button. We’re using one from the Silhouette icons set which includes a 2-state button.
    

    

14. Make it a child of the Rectangle.
15. Change its size to about 22 pixels and position it on the corner of the popup; anchored top-right.
16. Change it’s color to the same blue as the pop-up. Open the Color Tool.
    

    

17. Add a Screentint. This will “gray” out the panorama in the background so the pop-up is easier to see. Add a Rectangle and make it as big as the canvas; Anchored top-left with a position of 0,0.
18. Change the background to black with an Alpha Transparency setting of 100.
19. Move the screentint under the image pop in the tree so that is shows behind the pop-up.
20. Finally, name (change their IDs) the elements accordingly.
    

    

Add Actions and CSS

Now that the pop-up graphic is built, it’s time to give it some actions and CSS.

1. Add a variable to the Variables table in the Skin settings: vis_image_popup. It’s Type is True/False and it’s Initial Value is false.

2. For the Rectangle container, set its visibility to true and add a logic block with the following condition:

   Trigger	Comparison	Value	Operation
   vis_image_popup	=	true	Visible: True

3. Copy that expression; we’ll use it again.

   

4. Select the External Image Loader in the Tree. Deselect visibility and add a logic block. Paste the condition.

5. Make sure Unload content on hide is selected in the External Image panel. This will make sure the image is cleared before the next one is loaded.

6. Give the closing button an action:

   Source	Action	Variable Name	Operation	Value
   Mouse Click	Set Variable Value	vis_image_popup	=	false

7. For the Text Box, remove the word Text and select Word Wrap, Auto size, and Scroll bar.

8. Add 5 pixels of padding.

9. In the Text Box’s Advanced panel, add the following CSS to CSS Styles Inner Element: max-height: 120px;. This will allow the text box to accommodate larger chunks of text by expanding only to 120 pixels. If more space is needed, a Scroll Bar will be added.

10. For the Screentint, deselect visible and paste the expression from earlier to the Visible logic block.

11. Add the following action to the Screentint:

    Source	Action	Variable Name	Operation	Value
    Mouse Click	Set Variable Value	vis_image_popup	=	false

Add a Point Hotspot Template

This popup occurs at a point hotspot and therefore we need to create a template for it.

The easiest way is to use one from the components toolbox. For this example, we’ll use the Silhouette Image Popup component.

1. After adding the component, remove the following from the Tree:
   • image_popup_close
   • image_popup
   • screentint_image
2. Give the template a unique ID like ht_image_text.
3. Add the following actions:

This action will pull the image from Image File.

This action will set the variable’s value to true and will show the popup.

This action pulls the text from the hotspot descrption and adds it to the text box.

Save the skin. Or save it as a component.

Apply it to a project

1. In a node, add an Image type point hotspot.
2. Change the Skin-ID to the ID of the point hotspot template.
3. Add a title.
4. Add a description. The description can be plain text and as long as needed.
5. For Image File, navigate to your image to add it. On output, this image will be copied to the output folder.

Repeat steps 2-5 for the rest of the point hotspots.

See also…

• Styling Skin Elements Webinar

• Using Variables

• Logic Blocks