How to customize your listing thumbnails

In your admin panel, you can customize your listing thumbnail by activating a code editor allowing you to create your own HTML and CSS structure.

With this option, you'll be able to display the information in the order of your choice and you'll be able to decide what kind of information should be displayed on the thumbnail.

The first thing you have to do is to activate the code editor option. To do so, go to your admin panel in Settings / Listings / Listing thumbnails and activate the Custom Listing Thumbnail option.

By default, your listing thumbnail will display:

Listing cover image
Listing Title
Price
Listing Category
Vendor's Avatar
Location (if enabled)
Vendor's Overall Review

You can decide to re-order or to delete any of these elements.

Resize images on my thumbnail

To optimize loading performance, images in the thumbnail are automatically resized to 400px x 400px for listings images, and 150px x 150px for users avatars.

You can choose to resize them differently by updating the value parameter used in the img_url filter.

For example, the user avatar is called this way

<img class="user-avatar" src="{{ listing.user.avatar | img_url: '150x150' }}" alt="">

If you want bigger avatar, let's say 500px x 500px, you can write:

<img class="user-avatar" src="{{ listing.user.avatar | img_url: '500x500' }}" alt="">

Please notice that bigger picture means bigger files to load. This can have negative effect on your customer journey or on your SEO.

Add listing attributes in your listing thumbnail

How to do this?

To display the attribute on the listing thumbnail, after creating it in Settings / Listings / Listing attributes, just copy the following code after the code title.

<li>{{ listing.attributes.attributeID }}</li>

Make sure to replace the bold text with the attribute's ID

This way of displaying attribute value works only with "Text" type attributes.

Display select/checkbox attribute values

If you try to display a select attribute, you may see only the ID of the option. To display its textual value, use the "option" filter:

{{ listing.attributes.my_select_attribute | option }}

Checkbox attributes have multiple values, so it is necessary to loop to display each values:

{% for my_attribute in listing.attributes.my_checkbox_attribute %}
    {{ my_attribute | option }}
{% endfor %}

Display the next date available for a listing in the thumbnail

How to do this?

You can display the earliest date available for a listing in your listing thumbnail in the case you have a Meetup-like a marketplace with fixed events.

Example:



You can customize your listing thumbnail by adding the date filter of your choice. Here is the code snippet you should copy and paste in the editor:

<li>{{ listing.next_date | date: "%d %b, %y" }}</li>

Here all possible values for the date:

%a The abbreviated weekday name ("Sun")
%A The full weekday name ("Sunday")
%b The abbreviated month name ("Jan")
%B The full month name ("January")
%c The preferred local date and time representation
%C Century (20 in 2009)
%d Day of the month (01..31)
%D Date (%m/%d/%y)
%e Day of the month, blank-padded ( 1..31)
%F Equivalent to %Y-%m-%d (the ISO 8601 date format)
%h Equivalent to %b
%H Hour of the day, 24-hour clock (00..23)
%I Hour of the day, 12-hour clock (01..12)
%j Day of the year (001..366)
%k hour, 24-hour clock, blank-padded ( 0..23)
%l hour, 12-hour clock, blank-padded ( 0..12)
%L Millisecond of the second (000..999)
%m Month of the year (01..12)
%M Minute of the hour (00..59)
%n Newline (n)
%N Fractional seconds digits
%p Meridian indicator ("AM" or "PM")
%P Meridian indicator ("am" or "pm")
%Q Number of milliseconds since 1970-01-01 00:00:00 UTC.
%r time, 12-hour (same as %I:%M:%S %p)
%R time, 24-hour (%H:%M)
%s Number of seconds since 1970-01-01 00:00:00 UTC.
%S Second of the minute (00..60)
%t Tab character (t)
%T time, 24-hour (%H:%M:%S)
%u Day of the week as a decimal, Monday being 1. (1..7)
%U Week number of the current year, starting with the first Sunday as the first day of the first week (00..53)
%v VMS date (%e-%b-%Y)
%V Week number of year according to ISO 8601 (01..53)
%W Week number of the current year, starting with the first Monday as the first day of the first week (00..53)
%w Day of the week (Sunday is 0, 0..6)
%x Preferred representation for the date alone, no time
%X Preferred representation for the time alone, no date
%y Year without a century (00..99)
%Y Year which may include century, if provided
%z Time zone as hour offset from UTC (e.g. +0900)
%Z Time zone name

Updated on: 17/03/2023