# Media Grid - Wordpress Plugin

By: | LCweb
Website: | https://lcweb.it
E-mail: | support@lcweb.it

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please check my support platform. Thanks so much!

### Installation

#### PRIOR NOTE:

Is important to check whether your system is ready to create thumbnails. Simply go in Media Grid settings and at the end of the first tab you will find "Easy WP Thumb - Connection Information" panel, informing you about the status.
To maximize performance, is strongly suggested to display your grids once you've created them, to allow thumbnails cache.

### Quick Setup

#### Notes:

Grid max width

  This option only affects thumbnails. Here you have to specify the maximum width of your grid. The default value is 1200px but if you are using grids in a fullwidth contect, you should increase the value (eg. 1900px) to avoid fuzzy images.

Filtered items behavior

  Filtered items behavior can be changed from the standard masory's one "hide and reorder" to a more static "change opacity".

Deeplinked elements

  This system creates a dynamic URL basing on selected filter, search, pagination and opened item. Is useful to link directly items or grid configurations.
  Essential for SEO, since is the only hook search engines can use to reach item contents. Disable only if conflicts with your theme.

Items XML sitemap

  Media Grid offers also an XML sitemap, to be used in specific SEO environments (eg. Google Wemaster Tools) to let search engine know about items existence.
  Is a special sitemap, containing also items featured image.

Use custom CSS inline?

  Bypass dynamic CSS file creation. Useful for websites hosted on restricted servers

Use Easy WP Thumbs forcing system?

  Checking this, you'll enable Easy WP thumbs forcing mode, useful to override certain server restrictions. Do that ONLY IF you note missing thumbnails or a grid is not showing

Use TimThumb?

  This option switch off Easy WP Thumbs and enable Timthumb for the thumbnails creation. To be used only if you have issues with thumbs creation

Use javascript in "head"?

  To solve some incompatibility issues you can turn it on and put the javascript in your website header. Do this ONLY IF you notice problems.

### Item Categories and Custom Attributes

#### Notes:

Item Attributes

  WARNING: deleting or renaming attributes, also related field in item's editor page will be cleared. Only uppercase/lowercase changes avoid this.

### Create Grid Items

#### Static and single image item types:

#### Sliders and Lightbox video item types:

Slider height

  The slider heigh in PERCENTAGE value is always referred to slider width. This to maintain always the same aspect ratio also on small screens. For example if you set an height of 50% and the slider is 1000px wide, the height will be set to 500px

Add captions to slider images

  You can show a caption for each slider image. They are taken from the Description field of the image.
  You can reach that field from the media archive of your wordpress installation or from the "Manage Images" button of media-grid.

Attach videos to slider images

  You can attach Youtube and Vimeo videos to lightbox slider images. Just copy the video URL into the wizard, clicking on the "play button" of selected images

Video - Self hosted videos

  You can also display the videos uploaded on your website. Supported formats: mp4, m4v, webm, ogv, wmv
  Player supports multiple formats at the same time to guarantee cross-browser compatibility. Use video URLs split by a comma

#### Inline video, Audio, Custom content item types:

Audio type - Soundcloud

  Paste the track's URL into the related field. If something is typed, the tracklist will be ignored

Audio type - tracks

  The title shown in the grid item is the one specified in the wordpress media library

#### Post Contents item type:

Post type integrations

  This item typecan fetch contents from any post type having an editor in WP (e.g. posts, pages, but also woocommerce products).
  The essential requirement is to have at least a taxonomy associated to the post type.

WooCommerce products

  Using WooCommerce products as source, shown items will be directly referred to the Woo product.
  This means that lightbox layout and attributes must be set in that product, through the Media Grid options box.

#### Item Notes:

Custom Attributes

  Custom attributes are always optional. If leaving an option field empty, it simply won't be displayed in the item description

Full-size image control

  These settings are relative to the each image that is shown in the lightbox. With them you can control the images height to avoid extra-sizing in vertical images.
  Setting the maximum height in pixels, image exceeding this value will be cropped. Leave this field empty to use full image.

Item's lightbox max-width

  In order to avoid issues using portrait and landscape images now you can set a maximum width for the lightbox of each item.
  The content will be resized accordingly to the value you set. (minimum value is 320px)

Set thumbnail's center

  Clicking on wizard you can select with ease the center of the thumbnails that will be shown in the grid.
  By default the center of the image will be used.

### Using Existing Posts

Since version 6, grids can be also filled with existing posts. Only requirements are:

- being part of a public post type associated with a taxonomy (eg. WP posts are associated with categories)
- posts must have a featured image

Posts will be fetchable in grid builder selecting the related post type

Posts will be managed as SINGLE IMAGE items, with attached lightbox.
However you can turn them into a direct link item through the related option, in "edit post" page.

In fact every post has got an own panel with specific options, similar to the one used in Media Grid items

### The Grid Builder

As first, click on "Add new grid" and create your first grid inserting its name

Once added, you'll be able to delete, clone and rename it directly in the grids dropdown.
Then, since version 6, you have to choose whether to create a manual or dynamic grid

#### Manual grids:

Pagination block

  Adding this block, you enable the grid pagination. Basically is a 100% wide block you can freely move in the builder to split items as you prefer.

#### Dynamic grids:

#### Common notes:

"auto" height

  Using this option, item's height will be calculated basing on its featured image. Then use it to avoid image crops.
  It is supported only by items showing a static image (for example inline slider and video aren't included). In manual grids you won't be able to choose it, while in dynamic ones you'll have to setup a fallback for possible items not supporting "auto" height.
  One for desktop and one for mobile modes.

  In the builder "auto" height items are rendered as a 1/4 for technical reasons

Spacer block

  On top of "Grid Structure" section you find a button to insert spacers into the grid.

  They are essentially empty spaces, used to add gaps between grid items. Once adde, you can also choose to show them only in desktop or mobile mode: this option automatically reflects in the builder.
  To manage an hidden spacer, just switch grid's mode.

Easy sorting mode

  Mainly addressed to grids having many items of similar shapes, it allows fast sorting without masonry involvement

1-position move buttons

  Sometimes things can become complex using drag&drop items positioning. Using these buttons you'll move them one position backwards or forwards.

Grid preview

  You can preview the grid you are building without placing it on a page. Before you have to set preview container's page in plugin settings.
  Remember to save the grid before previewing it.

### Grid Shortcode

Media Grid is also natively integrated with Elementor, Visual Composer and Cornerstone. If you have them installed you can skip the standard shortcode wizard and use the related Media Grid tool.

Here's a demo shortcode with all possible parameters

    [mediagrid
        gid="5"
        title_under="1"
        pag_sys="standard"
        search="1"
        filter="1"
        filters_align="left"
        hide_all="1"
        def_filter="15"

        cell_margin="10"
        border_w="6"
        border_col="#4dcf4a"
        border_rad="4"
        outline="1"
        outline_col="#c73730"
        shadow="1"
        txt_under_col="#ededed"
    ]

##### Notes:

Filters alignment

  Enabling filters now you can choose where to place them. On top, by default, or on item sides.

Enable search

  Using this option, you'll enable the search bar. Its position will change accordingly with filters.
  Search bar is described in next documentation's chapter.

Customizations section

  Gives you the ablility to set individual values for grid aspects (margins, borders, etc), overriding default ones.

### Search Bar

Media Grid has got a search bar to easily find items in grids.
It is enabled in the shortode wizard and aligned accordingly with filters.

By default the search will be performed on item titles. However you can improve the search results using the helper, in "Edit Item" page.
Here you can write words that will be added to searchable elements. Remember that minimum length for searchable words is 2 characters.

### Item Comments

From v5.1 you can allow visitors to add comments for items displayed through lightbox.
They can be enabled in settings > Lightbox > Comments and supported systems are Disqus and Facebook Comments

#### Disqus

Integration is really simple: just insert the shortname. Style, moderation and details are managed directly on Disqus

#### Facebook Comments

This requires multiple steps and more skills:

- create a new app and paste its ID into the related field

- Media Grid inserts the Facebook meta into the website to link comments to your app

- before launching comments, be sure to have set moderators here clicking on "settings"

- If everything is ok, moderators will see the moderation label on top of comments form and you will receive notifications through the app

### Localizations

The plugin is 100% multilanguage both for the front and the back-end. If a translation of your language has been created, Wordpress will automatically switch between languages. Plus it is WPML certified and compatible with Polylang and qTranslate!

Create a translation

If you have WPML + String Translation add-on or Polylang you can simply scan the plugin and translate via its UI all the plugin strings.

Otherwise: going in the plugin folder, then in the one called "languages". Inside you'll find the default.pot file. It contains all the english elements that have to be translated. If you want to create one in your language follow this steps:

- Open the default.po file with POedit
- Modify the Catalog by inserting your data and the translation language
- Save the file with the i18n identifier of your language and the prefix "mg_ml-" (the italian example is mg_ml-it_IT)
- Go to the plugin folder ".. wp-content/plugins/media-grid/languages" and paste the .po and .mo files that POedit has created

To translate the item type options you necessarily need to use the WPML string translation plugin or Polylang.

If everything goes right, you will be able to use your translation.

If you create new translations, please, contact me at support@lcweb.it sending the .PO and .MO files.
I will put it in the new releases and mention you in the changelog. Thanks

##### WPML / Polylang guidelines

1. Translate item categories
2. Duplicate items
3. Disable auto-sync with original language and translate elements

##### qTranslate guidelines

1. Translate item categories
2. Translate items