Documentation

Getting Started

When you first install GalleryES you will now have several new things added to your Concrete5 installation:

  1. 5 Dashboard Pages Under "GalleryES" In Your Main Dashboard View
  2. 5 Blocks - "GalleryES View" "GalleryES Content Filter", "GalleryES Tagcloud", "GalleryES Featured", & "GalleryES Gallery"
  3. GalleryES Caption Attribute For Files

Create Gallery & Add Images

If you don't already have images with file sets in Concrete5, you will need to create some! It is easy to create a gallery and upload your images in GalleryES. Visit your dashboard page, and locate GalleryES Dashboard > Add Images/Gallery. Click the "Create New Gallery" tab to make a gallery. Once you create one, you can upload your images. Recommended file types are JPG/JPEG, PNG and GIF*. Choose which gallery to upload your files too, then select one or more files from your computer. Note: IE7, IE8, & IE9 and any other browser that does not support multi-upload will not be able to upload more than 1 image at once.

To resize your images as you upload to create web-safe images, please visit the GalleryES Dashboard > Options page, then select "Resize Images On Upload" use the width and height fields to create your desired image size, save, then return to Add Images/Gallery and begin uploading!

*GalleryES Watermark, resize, rotate functions do not support animated GIFs at this time.

Managing Your Gallery Images As A Whole

Under GalleryES Dashboard > Manage Galleries/Images you can do many things with your images. When you first select a gallery to edit, you will be taken to a details page where you can edit each image individually in various ways. You can add a description and set a featured image for your Galleries for organization.

The "Bulk Action" drop-down is for updating one or more of your images with a certain action, these actions are:

  • Watermark - Set a watermark on the selected images. Watermark settings can be configured under the GalleryES Dashboard > Options page.
  • Resize - Resizes the selected images to whatever your desired width and height are. Keeps the image proportions.
  • Rename All Tags - Overrides ALL current tags on the selected images, and replaces them with tags provided. Separate your tags with a comma using this method.
  • Rotate Clockwise - Rotate your image 90 degrees to the right.
  • Rotate Counter Clockwise - Rotate your image 90 degrees to the left.
  • Restore From Backup - Replaces the current modified image with the image stored in GalleryES Backup, which is the original, uploaded state.
  • Delete Image - Removes the file from Concrete5.

A word regarding large images & bulk actions: This action is limited by how much memory php is allowed to use on your server. For best performance, try to limit your image sizes no bigger than 1,200px x 1,200px. For larger images, you might not be able to bulk action many images at a time. For a remedy on some servers please refere to this great help document: https://drupal.org/node/207036

Managing your individual image:

The Title, Description, Caption, Mature Filter & Tags are all editable. You can edit as many images that appear on the page, so if you have many images you can select to view up to 500 of them at once using the search/filter options! Here are a description on what exactly is used for each attribute:

  • Title - Used for the title="" tags on anchor tags, also used as the title in the lightbox.
  • Description - Used as the ALT tag in the image tags.
  • Caption - Used as the title="" tags on image tags, also used as the caption in the lightbox.
  • Featured Attribute - Used for the GalleryES Newest block, select the images to display if set to featured only.
  • Mature Attribute* - Triggers the image not to show by default, unless the "GalleryES Content Filter" block is present and is active.
  • Tags - Used for GalleryES Tagcloud and tag filter option in GalleryES View. Be sure to separate these by line. They are also case and tense sensitive.

*In order to use the Mature attribute, you must first enable this feature in GalleryES Dashboard > Options. Select "Enable Mature Content Filtering", then in the GalleryES Dashboard > Edit Galleries/Images page you will now see the option to add a Mature tag onto your individual images.

The Options Page

GalleryES Dashboard > Options is your primary page for editing watermarks, enabling auto resize on upload, and file cleanup.

  • Enable Resize on Upload - Resize your images when you upload them to GalleryES Dashboard > Add. Will not work when uploading through Concrete5 file manager, so please use GalleryES if you would like auto resize!
  • Enable Mature Content Filtering - Enables the Mature attribute to appear in GalleryES Dashboard > Edit Galleries/Images to use with the GalleryES Content Filter block.
  • Enable Watermark On Thumbnails - On by default, turn this option off if you do not want your watermark to be on the thumbnails of your images.
  • Watermark Options - Customize the watermark to your liking. Please note that only PNG will work when uploading an image for watermark!
  • Remove Old Backup Files - Removes all backup files of images that are no longer in Concrete5
  • Remove Watermarks - Removes watermarks for all images.
  • Remove Backups - Deletes all watermarks and backups of all files.

Set Tags Page

GalleryES Dashboard > Tags is a good place to manage all of your tags. View all tags on all your images, and find how many images are assigned to a particular tag. Rename one particular tag across all of your images. Leave the tag blank to remove it from all images.

Single Page Settings Page

GalleryES Dashboard > Single Page Settings is where you control the visual appearance of your galleries appearing in single pages. This is only for the blocks "GalleryES Tagcloud" and "GalleryES Gallery". Here you can change the gallery type (Tile & Masonry), Pagination, Lightbox, Rows, Spacing and more. The settings page controls BOTH pages, there currently is no way to make each page appear differently. The two single pages that come with GalleryES are "Tag Cloud Display" and "Gallery".

The Blocks

Once you have everything in the dashboard squared away, you can start creating your blocks! There are 3 different blocks for GalleryES:

  • GalleryES View - Your main block. This produces the view side of your galleries.
  • GalleryES Content Filter - A consent filter to enable viewing of your images marked "Mature" (You can set this by first enabling the feature in GalleryES Dashboard > Options, and then going into GalleryES Dashboard > Edit Galleries/Images and setting it on your desired images)
  • GalleryES Tagcloud - Displays your image tags in a trendy cloud, with the more popular tags larger, and the least smaller.
  • GalleryES Featured - Displays your featured or newest images from galleries you specify.
  • GalleryES Gallery - Displays all your GalleryES galleries. Note: in order for your galleries to appear here, you MUST add a description or a featured image in the GalleryES Dashboard > Edit Galleries page.

GalleryES View

The block has different options for different galleries. Please choose a gallery at the top for more options. The options in grey box are standard for most galleries.

Common Settings:
Choose gallery (a fileset)
Sort order - Choose how your images are ordered in the block.
Enable lightbox - The javascript enabling lightbox will be in effect. The lightbox is mobile friendly!
Enable Pagination - Only display a number of images per page.
Enable Tag Sort Menu - Display tags above your images so that users can view images of only a certain tag when clicked.

Tile Gallery:
Columns available are 3, 5, 8 & 10 pictures per column, all responsive (shrink down to 3, 2 and 1 images per column on smaller screens)
Image spacing controls the padding in pixels for each image. If you want 10px gap between images, make the image spacing 5px!
Rollover captions use the GalleryES Caption to display when you roll over the image thumbnail (Not mobile friendly)
Reverse Caption Colors - Default rollover caption colors are black background with white text. To reverse those to white background with black text, check this option.
Portrait Thumbnails - Disable thumbnail cropping and keep thumbnail aspect ratio.

Masonry Gallery:
Image spacing controls the padding in pixels for each image. If you want 10px gap between images, make the image spacing 5px!
Masonry gallery has a set number of columns, so thumbnails are larger.

Slider:
Display a set number of images to rotate. This method looks best if all the images are of the same size!
Auto play setting to automatically start rotating your images on page load.
Show Nav Dots - displays a number dots under the slideshow

Filmstrip:
Display a set number of images to rotate, with a strip of thumbnails underneith. This method looks best if all the images are of the same size!
Auto play setting to automatically start rotating your images on page load.

Single:
Display a single image in a variety of ways.
If "Thumbnail Only" is checked, width/height and responsive image options have no effect.

GalleryES Content Filter

This displays a block to allow the front-end user to consent to viewing your Mature tagged images. This uses cookies to toggle. The block must be somewhere on your site at least once, but can be in multiple areas.

GalleryES Tagcloud / Tag Search Single Page

Displays all tags for your images like a tag cloud. When the user clicks on a tag it takes you to the single page "Tag Search" to display all images with the tag.

GalleryES Gallery

Displays all your GalleryES Galleries. You must have a featured image or a description added to your gallery from the dashboard. This has two different views, row view and responsive grid view. Displaying descriptions/titles is optional, and a featured image is not necessary as long as you have one or the other selected from the dashboard.

General Requirements

PHP GD Library with TrueType capabilities for the text watermarks (bundled with most hosts)

Browser Compatibility
All modern browsers are recommended.
Chrome, Firefox 20+, IE10, Safari - All galleries.
IE9 - All galleries.
IE8 - Slideshow/Filmstrip might need CSS workarounds.
IE7 - Use tile gallery only to be completely compatible with this version.

 

FAQ

I get a php error if i try to watermark a lot of my images!!
This action is limited by how much memory php is allowed to use on your server. For best performance, try to limit your image sizes no bigger than 1,200px x 1,200px. For larger images, you might not be able to bulk action many images at a time. For a remedy on some servers please refere to this great help document: https://drupal.org/node/207036

Can I customize the look of my gallery? (add borders, change colors, etc)
Everything is customizable through CSS. Just override what is already there. Place your CSS changes outside of the block in case of updates. 

Why doesn't my watermark appear in other places besides galleryES?
Watermarks in GalleryES are stored in the /files/gallery/ folder so that if the images are later edited they will always have the correct position and rotation for your watermark. It is a non destructive method as well. If you decide you don't want the watermark later or have to change the image, you won't have to reupload it again. If you wan't to use your watermark outside of GalleryES, first see if the "single image" block option will work for you. If not, save the watermarked image and reupload the image to use outside of your gallery.

I don't want galleryES to make backups, because I'm worried about space.
Currently there is not an option to turn off backups (maybe in the future if requested). GalleryES only stores the ORIGINAL copy of your image once, not every time you make a change. You would only have 2 copies of your images in the gallery folder if you have a watermark as well. If you are concerned about space, consider other options for watermarking and edit your photos outside of galleryES. There are also options for removing old backups in Settings.

This "adult content" block sounds bad, I don't like it.
Simply uninstall the block from the Dashboard blocks manager. It is not required if you are not using the adult attribute filter for your images.

My GalleryES Gallery block is saying I have no galleries....
You need to add either a description or a featured image to your gallery in the dashboard "Manage Galleries" before it will register as a gallery. I recommend a description if you don't want a featured image, because you can turn off description displays in the block settings. 

Can I...

Manipulate animated gifs?
Currently no, GalleryES uses GD Library which is widely supported on most PHP platforms, but it has limitations with animated gifs, including certain PNGs.

Edit the images then keep the changes after I uninstall GalleryES?
You can keep everything but watermarks, galleryES Captions, and backups of your images. Resizing, rotating, tags, and descriptions are all stored within the Concrete5 file manager.

Use my own lightbox?
Yes, just disable the lightbox in the block edit mode. You can use .galleryESItem### as a selector on the <a> tag.

Further Help

If you need further help, please message me through the Concrete5 Marketplace

Thank You

http://masonry.desandro.com/ - Masonry script

http://flexslider.woothemes.com/ - Slider & Filmstrip script

http://dimsemenov.com/plugins/magnific-popup/ - Lightbox

http://www.uploadify.com/ - Uploader script