Displaying a gallery of images on your website is becoming more and more popular. With better connections and faster computers downloading a collection of images and viewing them on a page is no longer an event that takes all afternoon. It now happens in a matter of moments.
That is why we made sure that all of our SiteCM clients had the ability to do this with relative ease and in a way that allowed them flexibility in the future. Enter the SiteCM Image Gallery dropin application. Using the same process we've used before to create a page and then insert a dropin application we choose the Image Gallery dropin and then select some parameters about how we would like the gallery to appear.
We can choose the size of thumbnail (this is a smaller version of the larger image that will appear in a glossy popup window when they click on it) and the size of the popup window that the full image will appear in. We can also decide how many images we would like to show in our gallery at one time and how many columns of images there should be. If we were to leave the 'images per page' number as -1 our gallery will show all of the images that are in the category we select.
Something to keep in mind when you are creating your gallery is the maximum width of your page. If you set your thumbnail to be 200 pixels wide and have 4 columns that is 800 pixels a typical content area is roughly 750px.
Finally you need to select a category of images to display in your gallery. Which ever category you choose the entire
contents of that category will showup in your gallery so organize your images accordingly. Click on Insert and viola! A beautiful blue box. Exactly what you were expecting right?
The blue icon is your dropin application placeholder and you can edit the dimensions of this image in the properties inspector to match those that you anticipate your dropin to be. For the image gallery I often make the width 100% and the height 300px. This gives me a visual idea of where in the rest of my content around the gallery is going to appear. For pages with no other content I don't typically bother to change the placeholder image properties.
After we have set up the properties for our Image Gallery we can proceed through the other tabs and set our Metadata, Properties and Navigation for our gallery page. Once we save & launch our page we don't ever, in theory, need to come back to this page and edit it. It will dynamically update based on the images that we have uploaded into the category that we selected. And that, my friends, is a pretty darn nice feature as far as my experience goes.
Now what about the images?
They are dealt with in our Assets > Images manager.
We are going to need a category that is dedicated to our Image Gallery (in theory we should have done this first so we could select it when we put our dropin on our page) and all of the images that we upload into that category are going to display in that gallery page.
Something for us to consider when we are choosing images for our gallery is image proportion. Whatever the dimensions of the images we upload they will keep those same proportions in our gallery. What this means is that a 600x500 pixel image will have a thumbnail of 100x65 pixels and a 500x500 image will have a thumbnail of 100x100 pixels because you can only control the width of an image.
SiteCM won't skew our images and make them look funny just to have them all be the same size, that is something we have to do on our end. When I create an image gallery I like to take the time to ensure that all of my images are the same proportions so that when they are placed into the gallery all of the thumbnails are the same size. It makes for a more polished and professional looking page.