Tip:
Highlight text to annotate it
X
Hello, my name is Firsh. I'm the creator of Justified Image Grid.
I'm going to show you the plugin settings,
the shortcode editor and the connection between them.
We'll create some galleries too.
Open your dashboard,
find the settings tab,
and click Justified Image Grid.
This is the global plugin settings
that apply for each and every gallery on your site.
There are preset buttons at the top.
Clicking them will update every option
to the preset's own values.
That's all they do.
If you play with the values below,
they won't change the actual preset.
You only used them as an origin point.
The options are split into tabs.
If you want your galleries to look the same,
use these settings instead of shortcode attributes.
They are created by the Shortcode Editor.
To use that, you need to have tinyMCE, the visual editor, enabled.
Go to Users -> Your profile.
Make sure you uncheck 'Disable the visual editor when writing'.
Create a page or a post. Pages -> Add new
Enter a title
On the visual tab, find the purple Shortcode Editor button
and click it.
The settings available here will ony be used by this particular gallery.
They'll overwrite the global settings
that are marked as 'default' all over the place.
For example, when you select a preset here,
the global settings will no longer apply.
Click Create shortcode, then copy from the field on the right.
Paste into the content of your page or post.
Click publish.
If you check out your page now,
you'll see a notice that is normal...
Post doesn't have any attached images (yet).
Click on Add Media
Switch the drop-down list
from 'All Media Items' to 'Uploaded to this page'
Select some files.
You can also drag and drop them!
And click Open.
I'm currently showing you the original method this plugin used
in previous versions of WordPress.
You can use it if you like, as it's somewhat easier than the new way.
If you refresh the tab,
the gallery will appear because it has photos now.
You can re-order the photos here,
and it'll update the gallery on the page.
When you are done, do not insert them into the post, just close this.
To change, click Add Media again,
make sure it's in 'Uploaded to this page' mode and reorder the images.
Click Upload Files and add more photos to the page.
Wait for them to finish uploading,
then go to the page.
If you refresh the tab you'll see the the changed order and the new photo.
The other way was introduced with WordPress 3.5
and is more versatile, but takes longer.
The benefit is that you can choose any picture from the media library.
Click Add Media,
then click Create Gallery.
Select photos from the media library or upload new ones.
Click 'Create a new gallery'.
You can establish a custom order.
Once done, click Insert Gallery.
If you publish the page now,
you'll see a WordPress gallery as usual.
Switch to 'Text' editor.
Then duplicate the gallery shortcode.
On the first line, change the word 'gallery' to 'justified_image_grid'
Use underscores instead of spaces.
The important part is the ids attribute.
My plugin should be above the Wordpress gallery shortcode in order to hide it.
Click Update.
You'll see, that my plugin replaced the WordPress gallery. You are done.
I'm going to show you how to edit the gallery.
Go to the visual editor.
Keeping the blue gallery block is optional,
but it's nice to be able to visually edit the gallery later.
Click on the left button to edit it,
reorder,
add,
or delete images,
then click Update gallery.
Switch to the Text editor.
You'll need to copy the updated ids attribute into Justified Image Grid.
Update and you're done.
Here is how you can edit the shortcode.
Go to the Visual editor.
Select
Copy
open the Shortcode Editor,
paste the shortcode at the top.
The settings from the shortcode are automatically loaded into the editor.
You can see the ids field is already populated.
You can conveniently make changes or add new options, attributes in this window.
For example, choose a preset.
Click Create shortcode,
copy
then replace the old one in your page.
Update
Look at the page, the images are now shown with your chosen preset.
Stay tuned for more episodes where I dig deeper into customziation.
I'll show you other image sources like NextGEN gallery, Facebook and Flickr.
Thank you for watching this, I'll see you next time.