Summary
You can download the free plugin from the WordPress repository. If you would like to support my work, please leave a 5 stars rating, or share this plugin on your feed.
A huge thanks in advance!
- Tested up to 6.1.1
- Compatibility updates for Elementor 3.8.1
- Compatibility updates for PHP 8
- Added the vertical card as the default card output
- Added the horizontal card as an option in the plugin UI: image + info and info + image (no longer experimental)
- Added the drop shadow option
- Added the border radius option
- Added the image spacing option
- Added the card title color and title size options
- Added the card text color and text size options
- Added card background color option
- Added overlay image opacity option
- Added new display options for WooCommerce products: price, add to cart, price + add to cart
- Added vertical alignment option
- Added 3 insert variants for the LPS block: 2 horizontal cards, 4 column cards, and 4 overlay cards
- Added new sort options: by text post meta and by numeric post meta
- Changed the plugin UI for the styles helper
- Changed the default values for cards (height, padding, spacing, and overlay padding) to use the
remunit (recommended) - Updated the dependencies for the LPS block
- Decoupled the front-end grid script from jQuery (excerpt for the carousel, if that is used)
- Delegated click events to the whole card (when URLs are used)
- Spinners/pagination and markup nesting updates
- Changes the output markup for improved SEO
- Global styles updates
- Where is the button?
- NOTE: POTENTIAL BREAKING CHANGES for older versions – PLEASE BACKUP BEFORE UPGRADING
Version 11.1.0 changes: - Added the space between options that applies to the pagination
- Added search key option
- Added archive option
- Added trailing chars option for trimmed strings
- Added the option to apply the chars limit to title and text together (the excerpt/content length will be computed by subtracting the title length from the chars limit)
- Added the option to hide taxonomy names when listed as extra options
- Added the option to display only one term for taxonomies listed as extra options
- Updated link nesting for SEO improvement
- Updated the admin styles
- Fixed pagination first element in archive
- Fixed Firefox full card cursor
- Fixed the block styles not loading when used in the site editor
WooCommerce Products Options
Starting with version 11.0.0, the plugin enables the price and add to cart options for products and product variations.
Gutenberg Block Variants
Type /lps or /card or /grid in the editor to filter out the block, and you will see the 3 new options that will insert the type of block you can use as the starting point for your custom content output.
Horizontal Cards
The horizontal cards have two options:
- image + info (image on the left and post details on the right)
- info + image (post details on the left and image on the right)
How to display related posts on your WordPress site
Most of the time we want to keep the visitors more on our websites, by providing them options to explore after they have ➞
How to fix the missing captions from the gallery without re-selecting each image
Have you noticed that after the most recent WordPress upgrades you might have lost the captions ➞
This is an example of posts listed with pagination (two items per page). Each item is displayed as a horizontal card (image first, then the post details), stacked on mobile (the card is transformed into a vertical card on mobile), and the post details fill in the whole info space.
[latest-selected-content ver="2" perpage="2" showpages="more" loadtext="Load more ☝" pagespos="1" display="title,excerpt-small" titletag="h3" chrlimit="170" more="➞" url="yes" image="medium" elements="25" default_height="15rem" default_padding="2rem" tablet_height="15rem" mobile_height="15rem" color_title="#ffffff" color_bg="#3a2d49" css="h-image-info content-space-between has-stacked" type="post" status="publish" taxonomy="category" term="online-tools,tips-tricks" orderby="dateD" show_extra="dark_spinner,trim"]Vertical Cards
The vertical cards (and also the horizontal cards) enable the option for applying some spacing around the image. This gives the card a polaroid aspect.
Spring Vacation – Gran Canary Island, Spain
If you are looking for a relaxing vacation, good food and many things to see, Gran Canary ➞
Trip to Iceland, or how to continue the amazing adventure
Iceland is as beautiful as I recalled it to be, and we got the amazing bonus ➞
Spring Vacation – Andalusia, Spain
We had a small and atypical spring break and spent the time enjoying the amazing scenery and delicious ➞
This is an example of posts listed with pagination (three items per page). Each item is displayed as a vertical card (image first, and the post details below), the card image has the zoom effect and some space around it, and the post details fill in the whole info space.
[latest-selected-content ver="2" perpage="3" showpages="more" loadtext="Load more ☝" pagespos="1" display="title,excerpt-small" titletag="h3" chrlimit="130" more="➞" url="yes" image="medium" elements="25" size_text="1rem" size_title="1.4rem" color_title="#ffffff" color_bg="#3a2d49" css="three-columns as-column hover-zoom content-space-between has-radius has-img-spacing" type="post" status="publish" taxonomy="category" term="travels" orderby="dateD" show_extra="dark_spinner,trim"]Overlay Cards
Easy Populate Posts
If you need a helper plugin that allows you to populate the sites with dummy content, you have to check this out. NEW! You ➞
Image Regenerate & Select Crop
The plugin allows to manage advanced settings for images, to override the native medium and large crop option ➞
Emails Catch All
This plugin allows you to configure an email address to replace or receive a copy of all the emails sent from the application ➞
This is an example of posts listed with pagination (three items per page), but limited to a maximum of 6 items (only two pages). Each item is displayed as an overlay card (the image is used as the card background), the card image has the zoom effect and a 20% opacity, the card has rounded corners and shadows, and the post details fill in the whole info space.
[latest-selected-content ver="2" limit="6" perpage="3" showpages="more" loadtext="Load more ☝" pagespos="1" display="title,excerpt-small" titletag="h3" chrlimit="140" more="➞" url="yes" image="medium" elements="25" color_title="#ffffff" color_bg="#bc274b" image_opacity="0.15" css="three-columns as-overlay has-shadow has-radius hover-zoom content-space-between" type="post" status="publish" taxonomy="category" term="plugins" orderby="dateD" show_extra="light_spinner,trim"]Styles Helper
Starting with version 11.0.0, the plugin enables new style options:
- text, title, and background color
- text and title size
- content vertical alignment: start, center, end, and space between
- drop shadow (the whole card)
- title shadow
- card border radius
- image spacing (if enabled, this is inherited from the card padding, and defaults to 1rem, if nothing else is specified)
- image opacity (this option is for the overlay card)
- stacked on mobile (this option is for the horizontal card, and it transforms the card into a vertical card on mobile view)
- pagination horizontal alignment (when the shortcode is configured to use pagination)
The text, title, and background color options accept hex, RGB, and RGBA format, ex: #ffffff, rbga(255, 255, 255, 0.5), etc. Leave empty these options if you want to use the defaults. Also, if you want to apply the colors, you should remove the card’s generic aspect, as the light and dark options would override the color.
The text and title size options accept px, %, rem, em, vw, or vh as units, ex: 1rem, 24px, 2em, 2vw, etc. The option accepts the clamp() CSS function which creates a beautiful transition of the text size when the resolution changes, ex: clamp(1rem, 0.6rem + 1.25vw, 1.4rem), etc. Leave empty these options if you want to use the defaults.
Where is the button?
The button for configuring the shortcode is displayed as an icon or as the LPS button, depending on the mode you use when adding/updating content (the posts, pages, widgets, etc.):
- in the Visual mode of the editor, the button appears in the toolbar as an icon
- in the Text mode of the editor, the button appears in the toolbar as the LPS button
The button for the shortcode configurator can be used:
- when adding/editing posts, pages, text widgets
- in the LPS block for Gutenberg
- in the Classic block for Gutenberg
- for version >= 8.7 the button is also available in Elementor.
See the demo:
If you would like to support my work, please consider making a donation / buy me a coffee, leave a 5 stars rating, or share this plugin on your feed.
A huge thanks in advance!
