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!

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.




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.

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.

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.

media manager

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

slider image videos

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
track title


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)
items lb max width

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.

thumbnail center

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

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

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.

pagination block


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.

spacer block

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

easy sorting mode
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.

1-step_move_builder
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.

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.

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:

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:

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