final tiles grid gallery for wordpress

www.greentreelabs.net

Final Tiles Grid Gallerywww.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


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


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


5


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


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


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


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


Ok, I think you're beginning to understand how it works, aren’t you?

10


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


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


The following gallery has Grid size set to 5:

13


Now see the result with the same gallery but with Grid size set to 20:

14


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


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


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


Now you need to choose the default size of the images you’re going to add:

18


Now you can add the images from your WordPress media panel. Click Add images:

Hold CTRL or SHIFT to select multiple images.

19


Click Save and you’re done! In the next chapter we’ll see how to customize the gallery.

20


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


Now you can choose the categories and the tags of the posts you’d like to show in your

gallery:

22


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


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


Now choose the categories of the products you want to show inside the gallery:

25


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


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


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


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


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


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


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


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

http://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/


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


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


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


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


We can see the added images:

As you can see they’re all 150x150 because we set that size from the Size dropdownlist.

38


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


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


41


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


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


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


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


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

http://fontawesome.io/icons/


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


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


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


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


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


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

final tiles grid gallery for wordpress

Documents