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
- 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
add to cart options for products and product variations.
Gutenberg Block Variants
/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.
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)
Most of the time we want to keep the visitors more on our websites, by providing them options to explore after they have ➞
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"]
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.
Iceland is as beautiful as I recalled it to be, and we got the amazing bonus ➞
We had a small and atypical spring break and spent the time enjoying the amazing scenery and delicious ➞
Sweden really gave it all, a beautiful full display of the Northern Lights, beautiful weather, snow ➞
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"]
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"]
Starting with version 11.0.0, the plugin enables new style options:
The text, title, and background color options accept hex, RGB, and RGBA format, ex:
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:
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: