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:

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

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

For example: 

The attributes you can add to your listing thumbnail can only be "Text" type attributes.

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