How to start using the new beautiful card layouts for listings

AS June 30, 2019
Comments (1)
How to start using the new beautiful card layouts for listings

We recently released JReviews 3.6. In this version we've put a lot of work into improving the overall user interface. There are important UI changes throughout, including form elements, dialogs, and a new improved listing comparison widget that also works on mobile. The most notable improvement, though, are the new card-based layouts for the listing list pages. These new layouts are stunning, fully responsive so they display great on desktop and mobile, and they will immediately transform your site so it looks better than ever.

When dealing with user generated content and not having complete control over the entire page layout, it is a real challenge to create fully adaptive layouts that work under many different scenarios. Using CSS' grid layout, inspiration from the Tailwind CSS framework, and Adam Wathan and Steve Schoger's work, we were able to put together these wonderful new layouts for JReviews that will work quite well under most scenarios.

Four new stunning card layouts

In addition to the four existing layouts blogview, tableview, thumbview, and masonry, there are are four new card-based layouts: horizontal card, vertical card, postcard and poster layouts. You can see examples of all of these below. We also implemented a masonry option for the vertical layout, bringing the total number of default list page layouts to nine.

JReviews stunning listing card layouts

Selecting the new layouts

The new layouts are available for selection in JReviews Configuration / List Page / Pre-defined layouts as shown in the image below.

JReviews stunning listing card layouts

In addition to that, you can assign the layouts in many other places in JReviews. Below is a list of different areas where you can select the layouts:

  • Configuration Settings / List Page / Pre-defined layouts
  • Configuration Settings / Search / Theme Layout
  • Category Layout Manager
  • List Page Menus

Many possibilities with the Layout Customizer

We wanted to make it possible for you to make the most from these wonderful layouts. To do that, we came up with the idea of the Layout Customizer to allow you to create copies and different variations of the default layouts without having to make any code changes. Of course you can still create copies of the layout theme files using theme suffixes and take your customizations to the next level.

Below you can see the Layout Customizer, which starts off with the default card layouts:

JReviews stunning listing card layouts

You can then make a copy of the existing layouts and modify any of the many settings available at this time.

JReviews stunning listing card layouts

Any new layouts you create will automatically made available for selection in the different areas mentioned above.

Optimizing card dimensions

In the Layout Customizer you are able to modify multiple card settings, like the minimum card width which will adjust automatically at different breakpoints to make them responsive. You can also modify the image aspect ratio which is retained at different breakpoints.

The dimensions for the card, card image and some of the text inside the card are relative, and based on the page's root font size assigned to the html tag. The default browser font-size is 16px and that's what the default cards are optimized for. Many sites are using older versions of Bootstrap which sets this font-size to 10px. If you are seeing a very small font-size on the cards, we recommend overriding it to 16px so you can use the default cards without having to make any changes to them. You can easily do this with CSS added to your Joomla template or WordPress theme's custom CSS file or setting.

html {
   font-size: 16px;

We plan to make additional user interface improvements in future updates and extend the card layout to modules/widgets, but in the mean time we hope you enjoy this update and the new card layouts for the listing list pages!

User comments


To write a comment please register or
Great work!!
Just want to thank you for the great work. Keep on doing this. I am looking forward for the future updates :)