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