Hybrid Gallery

Contents

1. Installing the Plugin

2. How to create a Gallery

3. How to edit the Gallery.

4. How to create a Template

5. How to create filtered Gallery

6. How to add titles to image

7. How to set Pages (pagination) for images

8. How to set video instead of image for Lightbox

9. How to make gallery responsive

10. How to load Gallery in PHP

11. How to create aligned Gallery with custom width and text

12. How to copy the Gallery

1. Installing the Plugin

After you have purchased the hybrid gallery plugin, you will recieve plugin file in .zip package.

1) To install the plugin, go to Admin Panel > Plugins

2) Click the "Add New" button > then "Upload Plugin" button.


3) select .zip package & click "Insall Now". After that activate the plugin and start to use it.


2. How to create a Gallery

1. Open Admin Panel and add new page/post.


2. Click on button "Hybrid Gallery".


3. It will open some ready layout types. Choose one of them on it.


4. Next add images to panel. Click on "plus" button.


5. Select images and click "Insert".


6. After that select options that you want and click "Insert".


7. It will create visual shortcode in editor. You can edit, copy or delete it.


That's all.

View all layouts in official wordpress gallery site: https://hybrid-gallery.com



3. How to edit the Gallery.

Once you have created a gallery, you can edit it by clicking on "pencil" icon.

Then select new options and click "Insert" button.

Official gallery website: https://hybrid-gallery.com


4. How to create a Template

For example if you've selected some options & want to use it multiple times, but tired of each time customization, you can save options as template and load it with one click.

1) To save the options, click "Save Template" button.


2) Enter template name and click right icon.


3) After panel will notify that the template was saved.


4) To open template list, click on "Templates" (at the top).


5) Click on template name that you want to load.


5. How to create filtered Gallery

You can filter images by categories (tags).

1) First you need to add tags to each image.

There is a custom field: "(Hybrid Gallery) - Filter" for attachments.

Tags must be comma separated tags.

2) After that turn on Filter option (in Extra tab).


Official gallery website: https://hybrid-gallery.com

6. How to add titles to image

Hybrid Gallery plugin uses default WordPress attachment fields to display title & description.

Official gallery website: https://hybrid-gallery.com


7. How to set Pages (pagination) for images

You can break images into pages (pagination). 

1) In "Hybrid Gallery" options panel open Pagination tab.

2) Enable pagination option.


There are multiple types of pagination:

  -- Numeric: Pages with numbers,

  -- Classic: Previous and Next pages,

  -- Show More: Add new images by clicking on "show more" button,

  -- Scroll: Add new images on scroll: "infinite scroll".

For NumericClassic types you can enable "AJAX" mode, which means that the pages will be load without refreshing.


Images per page: here you can set number of images to show per page.

Official gallery website: https://hybrid-gallery.com


8. How to set video instead of image for Lightbox

You can set video (from YouTube/Vimeo) instead of image to show in lightbox.

Hybrid Gallery has its own extra fields for attachments.

You need to select:

  -- (Hybrid Gallery) - Default Type: Video

 -- (Hybrid Gallery) - VideoYour URL

Official gallery website: https://hybrid-gallery.com


9. How to make gallery responsive

Hybrid Gallery is fully responsive for all screens and devices. But by default responsive options are turned off. o you need to select your custom responsive options.

Let's make responsive grid gallery.

1) Click on "Hybrid Gallery" button.


2) Select Grid layout.


3) Add images and select options. For example if you've selected 4 columns for gallery, you need to select columns for other screen sizes too.


4) Go to Responsive tab and select:


  -- 3 Columns for <=768px screens,

  -- 2 Columns for <= 600px screens,

  -- 1 Column for <= 480px screens.

This screen sizes are not required and you can set your own screen sizes (e.g. 850px instead of 768px).


And now gallery is responsive.


Official gallery website: https://hybrid-gallery.com

10. How to load Gallery in PHP

If you want to load gallery in php, you need to paste gallery code in do_shortcode function.

For example, if gallery code is: 

[hybrid_gallery_grid ids="4619,4618,4610,4615,4614,4599,4613,4612,4616,4607,4617,4611" layout="grid" metro_style="1" size="equal" ratio_w="1" ratio_h="1" cols="3" rowheight="240" max_rowheight="-1" lastrow="nojustify" gap_x="10" gap_y="10" color="#b90000" style="1" meta_title="false" meta_descr="false" click_action="lb" link_tg="same" buttons="false" lightbox="mp" pagination="false" pg_type="more" pg_ajax="false" pg_posts="10" filter="false" animation="fadeInUp" preloader="1" ct_w_vl="100" ct_w_un="pc" ct_align="none" custom_class="" custom_id="" res="{#1024#:{#w#:#auto#,#w_vl#:#100#,#w_un#:#pc#,#cols#:#auto#,#align#:#auto#},#800#:{#w#:#auto#,#w_vl#:#100#,#w_un#:#pc#,#cols#:#auto#,#align#:#auto#},#768#:{#w#:#auto#,#w_vl#:#100#,#w_un#:#pc#,#cols#:#auto#,#align#:#auto#},#600#:{#w#:#auto#,#w_vl#:#100#,#w_un#:#pc#,#cols#:#auto#,#align#:#auto#},#480#:{#w#:#auto#,#w_vl#:#100#,#w_un#:#pc#,#cols#:#1#,#align#:#auto#}}"]

You need to paste the code in php in this way:

<?php 
    echo do_shortcode('[hybrid_gallery_grid ids="4619,4618,4610,4615,4614,4599,4613,4612,4616,4607,4617,4611" layout="grid" metro_style="1" size="equal" ratio_w="1" ratio_h="1" cols="3" rowheight="240" max_rowheight="-1" lastrow="nojustify" gap_x="10" gap_y="10" color="#b90000" style="1" meta_title="false" meta_descr="false" click_action="lb" link_tg="same" buttons="false" lightbox="mp" pagination="false" pg_type="more" pg_ajax="false" pg_posts="10" filter="false" animation="fadeInUp" preloader="1" ct_w_vl="100" ct_w_un="pc" ct_align="none" custom_class="" custom_id="" res="{#1024#:{#w#:#auto#,#w_vl#:#100#,#w_un#:#pc#,#cols#:#auto#,#align#:#auto#},#800#:{#w#:#auto#,#w_vl#:#100#,#w_un#:#pc#,#cols#:#auto#,#align#:#auto#},#768#:{#w#:#auto#,#w_vl#:#100#,#w_un#:#pc#,#cols#:#auto#,#align#:#auto#},#600#:{#w#:#auto#,#w_vl#:#100#,#w_un#:#pc#,#cols#:#auto#,#align#:#auto#},#480#:{#w#:#auto#,#w_vl#:#100#,#w_un#:#pc#,#cols#:#1#,#align#:#auto#}}"]');
?>

Official gallery website: https://hybrid-gallery.com

11. How to create aligned Gallery with custom width and text

It is possible to set Gallery

  -- alignment: left, right, center or none.

  -- width: in pixels (px) or in percent (%)

Let's see what will be if we set align: left and width: 50%.

In panel we must set:

And here is the result.


You can set responsive options for gallery too. It requires for small screens. So set width: 100%, align: none if screen size is smaller than 600px.

Official gallery website: https://hybrid-gallery.com

12. How to copy the Gallery

Once you've created a gallery, you can copy and paste in other place. You just need to click on "copy" icon.

Official gallery website: https://hybrid-gallery.com