Designing Image Galleries (Composica)

Blog posts from our famous "ViewletMarm"

Moderators: Qathy, vmarm

User avatar
Posts: 185
Joined: Wed May 31, 2006 8:51 pm

Designing Image Galleries (Composica)

Postby vmarm » Tue Oct 07, 2014 9:02 am

The Viewletin
An Inside ‘Take’ on All Things Viewlet
~by ViewletMarm

Are you a Composica developer or content author and you want to learn an easy way to display a series or library of images that viewers can scan fast and then, with a quick click, take a closer look? Here's a design tip for how to create this setup known as an 'Image Gallery'.


1. First, make sure you have a set of two image sizes for each image you want to include in the gallery. The first (or smaller) image in the set will be used for its respective thumbnail on the gallery page. To keep the gallery page of thumbnails uniform and professionally designed, make each of your thumbnail images the same size (height and width). For the second (or larger) image in the set, it can be the original size, but I would suggest making its height and width no larger than 800x600 (if its original size is larger than this) since it will display in a lightbox (or popup).

2. Open your project in Composica and upload all your images that you will be using for your gallery page.

3. Next, in Design mode, select the document page where you want to build your image gallery in your Media Explorer.

4. Select the 'Insert' ribbon and then select the 'Gallery' icon. This will place a Gallery element on your page.

5. You can resize the Gallery element/container as needed--this will be the size used for the thumbnail image(s) on this page. Quick tip: Once you've resized your Gallery container, select it and copy it. Then, click off of it and paste it. Move the pasted/copied element to approximately where you want it to appear on the page. Use this copy/paste process until you have ALL the thumbnail containers you need for your image gallery. Line them up on the page using the alignment and distribution tools to save time too. Using this approach will also save you oodles of time since each container will be a copy of the other with the SAME size.

6. Once you have all your element containers in place, go back and select the first Gallery element.

7. In the 'Properties' pane, select the 'Settings' tab.

8. Select your images to use for the 'Thumbnail' (this is the first/smaller image as previously described in these instructions and will display on the gallery page) and for the 'Source' (this is the second/larger image that will display in a lightbox/popup window over the page when the viewer clicks the thumbnail in run-time).

9. Repeat step 8 (above) for each Gallery element.

10. Save the page, preview your results, tweak your gallery page design as needed and preview again.

You can also learn how to create an Image Gallery by watching a video tutorial in the format of your choice:

Watch on PCs

Watch on Mobile Devices

Keep in mind, these instructions just provide you with a basic setup for an image gallery page. Once you get comfortable with this feature, play around with it and add additional design dimensions and settings, etc. as desired. It's that easy!

That's it for this blog.

Until next time...
Happy Viewleting!


Return to The Viewletin

Who is online

Users browsing this forum: No registered users and 1 guest