A Gallery can contain unlimited Categories. You can assign selected Images to a Category inside the Gallery. Categories can be used for Filtering Images in Admin panel and also in the Frontent Gallery layouts.
1) Create a Gallery
Set a Category Title
2) Select Images
3) Move Images into the Category
4) Open a Category to see filtered images
CW Gallery offers a tagging system to organize images and whole galleries for further filtering.
Tags can be added by simple typing and choosing the autocomplete offers of already existing tags. If you want to add a new tag, just use ENTER key to set the tag.
Images can be filtered by tags in frontend layout views. For showing the TAGS filter, please enable the filter in Gallery settings
You can also decide to show / hide the filter title "Tags:"
Galleries can be tagged for filtering on frontend view of Galleries menu item.
Display Filter by Tags has to be enabled in menu item settings
Let's take a look at the Images management.
Images can be ordered by simple drag and drop method.
Deleting Single Image can be done via X icon on the Thumbnail Card.
Deleting Multiple images can be done by Selecting Images by clicking on Check icon and then using the Action button Delete Selected Images. Then Confirm the action in Modal Window.
Select the Category where you want to Move selected Images and Confirm the Action.
Galleries can be displayed in different Layouts. Layout can be set in default Component Options or individually for each Gallery in Gallery Settings. Also Module or Menu Item have their Layout Settings.
Masonry is a grid layout based on columns. Custom Thumbnails are used and placed into the vertically aligned collumns filled with defined spaces.Masonry layout is also referred to as the Pinterest Style Layout, as it was the first major website to use this layout style.
Metro Layout is another variation of Grid Layout. Unlike Masonry Layout, Metro uses strictly defined Grid of 1x1Square, 2x2 Square, 2x1 Portrait and 1:2 Landscape versions of Thumbnails to set the perfect geometry of the Grid Layout.
Tile Layout uses 1x1 Square and 2:1 Portrait Thumbnails to fit the Grid geometry Vertically and Horizontally.
Justified Layout uses Custom Thumbnails to set the Horizontally oriented Grid.
Grid3D Card Layout uses Square thumbnails to display square grid of cards with 3D hover effect.
Grid3D Cube Layout uses Square thumbnails to display square grid of cubes with 3D hover effect.
CW Gallery offers a group of different hover effects for image thumbnails. Some of them may be more suitable for bigger thumbnails as they work with borders and overlay mask styling effects. Please choose suitable hover effect that will fit your gallery layout settings together with your needs.
If you want to display image content informations under the image and NOT via Hover effect, do following:
See example:
You can manually define a custom thumbnail width & height. If you disable Crop Image parameter, only width will be set and height will be calculated automatically.
CW Gallery is generating a set of thumbnails for each image so it can provide a best suitable thumbnail for gallery output. A Width parameter is being set here along with Ascpet Ratio, so Height will be calculated automatically.
For Portrait thumbnail is applied the same as for Landscape thumbnail.
Square thumbnail has only Width settings obviously.
No settings needed for these, they are simply made with double width or height to basic thumbnail.
Also please note that these alternative thumbnails can be DISABLED. In that case, gallery will use default thumbnails and fit them in best possible way automatically into the layout grid. It may bring some automatic cropping to fit the layout though. Please consider your requirements for the gallery output and decide yourself what suits you best.
Yes, you really can choose a custom thumbnail Crop for each thumbnail version individually. A Crop area aspect ratio is defined by selected Thumbnail version and Aspect ratio defined for this version in Gallery settings. Position and Size of the Crop area can be customized.
Also please note that these alternative thumbnail versions can be DISABLED. In that case, special sizes will be calculated automatically to fit the layout the best way possible, using default thumbnails.
A Caption settings is described in Hover Effects. It can be also fully disabled in Gallery Settings -> Hover Effects -> Show Caption in detail
You can manually change the spacing between thumbnails in Gallery Settings -> Layouts -> Image border.
You can set a number of Columns for most of Layouts in Gallery Settings -> Layouts -> Columns - with exception of Justified Layout where it is not used. Please keep in mind that for lower number of columns should be set a suitable Thumbnail size so it will not have to be enlarged over its natural size.
For Lightbox detail can be set various options:
Autoanimation Effect - effect of open / close of lightbox window
Transition Effect - effect of switching between images
Thumbs Autostart - if thumbnails box should be automatically displayed when lightbox window is opened.
Features Buttons:
CW Gallery provides a Load More functionality for improving usability of the gallery output in order to keep usable the whole website with large galleries. If your gallery contain a large amout of images, it is highly recommended to use the Loadmore Option enabled.
Images can be protected by Watermarks system. Use Gallery Settings -> Watermarks.
Set the Watermark Image - upload your own watermark image, set the Opacity(transparency) and Mode with further detail settings of positioning.
Best results will be achieved with PNG images as Watermark source.
