Most people are looking for Recent posts, so the feature is called like that. It's not really limited to "recent" nor "posts". Everything in WordPress is a post, the pages, the custom post types such as theme portfolios or WooCommerce products. Justified Image Grid can display any WordPress content by its featured image. The Recent posts feature in the admin area acts as an interface to otherwise complicated server-side queries. The good news? You don't need to worry about any of that, all is taken care for you. Focus on what you do best, like creating content, adding pictures. Let JIG show your fresh content on the homepage or anywhere you like.
As you have noticed, features in Justified Image Grid are well customizable. Recent posts is no different. You have all visual styles available for Recent posts, so this page mainly focuses on their behavior. How you define what content to see in the grid and exactly what can you display on the thumbnails. The admin area's relevant tab is split into the same logical sections.
What to display as caption on the thumbnails?
Basically ANY data associated with your post can be shown.
This includes all built-in WordPress post metadata, taxonomies, and of course your custom fields.
- <a href="https://justifiedgrid.com/example-post/pleasant-date/" title="Food, Strawberry, Woman
November 13, 2014
And that's why I smile. It's been a while. Since every day and everything has Felt this right. And now you turn it all around. And suddenly [...]">
A pleasant date
Food, Strawberry, Woman
November 13, 2014
And that's why I smile. It's been a while. Since every day and everything has Felt this right. And now you turn it all around. And suddenly [...] - <a href="https://justifiedgrid.com/example-post/photoshoot-sunny-field/" title="Field, Sun, Woman
February 13, 2014
The story starts when it was hot and it was summer. And, I had it all; I had him right there where I [...]">
On a sunny field
Field, Sun, Woman
February 13, 2014
The story starts when it was hot and it was summer. And, I had it all; I had him right there where I [...] - <a href="https://justifiedgrid.com/example-post/today-fairytale/" title="Brunette, Green dress, Woman
April 17, 2013
But can you feel this magic in the air? It must have been the way you kissed me. Fell in love when I saw [...]">
Today was a fairytale
Brunette, Green dress, Woman
April 17, 2013
But can you feel this magic in the air? It must have been the way you kissed me. Fell in love when I saw [...] - <a href="https://justifiedgrid.com/example-post/lift-feet-ground/" title="Barefoot, Brunette, Field, Woman
August 24, 2012
I watched from a distance as you made life your own. Every sky was your own kind of blue. And I wanted to know [...]">
You lift my feet off the ground
Barefoot, Brunette, Field, Woman
August 24, 2012
I watched from a distance as you made life your own. Every sky was your own kind of blue. And I wanted to know [...]
This conventional example shows title, tags, date, and an automatic excerpt.
The above example uses the following, generated shortcode (how to use):[$justified_image_grid row_height=300 caption=reverse-fade caption_opacity=1 caption_bg_color=rgba(109,76,52,0.1) caption_text_shadow="0 0 3px rgba(0,0,0,0.6)" overlay=off inner_border_width=1 inner_border_color=rgba(0,0,0,0.1) specialfx=captions specialfx_type=blur caption_fx_visibility=in_front_of_overlay specialfx_options=amount:3 specialfx_blend=0.8 recent_posts=yes recents_description=custom_taxonomy_example-tag recents_description_2=date recents_description_3=auto_excerpt excerpt_length=22 recents_filter_tax=example-tag recents_filter_term=woman recents_post_type=example-post]
You have two caption areas: title and description. Title is just your post title or product name and it appears first. Rewrite post title to a custom field's value (for complete control). The lower, description area has 3 slots. Pick the options below in any order. Choose the same option 3 times if you prefer (useful for taxonomies, custom fields).
Short and simple description options
- Tags, categories, custom taxonomy (recognized by JIG).
- Date and time.
- Date only.
- Nice time: "X hours ago".
- Comments count (rewrite the word "comments").
- Author name with custom prefix: by John (rewrite "by").
- WooCommerce product price, according to your price format.
Longer description options
- Automatic excerpt: a short teaser with the first X words of the post. Change the word count and the text clipping […]
- Manual excerpt: on posts, you have this WordPress native field called "Excerpt", use it to show a teaser on the thumbnails.
- Auto/manual: mix of the above two. If you filled out the manual excerpt field then it overrides the automatic excerpt.
- Custom fields. It is useful to display the SEO Meta description when using WP SEO plugin by Yoast. Or if you have a real estate address, costume designer name, photographer name, wedding date... It's entirely up to you to use or even have them on your posts or custom posts. Create your own post types and custom data fields with the WCK plugin.
Filter/narrow what posts to show
Greatly influence what Justified Image Grid shows. You are not limited to just the recent posts, though that's the default.
- <a href="https://justifiedgrid.com/example-post/bouquet-flowers/" title="Don’t say "Yes", run away now.
I’ll meet you when you’re out of the church at the back door.
Don’t wait or [...]
Song lyrics found by Firsh">
A bouquet of flowers
Don’t say "Yes", run away now. I’ll meet you when you’re out of the church at the back door. Don’t wait or [...]
Song lyrics found by Firsh - <a href="https://justifiedgrid.com/example-post/whisper-bridesmaid/" title="Romeo, save me, I've been feeling so alone.
I keep waiting for you but you never come.
Is this in my head? [...]
Song lyrics found by Firsh">
Love story
Romeo, save me, I've been feeling so alone. I keep waiting for you but you never come. Is this in my head? [...]
Song lyrics found by Firsh - <a href="https://justifiedgrid.com/example-post/secret-bridesmaid/" title="Moving slowly into the setting sun.
Keeping secrets away from everyone.
Staring out into another world.
Tide is rising, but time is standing [...]
Song lyrics found by Firsh">
Secret of the bridesmaid
Moving slowly into the setting sun. Keeping secrets away from everyone. Staring out into another world. Tide is rising, but time is standing [...]
Song lyrics found by Firsh
This example shows posts that all have the "Wedding" tag, sorted alphabetically. Automatic excerpt is a teaser from the post. The author name is displayed with a custom prefix: "Song lyrics found by".
The above example uses the following, generated shortcode (how to use):[$justified_image_grid caption=mixed caption_opacity=1 caption_bg_color=rgba(255,243,207,0.7) caption_text_color=black caption_text_shadow="0 1px 0 rgba(255,255,255,0.3)" specialfx=captions specialfx_type=blur specialfx_options=amount:1 orderby=title_asc recent_posts=yes recents_description=auto_excerpt recents_description_2=author excerpt_length=20 author_prefix="Song lyrics found by " recents_filter_tax=example-tag recents_filter_term=wedding recents_post_type=example-post]
Certain general settings are very useful for Recent posts. Mostly the order and the limit (number of posts). By default 50 posts are shown from latest to oldest, while you can change these to anything you wish.
Only show posts...
- ...with certain post IDs. This is most useful when using JIG as a PHP template tag. It can connect any 3rd party plugin's output to JIG (with a little effort). Also you can use this when you wish to replace standard WordPress archive pages in your theme.
- ...from the desired categories.
- ...from all categories except those you specify.
- ...that match certain tags (can be combined with category settings).
- ...that match your terms in a custom taxonomy (they are recognized by JIG).
- ...that are written by a specific author.
- ...that are sticky (WordPress native feature). Or exclude all stickies.
- ...that don't have certain IDs (exclude by ID).
Advanced date queries (only since WP 3.7+)
- Show content published in the last X days. You can change X.
- Only show posts from a specified date range.
Show children of a page (advanced)
- Useful if you have a "silo site" (SEO term), or a tree style site structure with parent and child pages. Show posts that are children of a hub page. This site uses this for index pages, such as Built-in presets or WordPress Media Library page.
Recent posts behavior and lightbox related options
These influence how you get to the content from the thumbnails. What happens on click?
Preset 8: Big images no click
Almost transparent overlays and very light, thin captions. Large thumbs so you can get away without a lightbox.
Preset 2: Author's favorite
The dark background is a feature of the theme. Your gallery will be on the background you have for your content. This preset is best on a dark page.
Preset 18: Vertical creative
A little bit more creative approach to the vertical centering. You can change the colors, this is just a sample (you are not limited to purple, of course).
Preset 7: Color magic fancy style
How far will you go? Have vivid colors all over, whatever fits your style! Use strong styles to deliver your message.
Preset 14: Animated border and glow
An impression of growing photos is achieved by a retracting border. The glow boosts the light areas of the images further than the original picture. Works well on dark and nature photos.
Preset 17: Vertical center
The text is aligned to the center of the thumbnails both horizontally and vertically. It's a quick way to using this style of combined settings.
Preset 4: Google+ style
This uses bigger images so they show detail even without opening them. Captions are light, animation is very quick.
Preset 1: Out of the box
Random order is entirely optional, it's only for demonstration purposes. The gallery takes up as much space as it can, however the 100% width is a feature of the theme.
Preset 20: Caption below the thumbs
Caption height is adjustable to accommodate most of your text. Excess words are automatically trimmed with ellipsis… Links are supported in the text as it's not part of the thumbnail's link.
Preset 10: Hidden
There are 20 images, but only up to 10 are shown and the rest is available in the lightbox. Incomplete rows get hidden. Great for Facebook or other sources with many photos.
Preset 5: Fixed height, no fancy
Rows have fixed height like Google image search. A little cropping occurs to make it happen. Animation and text are off by default.
Preset 6: Artistic-zen
A smooth and calm look for you to enjoy. Light captions with everything desaturated even on hover.
Preset 19: Caption fun, gray background
Captions can also have the background only behind their title text. A gray area appears during loading as a placeholder for each picture.
Preset 11: Magnifier blur
A very strong orton effect blurs the thumbnails while the original edges are somewhat see-through.
Preset 3: Flickr style
Similar to what you see on Flickr nowadays, in terms of general look & feel. Quick animations, no overlay.
Preset 15: Borders and shadow
This preset has five effects on and around the pictures: inner/outer shadow and inner/middle/outer border. All used together to yield a familiar, framed look.
Preset 16: Facebook inspired
The very thin inner border is inspired by Facebook. Elegant, sliding captions and magnifying glass complete the picture.
Preset 9: Focus on the text
The bigger and stronger captions are in focus now. Thumbs desaturate and darken on hover to pave the road for the slide-in description.
Preset 12: Author's other favorite
The effects and inner shadows gently fade away as you bring the mouse over. The result is nicely highlighted in the dark environment.
Preset 13: Orton effect
Simulated orton effect works by mixing the blurred picture with the original. Reverts on mouse over! In photography the effect is stronger due to using different photos.
This demonstrates an alternative preset index page. Random order and small thumbnails with only the post title visible on a fully painted overlay. They open a gallery in the lightbox where you can read the automatic excerpt and find a link to the content: check out each preset. This shows that you can, and often should combine Recent posts with Load more. Yes, this grid is a bit wild to show variety.
The above example uses the following, generated shortcode (how to use):[$justified_image_grid thumbs_spacing=1 row_height=100 height_deviation=50 caption_field=off caption=fade caption_opacity=1 caption_bg_color=transparent caption_text_color=white v_center_captions=yes overlay=hovered overlay_color=#e2458f overlay_opacity=1 lightbox=foobox mobile_lightbox=foobox orderby=rand aspect_ratio=2.35:1 disable_cropping=yes load_more=once load_more_text="Show every preset!" load_more_count_text=none load_more_limit=8 recent_posts=yes recents_description=auto_excerpt excerpt_length=50 recents_post_type=page recents_link_to=image recents_link=alt recents_link_text="Click here to check out this preset!" recents_parent_id=6741]
- Click on a thumbnail opens the post right away, as the default behavior. However it can also open a lightbox first, so your viewers can better gauge their interest in your content. Additionally, the thumbnail can link to the attachment page of the featured image.
- Once you have a lightbox open, it's useful to have a link in there to actually go to the post, so there is a toggle for this link.
- Rename the link, for example "Go to the post", "Read more", "Buy" etc.
- Should you miss a featured image on some posts, they would not show up in the grid. Fill this gap with a placeholder image.
- Just in case you use custom links on featured images too, you can decide if they are taken into account for Recent posts.
Advanced usage scenarios (for developers)
These features are purely coincidental. They arose from an idea that assumes certain conditions on your installation. The ideas here are not out of the box features, just eyeopeners for those looking for something like these.
Most of these ideas rely on the fact that a 3rd party script does the "hard work" of creating a list of posts that match certain criteria. Then instead of showing them the usual way, use Justified Image Grid to display the result. This is done by passing the post ID list (e.g. 100,101,102) to a PHP template tag, that you can generate in the Shortcode Editor.
Replacing search results / paginated archive pages
For this you would modify your theme's search.php or archive.php file (preferably use a child theme). Find the loop and use it only to create a comma separated list of IDs. After the loop, insert the JIG template tag with the Post IDs setting receiving the variable with the list. Learn how to do this in the FAQ: Show search results with Justified Image Grid?
Non-paginated archive pages
Another way would be letting JIG do the "hard work" and fetch the content. You can use get_queried_object() to determine what the current archive is trying to display. It will have the taxonomy and the term ID as most important properties. What you need to do is pass these to a JIG template tag as the Filter by taxonomy and Taxonomy filter term settings. You'd insert this in place of the loop in archive.php - and get rid of pagination. You might want to use Load more or Infinite scroll in this case.
Related posts / posts by popularity
Find a plugin that works best for you to determine which posts are related. Or one that shows the most popular posts, in order. Don't care about the looks, just test the functionality. Once you are happy with that, you'd need to find where the plugin starts to display them, it'll have a loop somewhere. Hijack that and use it only to create a comma separated list of IDs. After the loop, insert the JIG template tag with the Post IDs setting receiving the variable with the list.
Opening just the content in the lightbox
Lightbox HTML content
This illustrates a basic Page opened in Magnific Popup from a Justified Image Grid thumbnail.
Only use a specific type of page that you don't intend to be accessed directly, just in the lightbox. Like forms or help dialogs. In your theme or child theme you need to create a page template that has nothing but the content. Do not include header or footer, do not include any fancy layout, just what is necessary - a basic HTML skeleton. It should look pretty raw. On your pages, select this as "Template". In your JIG instance, add an image that has the JIG Link set to this page and JIG Target set to lightbox. Recent posts is not needed because you have custom links on the images. This'll make your post content load in the lightbox that supports iframes.
How do the settings look like?
Recent posts
