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”.
2. Click and drag the “Install New” to a container on your layout.
3. When it loads, it should look like the following image.
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.
5. To update an image, mouse over the default image, and notice how a green overlay covers 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.
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.
Once you select an effect, you can choose a color to apply to that effect.
This is what it would look once changes have been saved:
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.
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).
A new image will be added on the right side of your current items. Edit it as in steps 4-6.
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.
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.
A window will appear with the list of your current items. Identify them by their titles. Click and drag their names to reposition them.
Once happy with the changes, click “Close” on the top right corner. The positions are saved automatically.
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!