Media Grid

Once installed and activated you will be moved to the LCweb Dashboard.
It contains the summary of all LCweb projects with useful links and prompting you to validate them.

In fact you must link your domain with your license. The procedure is very quick:

1. Go to the LCweb License Hub and register
2. Login and navigate to the related product section
3. Add a new license specifying the purchase code and the domain you will use it onto

4. The system will give you an activation token

   

5. Use it in the LCweb Dashboard, on your website

Specfic Notes:

Grid max width

This option only affects thumbnails. There you have to define which will be the maximum width your grid will have.
Default value is 1200px but if using grids in a fullwidth context, you should increase the value (eg. 1900px) to avoid fuzzy images.

Filtered items pagination

Please note is not possible to use the automatic infinite-scroll system in that context because of potential interferences due to page size changes

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.
It's essential for SEO, since is the only hook search engines can use to reach item contents. Disable it 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 or multisite installations

Thumbnails Engine

Here you can switch among Easy WP Thumbs (the best and default option), Timthumb or also use WordPress thumbnails. Change it only if you've got issues with thumbs creation

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 javascript in "head"?

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

In following sub-chapters you will learn how to create items that has to be used in grids.
However there are some common notes applying to any item:

Custom Attributes

Custom attributes are always optional.
Leaving an option field empty, it simply won't be displayed.

Full-size image control

These settings are relative to the each lightbox image. Through them you can control images height to avoid extra-sizing in vertical contexts.
Setting maximum height in pixels, images 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 you can set a maximum width for items ligthbox.
Content will be resized accordingly to the value you set. (minimum 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.

Grids can be also filled with existing posts. 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

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, you have to choose whether to create a manual or dynamic grid. Here are few common notes:

"auto" height

Using this option, item's height will be calculated basing on its featured image. Use it to avoid image crops.

It is supported only by items showing a static image (eg. 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.

For any other builder or using the old WordPress editor:

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" 
    mf_lightbox=>"1",
    mobile_tresh="800"
    
    cell_margin="10"
    border_w="6" 
    border_col="#4dcf4a" 
    border_rad="4" 
    outline="1" 
    outline_col="#c73730" 
    shadow="1" 
    txt_under_col="#ededed"
]

Specfic 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.

Media-focused lightbox

Using this option, you'll enable the media-focused lightbox mode in the grid.
By default the parameter follows the global option, defined in settings.

Custom Treshold

Allows you to alterate the mobile treshold. Then you can use desktop layouts also on tiny grids.

Customizations section

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

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.

Media Grid borns as a portfolio plugin, however from v7 it got the ability to populate grids with WP Library images and the media-centric lightbox mode. Therefore it can operate as a sort of photogallery.

So, it worths explaining the main lightbox differences and how to manage them.

Content-focused lightbox mode

It's the default mode, the one always used from Media Grid since 2012.
Suggested if you have to show long and complex contents.

Lightbox sizes are defined in settings and do not change in relation to lightbox media contents.
No height limit, in case of tall medias or long texts, the user has to scroll down in the page.

Media-focused lightbox mode

Introduced in v7, emulates classic lightboxes behavior by changing its sizes depending on the media shown.
Text is placed on right/left side and lightbox height is limited to the screen's height.

On mobile, obviously, texts will be placed under the media and users will have to scroll down to see it.

This mode can be enabled globally through the related settings option or individually for each grid, through the sortcode wizard (or builders module)

They can be enabled in settings > Lightbox > Comments.
Supported systems are Disqus and Facebook Comments

Disqus

Its 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 automatically inserts 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

The plugin is 100% multilanguage for both front and back ends. 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!

How to create a translation

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

Otherwise: go in the plugin folder, then open the one named "languages".
Inside you'll find the default.pot file. It contains english strings to be translated.

If you want to create or customize one your language translation, follow these steps:

1. Open the default.pot file with POedit
2. Edit the catalog by inserting your data and setting translation's language
3. Save the file with your language's i18n identifier and "mg_ml-" prefix (the italian example is mg_ml-it_IT)
4. Go to plugin's folder ".. wp-content/plugins/media-grid/languages" and paste resulting .PO and .MO files

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

If you create new translations, please contact me at [email protected] sending your .PO and .MO files.
Otherwise they will be lost in next updates. Thanks!

WPML / Polylang guidelines

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

qTranslate guidelines

1. Translate item categories
2. Translate items