www.greentreelabs.net
Final Tiles Grid Gallery
www.greentreelabs.net
Table of contents Table of contents Installation Method 1 Method 2 Layout algorithm Improving the grid Create a gallery Image gallery Recent posts gallery WooCommerce products gallery The dashboard Editing a gallery Interface overview Image management Source Image size Bulk actions Images and Videos gallery Adding an image Edit an image Adding a video Settings General Name Description Width Margin Image size factor 2
Final Tiles Grid Gallery
www.greentreelabs.net
Image size factor Tablet Portrait Image size factor Smartphone Landscape Image size factor Phone Portrait Custom image size factor Tile minimum width Images order Filters Size of the grid Allow image enlargement Scroll effect Compress HTML Links & Lightbox Lightbox & Links Links target Enable Twitter icon Enable Facebook icon Enable Google Plus icon Enable Pinterest icon Color of social sharing icons Captions Caption behavior Caption mobile behavior Caption full height Empty captions Caption icon Custom caption icon Caption icon color Caption icon size Caption effect Caption effect easing Caption color 3
Final Tiles Grid Gallery
www.greentreelabs.net
Caption effect duration Caption background color Caption opacity WordPress caption field Recent posts caption Max number of words for 'Auto excerpt' Hover effects Zoom Rotation Rotate icon Style Border size Border radius Border color Shadow size Shadow color Additional CSS class on A tag Customizations Value of 'rel' attribute on the link that contains the image. Text before gallery Text after gallery Custom CSS Custom scripts Delay Show developer link Developer link text Envato username for referral
4
Final Tiles Grid Gallery
www.greentreelabs.net
5
Final Tiles Grid Gallery
www.greentreelabs.net
Installation Method 1 1. Login to your website and go to the Plugins section of your admin panel. 2. Click the Add New button. 3. Under Install Plugins, click the Upload link. 4. Select the plugin zip file (codecanyon-5189351-final-tiles-grid-gallery-for-wordpress) from your computer then click the Install Now button.
5. You should see a message stating that the plugin was installed successfully. 6. Click the Activate Plugin link.
Method 2 1. You should have access to the server where WordPress is installed. If you don't, see your system administrator. 2. Copy the plugin zip file (codecanyon-5189351-final-tiles-grid-gallery-for-wordpress) up to your server and unzip it somewhere on the file system. 3. Copy the final-tiles-gallery folder into the /wp-content/plugins directory of your WordPress installation.
4. Login to your website and go to the Plugins section of your admin panel. 5. Look for "Final Tiles Grid Gallery" and click Activate .
6
Final Tiles Grid Gallery
www.greentreelabs.net
Layout algorithm The specialty of this gallery is the ability to create complex layouts, different from the usual multi-line or multi-column layouts. How does it work? Consider it as a puzzle. You have a set of images, and you want to place them all inside a container but you don’t want blank spaces between images. It starts placing the first image into the upper left corner:
7
Final Tiles Grid Gallery
www.greentreelabs.net
Then it places another image, looking for the most upper right free corner. But what about if the image is too large to fit into this spot? In that case, the image will be scaled down:
The result is:
8
Final Tiles Grid Gallery
www.greentreelabs.net
Do you guess where it will place the next image? Let’s see it:
Houston, we have a problem. The image now is too small! It doesn’t fit the boundaries, how can we solve this issue? If we leave the image as is, there won’t be enough space for another image on its right side. Well, the solution is easy: the Final Tiles Grid Gallery algorithm will enlarge the image until it perfectly fit the boundaries of the gallery. You’re probably thinking: “How bad is that? The image will loose its quality and it will be blurred!”. Well, no it won’t loose its quality, because images are already scaled down just to prevent any loss of quality in such cases. So let’s see the gallery now:
9
Final Tiles Grid Gallery
www.greentreelabs.net
Ok, I think you're beginning to understand how it works, aren’t you?
10
Final Tiles Grid Gallery
www.greentreelabs.net
Let’s place the last image:
TA-DAAAA!! Ok this is a very simple case but I needed you to understand how Final Tiles Grid Gallery works.
11
Final Tiles Grid Gallery
www.greentreelabs.net
Improving the grid Under some circumstances, the Final Tiles Grid Gallery’s algorithm tends to arrange the images in columns. That happens because of the different height of the images. Look at this example:
This is the start of a gallery, and you can see the 4 images at the top, each one has a different height. This situation leads to a multi-column layout. Look at the transparent images and see how they’re caged inside these “virtual” columns. So, how can we build a better grid? We have to accept a compromise. If we crop vertically just few pixels we can have a higher chance to get the images aligned at bottom. We can see how the setting Grid size affects the overall looking of the gallery.
12
Final Tiles Grid Gallery
www.greentreelabs.net
The following gallery has Grid size set to 5:
13
Final Tiles Grid Gallery
www.greentreelabs.net
Now see the result with the same gallery but with ​ Grid size​ set to 20:
14
Final Tiles Grid Gallery
www.greentreelabs.net
Create a gallery Click on Add Gallery under the Final Tiles Gallery menu of your WordPress admin panel.
Write the name of your new gallery (that’s mandatory) and a description. These fields are never displayed on front end. They’re just for your convenience.
15
Final Tiles Grid Gallery
www.greentreelabs.net
Now it’s time to choose the gallery source. Remember that all settings can be changed later.
Media library : you choose the images to show inside the gallery Recent posts with featured image : the gallery will be automatically filled with the featured images of posts. You can choose the kind of content to retrieve: posts, pages, custom posts and what categories or tags. WooCommerce products : the gallery will be automatically filled with the featured images of products.
16
Final Tiles Grid Gallery
www.greentreelabs.net
Image gallery In case you choose media library you’ll need to choose the field of the media to be used as caption and what effect to use on mouse hover:
17
Final Tiles Grid Gallery
www.greentreelabs.net
Now you need to choose the default size of the images you’re going to add:
18
Final Tiles Grid Gallery
www.greentreelabs.net
Now you can add the images from your WordPress media panel. Click Add images :
Hold CTRL or SHIFT to select multiple images.
19
Final Tiles Grid Gallery
www.greentreelabs.net
Click Save and you’re done! In the next chapter we’ll see how to customize the gallery.
20
Final Tiles Grid Gallery
www.greentreelabs.net
Recent posts gallery Final Tiles Grid Gallery is able to create galleries pulling automatically recent posts with a featured image . To create a recent posts gallery choose Recent posts with featured
image from the step 2 of the wizard:
21
Final Tiles Grid Gallery
www.greentreelabs.net
Now you can choose the categories and the tags of the posts you’d like to show in your gallery:
22
Final Tiles Grid Gallery
www.greentreelabs.net
Choose the default size of the images:
This is the size that will be chosen for all posts. If you want to mix a little the sizes you can change the size of each post from the ​ Edit gallery​ panel.
23
Final Tiles Grid Gallery
www.greentreelabs.net
WooCommerce products gallery If you use WooCommerce you can display your products with Final Tiles Grid Gallery. Choose WooCommerce products from the second step of the wizard:
24
Final Tiles Grid Gallery
www.greentreelabs.net
Now choose the categories of the products you want to show inside the gallery:
25
Final Tiles Grid Gallery
www.greentreelabs.net
Choose the default size of the images:
This is the size that will be chosen for all products. If you want to mix a little the sizes you can change the size of each product from the ​ Edit gallery​ panel.
26
Final Tiles Grid Gallery
www.greentreelabs.net
The dashboard The dashboard is the place where you can manage all your galleries:
Each gallery has 4 different available actions: Show permalink , Edit gallery , Clone gallery ,
and Delete gallery .
27
Final Tiles Grid Gallery
www.greentreelabs.net
On the bottom right corner you can see a red button to create a new gallery:
Click it to start the new galley wizard. Obviously you can also click ​ Add gallery​ from the left sidebar:
28
Final Tiles Grid Gallery
www.greentreelabs.net
Editing a gallery Interface overview The edit panel is classified in 7 sections: General , Links & Lightbox , Captions , Hover
effects , Style , Customizations , Images :
Each section contains the fields used to customize your gallery.
29
Final Tiles Grid Gallery
www.greentreelabs.net
To open a section just click on it:
A section can have many fields, so it can be quite long. To make it easier you can directly jump to the desired field by clicking the dropdown list beside the label ​ Jump to setting​ :
30
Final Tiles Grid Gallery
www.greentreelabs.net
As you can see, you have 2 buttons ot the bottom right corner:
The green button on the left is the Update gallery button. I’m sure you already know
when to press it (i.e.: any time you change a setting of the gallery). What about the blue one? The blue button is a shortcut to the sections, try to hover it, you will see an expanded menu:
If you just click the button you’ll jump at the head of the current secion. It’s Handy, isn’it? 31
Final Tiles Grid Gallery
www.greentreelabs.net
Image management Images are managed inside the last section of the editing panel:
The Images section is made up of 3 parts: Source , Image size , and Bulk actions .
32
Final Tiles Grid Gallery
www.greentreelabs.net
Source The first part of this section is a dropdown list with which you can choose the source of the images displayed inside the gallery.
User images : manually add the images Recent posts with featured images : automatically pull images from posts WooCommerce products : automatically pull images from WooCommerce products
Image size From this dropdown list you can choose the default size for the images you’re going to add. If you want more sizes you can add them easily. This article explains how you can do that.
33
Final Tiles Grid Gallery
www.greentreelabs.net
Bulk actions From this panel you can select or deselct all the images or even toggle the selection, i.e.: the selected images will be deselected and the other images will be selected.
If your gallery has filters, you can assign them to images in an easy way. Let’s say our gallery has these filters: Red, Blue, Green. Now we want to assign the Red filter to 3 images: click on those images:
34
Final Tiles Grid Gallery
www.greentreelabs.net
Now click on Assign filters and select the Red filter:
Click on Proceed and you’re done, the selected images now have the Red filter:
The last button ( Remove ) is used to remove the selected images from the gallery. Removed images are not being deleted, they just won’t be part of the gallery anymore.
35
Final Tiles Grid Gallery
www.greentreelabs.net
Images and Videos gallery An Images and Videos gallery is one where you can manually add images or videos and sort them as you like.
Choose User image from the Source dropdown list:
Adding an image Now you’re going to add images and/or videos, so let’s choose the size:
Now click on Add images :
36
Final Tiles Grid Gallery
www.greentreelabs.net
You should now see the WordPress media panel, click the images you want to add. The order of the selection will be the order of the images of the gallery:
37
Final Tiles Grid Gallery
www.greentreelabs.net
We can see the added images:
As you can see they’re all 150x150 because we set that size from the Size dropdownlist.
38
Final Tiles Grid Gallery
www.greentreelabs.net
Edit an image We can choose a size for any image of the gallery, choose an image and click Edit :
The list of the available sizes is under the thumbnail. From this panel you can write the caption, the link to open when the user clicks the image and the target of the link. If your gallery has filters, you can assign a filter also from this panel.
39
Final Tiles Grid Gallery
www.greentreelabs.net
Adding a video Final Tiles Grid Gallery can mix images and videos within the same gallery. To be more precise, the plugin is able to use any content inside an Iframe. So you can embed much more than a video, you can embed an ISSUU document, for example. Click on Add video :
You’ll see the video/iframe popup:
You paste here the embed code you get, for example, from YouTube:
40
Final Tiles Grid Gallery
www.greentreelabs.net
41
Final Tiles Grid Gallery
www.greentreelabs.net
Settings General Name Name of the gallery, it’s never shown on front end.
Description Description of the gallery, it’s never shown on front end.
Width Width of the gallery in pixels or percentage.
Margin Margin between images inside the grid. Enter just the number of pixel.
Image size factor Percentage of image size, i.e.: if an image of the gallery is 300x200 and the size factor is 50% then the resulting image will be 150x100. Why should you use smaller images? Because sometimes images need to be enlarged to avoid gaps. Enlarging a reduced image won’t cause quality loss.
Image size factor Tablet Landscape Image size factor to apply when the viewport is 1024px, tipically for tablets with landscape orientation
42
Final Tiles Grid Gallery
www.greentreelabs.net
Image size factor Tablet Portrait Image size factor to apply when the viewport is 768px, tipically for tablets with portrait orientation
Image size factor Smartphone Landscape Image size factor to apply when the viewport is 640px, tipically for smartphones with landscape orientation
Image size factor Phone Portrait Image size factor to apply when the viewport is 320px, tipically for smartphones with portrait orientation
Custom image size factor In case you need further resolutions, you can use this field to add resolutions with their size factor
Tile minimum width Minimum width of each tile, multiply this value for the image size factor to get the real size.
Images order Choose how to sort images (ignored for Recent posts and WooCommerce galleries): ● User : keep the order you see under the Images section;
● Reverse: reverse the order you see under the Images section; ● Random: randomize the order of the images.
43
Final Tiles Grid Gallery
www.greentreelabs.net
Filters Each gallery can have its own set of filters. Define here all the the filters you want to use for the images of the gallery.
Size of the grid The gallery has an invisible grid made of horizontal lines. Images are vertically snapped and cropped to this grid. The higher the value of this field, the higher the chance to have bottom aligned images (but they can be cropped).
Allow image enlargement Images can be occasionally enlarged to avoid gaps. If you notice a quality loss try to reduce the Image size factor parameter.
Scroll effect Effect of the tiles when scrolling the page
Compress HTML Enable or disable HTML compression, some themes prefer uncompressed, switch it off in case of problems.
44
Final Tiles Grid Gallery
www.greentreelabs.net
Links & Lightbox Lightbox & Links Define here what happens when user click on the images.
Links target Open links in a blank page or not.
Enable Twitter icon Enable Twitter sharing. It will use the caption as text to tweet. It doesn’t shar the image.
Enable Facebook icon Enable Facebook sharing.
Enable Google Plus icon Enable Google Plus sharing.
Enable Pinterest icon Enable Pinterest sharing
Color of social sharing icons Set the color of the social sharing icons
45
Final Tiles Grid Gallery
www.greentreelabs.net
Captions
Caption behavior Captions can have two different behaviors: start hidden and shown on hover or viceversa.
Caption mobile behavior Caption behavior for mobile devices.
Caption full height Enable this option for full height captions. This is required if you want to use caption icons and caption effects other than fade.
Empty captions Choose if empty caption has to be shown. Consider that empty captions are never shown if Caption full height is switched off.
Caption icon Choose an icon to show on hover.
Custom caption icon Use this field to insert the class of a FontAwesome icon (i.e.: fa-heart). See all available icons here: ​ http://fontawesome.io/icons/​ This value overrides the Caption icon value.
Caption icon color Color of the icon inside the captions.
46
Final Tiles Grid Gallery
www.greentreelabs.net
Caption icon size Size of the icon inside the captions.
Caption effect Effect used to show the captions.
Caption effect easing Easing function for the caption animation, works better with sliding animations.
Caption color Text color of the captions.
Caption effect duration Duration of the caption animation.
Caption background color This background is visible only when the parameter 'Allow image enlargement' is set to 'Off' and only when a tile is wider than the contained image
Caption opacity Opacity of the caption, 0% means 'invisible' while 100% is a plain color without opacity.
WordPress caption field WordPress field used for captions. This field is used ONLY when images are added to the gallery, however, if you want to ignore captions just set it to 'Don't use captions'.
47
Final Tiles Grid Gallery
www.greentreelabs.net
Recent posts caption Field of the post used for captions when using "Recent posts" as source.
Max number of words for 'Auto excerpt' Define the maximum number of words of the caption when Recent posts caption is set to Auto excerpt.
48
Final Tiles Grid Gallery
www.greentreelabs.net
Hover effects Zoom Choose the percentage to apply to the size of the image when hovering it. A value greater than 100 will make a “zoom� effect, use a lower value for an opposite effect.
Rotation Choose the degrees of the rotation when the user hovers the images.
Rotate icon Enable the rotation of the icon when the user hovers the images.
49
Final Tiles Grid Gallery
www.greentreelabs.net
Style Border size Size of the border of each image.
Border radius Border radius of the images.
Border color Color of the border when size is greater than 0.
Shadow size Shadow size of the images.
Shadow color Color of the shadow when size is greater than 0.
Additional CSS class on A tag Use this field if you need to add additional CSS classes to the link that contains the image.
50
Final Tiles Grid Gallery
www.greentreelabs.net
Customizations
Value of 'rel' attribute on the link that contains the image. Use this field if you need to add additional CSS classes to the link that contains the image. This is useful mostly to integrate the gallery with other lightbox plugins.
Text before gallery Use this field to add text/html to be placed just before your gallery.
Text after gallery Use this field to add text/html to be placed just after your gallery.
Custom CSS Write just the code without using the <style> tag. List of useful selectors: .finaltilesgallery (gallery container)
.finaltilesgallery .tileinner (tile content)
.finaltilesgallery .tileinner .item (image of the tile)
.finaltilesgallery .tileinner .caption (caption of the tile) .finaltilesgallery .ftgfilters (filters container) .finaltilesgallery .ftgfilters a (filter)
.finaltilesgallery .ftgfilters a.selected (selected filter)
Custom scripts This script will be called after the gallery initialization. Useful for custom lightboxes. Write just the code without using the <script></script> tags
51
Final Tiles Grid Gallery
www.greentreelabs.net
Delay Delay (in milliseconds) before firing the gallery. Sometimes it's needed to avoid conflicts with other plugins.
Show developer link If you want to support this plugin, show the developer link flagging this field.
Developer link text Text for the developer link
Envato username for referral Enter your Envato username to earn money! Receive 30% of the first purchase or deposit of each referred user. You do not need to activate anything else, you are automatically eligible.
52