Widget: Custom Posts Small Thumbnail


About

Custom Posts Small Thumbnail is a widget that can be used to display desired posts with a small thumbnail style - (View). The thumbnail size of the posts in this widget will adjust to the height of the title content and other content - (View).



Specification




Configuration



Description

items
Use the code with below format to define items. Simply adjust the content highlighted in red. 

[
  {   /* Post 1 */
	title: "Post title",
	url: "Post URL",
	image: "Image URL",
	top_info_title: "Top info content",
	top_info_url: "Top info URL", 
	bottom_info_title: "Bottom info content",
	bottom_info_url: "Bottom info URL",
  },
  {  /* Post 2 */
	title: "-",
	url: "-",
	image: "-",
	top_info_title: "-",
	top_info_url: "-", 
	bottom_info_title: "-",
	bottom_info_url: "-",
  },
  {  /* Post 3 */
	title: "-",
	url: "-",
	image: "-",
	top_info_title: "-",
	top_info_url: "-", 
	bottom_info_title: "-",
	bottom_info_url: "-",
  },
]


Notes
  1. To disable top info content, set top_info_title to -.
  2. When top_info_title is defined and top_info_url set to -, the top info will display as plain text (not a link).
  3. Rules 1 and 2 above also apply to the bottom info content (bottom_info).
  4. The code above includes only 3 items; you can add more items as needed.

top_info
Choose the content to displayed at the top of the post title - (View).
Value Description
none None
label Post category
date Post publication date
author Author

top_info_label
Label for top_info - (View). This configuration is only needed if there is top_info.

bottom_info
Choose the content to displayed at the bottom of the post title - (View).
Value Description
none None
label Post category
date Post publication date
author Author

bottom_info_label
Label for bottom_info - (View). This configuration is only needed if there is bottom_info.

labels_count
Maximum number of labels to retrieve. This configuration is needed if either top_info or bottom_info is set to label.

date_format
Date format. This configuration is needed if either top_info or bottom_info is set to date - More details

max_title_rows
Maximum number of post title lines. Currently, this configuration only supports values of 1, 2, and 3.

thumbnail_shape
Thumbnail shape.
Value Appearance Preview
square Square See
circle Circle See

thumbnail_content
Set the content of the thumbnail element.

Value Description
image The system will display an image as the thumbnail if available. Otherwise, if a post does not contain an image, the system will display the content as the first character of the post title with a background skin according to the thumbnail_skin configuration - (See).
skin Regardless of whether there is an image in the post or not, the system will always display the content as the first character of the post title with a background skin according to the thumbnail_skin configuration - (See).

thumbnail_skin
Configuring the thumbnail skin. By default, the value is secondary. You can also define more than one skin value (separate them with comma). Here are some examples of value definitions:

Value Preview
green, blue See
green, blue, purple, orange See

Skin Support All skins listed in the skin list except for white and black.

item_box
Post Style
Value Description Preview
none Simple display without border and shadow View
border Display with border. This value is only available if the slider configuration is set to no View
shadow Display with shadow View

slider
Value Description Preview
yes Slider mode View
no Normal mode View

footer_align
Set the position of the widget footer content. The content available here includes slider indicator, next button, and previous button.
Value Position Preview
left Left aligned View
center Center aligned View
right Right aligned View
widget_title
Widget title - (View)

  • Value can be plain text or HTML
  • Set to - to disable the title

widget_title_sub
Widget subtitle - (View)

  • Value can be plain text or HTML
  • Set to - to disable the subtitle
  • The subtitle will still be displayed even if the widget_title configuration is disabled

widget_title_line
Decoration line under the widget title - (View). Choose one of the available skins in the Skin List. To disable the line, set the value to none.

widget_title_align
Value Position Preview
left Left aligned View
center Center aligned View
right Right aligned View

widget_title_tag
HTML tag used for the widget title. By default, the selected value is div. For SEO purposes, it is recommended to use heading tags h2-h6 if the text you enter in the widget_title configuration contains the target keyword.
margin_top
Set the distance of the widget from the top.

Value Definition
  1. The value is a CSS Unit. Examples: 20px 40px 60px
  2. Although you can use other units such as em, pc, etc., it is recommended to use the px unit.
  3. When the configuration value is undefined (set to -), the distance applied will follow the default theme configuration (40px).

margin_bottom
Set the distance of the widget from the bottom. The value definition is the same as the margin_top configuration.
conditional
Set the availability of the widget. With this configuration, you can enable the widget only on certain page types, devices, or URLs. More about this configuration can be read on the page: Conditional Configuration.
Have Question?