Ask a Question ?
Design & Publish Websites Faster

How the Picture Showcase App Works

What You’ll Learn

We’ll show here how to use the Picture Showcase app. It is similar to the Tabbed Widget app. Both allow you to showcase a series of items and cycle through them as you click on its “trigger”. For the Tabbed Widget, the triggers are the tabs, and for the Picture Showcase, the image thumbnails.

Steps to Set Up a Picture Showcase App


1. On your site, go to the shelf, and open up the App Store. Scroll to “Picture Showcase”.

App Store menu, showing the Picture Showcase app

2. Click and drag the “Install New” to a container on your layout.

Drag the Picture Showcase app to a

3. When it loads, it should look like the following image.

The default look of a Picture Showcase

Edit Text

4. Notice all the text that reads “Click to Edit …”. You can edit each one of them, by double clicking them. Both the “picture title” and the “picture caption” that appear currently, match the first image only. You can edit the text for each of the other images. We’ll get to that on step 6.

Edit all text to suit your needs

Update Images

5. To update an image, mouse over the default image, and notice how a green overlay covers it.

When you hover an image, a green overlay is shown on top of it

Double click it and the image editor will open. Here you can replace the image, crop it, resize it, and add an alt attribute. To replace it, click on the “Replace” button, on the bottom left. When you are done editing, hit “Save”. Do the same for the rest of the default images.

Use the image editor to upload/replace images

Add Active / Rollover State Effects

Now you can add effects for every time you hover over an image (rollover), and every time you click on one (active).

To activate these effects, go to the settings (wrench icon) and select an effect for any or both the states.

Picture Showcase settings: selecting effects for rollover or active states

Apply “Colorize” “Blend” or no effect

Once you select an effect, you can choose a color to apply to that effect.

Color picker for the effects on the Picture Showcase app settings

Selecting a color to be applied to the effect

This is what it would look once changes have been saved:

Preview of the Picture Showcase with the 3 possible states

Preview of the Picture Showcase with the 3 possible states

Switch Items to Edit Each and All of Them

6. You have now images set for the 3 of your current items, but what about their text? To switch items, single click it and that item will be selected. You can edit its text now.

Click and hold an image thumbnail to switch between your items

Add More Items

7. You can also add more items, to have more than 3. To add one, click on the “New Entry” button, on the app toolbar (top right).

The app toolbar, located at the top right corner of the app

A new image will be added on the right side of your current items. Edit it as in steps 4-6.

A new item added on the right

Remove Items

You can also remove an item you don’t need. Mouse over an image, and two options will appear below. Hit the “X” on the right to remove that item. It will remove both, the image and its associated text.

Remove item by clicking the X on each item

Reorder Items

8. At some point, you’ll also want to change the order in which your items appear. To do so, click on the reorder button, left side of the “X” below any of your thumbnails.

Click this button to change the order of your items

A window will appear with the list of your current items. Identify them by their titles. Click and drag their names to reposition them.

Item-reordering window

Once happy with the changes, click “Close” on the top right corner. The positions are saved automatically.

That’s it

And you’re set! Preview your app and click on each image to see your Picture Showcase working.

Did you have any troubles installing the Picture Showcase app? Let us know below!