1. Home
  2. Design
  3. GD > Badge

GD > Badge


Introduction
Settings
Examples
Frequently Asked Questions

Introduction

GD > Post Badge is a versatile and powerful element that you can use to display custom content based on the values of custom fields in the listing.

Settings

Use a Block, Widget, or Shortcode to place a badge.

Below are the settings available for any version. You can find this form in the shortcode builder.

Examples

GD Post Badge is a powerful tool for adding highlights or targeted interactive elements to your listings. You can use badges in the archive item or on the detail page.

Example – Read More link in the Archive item

Use the following configuration to add a “Read More” link to your archive item template:


[gd_post_badge key="post_title" condition="is_not_empty" badge="Read More" link="%%post_url%%" bg_color="#ffffff" txt_color="#433aed" alignment="center"]

Example – Custom Website Link



[gd_post_badge key="website" condition="is_not_empty" badge="Awesome Super Link" link="%%input%%" bg_color="#9c03aa" txt_color="#ffffff" size="extra-large" list_hide="3" list_hide_secondary="2"]

Example – Claim Listings



[gd_post_badge key="claimed" condition="is_not_empty" badge='<i class="fas fa-check-circle"></i>Verified' bg_color="#ff8040" txt_color="#ffffff" size="small" alignment="right" css_class="verified"]



[gd_post_badge key="claimed" condition="is_empty" badge='<i class="far fa-question-circle"></i>Unclaimed' bg_color="#ff8040" txt_color="#ffffff" size="small" alignment="right" css_class="unverified"]

Example – Visit my website



[gd_post_badge key="website" condition="is_not_empty"  badge='Visit my <a href="%%input%%"><i class="fas fa-music"></i> website</a>' bg_color="#800080" txt_color="#ffffff"]

Example – Featured Listings

See an example here for use with featured listings.

Example – Badge Classes

These custom classes can be added to your badge to change the way it is displayed within the containing div.

To use these over the top of an archive item GD Post Images, be sure to include the badge before the GD Archive Item Close element.


gd-badge-shadow // adds a shadow to the badge
gd-ab-top-left // positions absolute top, absolute left
gd-ab-top-left-angle // positions absolute top, absolute left, at an angle
gd-ab-top-right // positions absolute top, absolute right
gd-ab-top-right-angle // positions absolute top, absolute right, at an angle
gd-ab-bottom-left // positions absolute bottom, absolute left
gd-ab-bottom-left-angle // positions absolute bottom, absolute left, at an angle
gd-ab-bottom-right // positions absolute bottom, absolute right
gd-ab-bottom-right-angle // positions absolute bottom, absolute right, at an angle
gd-lity  // adds interactivity – launching a video link in a lightbox, for example

Taxonomy Badges

[gd_post_badge key="post_category" condition="is_contains" search="32" badge="Attractions" bg_color="#0073aa" txt_color="#ffffff"]
[gd_post_badge key="post_category" condition="is_contains" search="32,33" badge="Attractions / Hotels" bg_color="#0073aa" txt_color="#ffffff"]
[gd_post_badge key="post_tags" condition="is_contains" search="Museum" badge="Museum" bg_color="#0073aa" txt_color="#ffffff"]
[gd_post_badge key="post_tags" condition="is_contains" search="Museum,Garden" badge="Museum / Garden" bg_color="#0073aa" txt_color="#ffffff"]

Example – HTML Image Badge

HTML can be used in the badge param. Make sure to enclose the HTML with ” (quotes” and then use ‘ (apostrophe) for inner HTML.


[gd_post_badge key="my_custom_field" condition="is_not_empty" badge="<img src='https://mysite.com/wp-content/uploads/2020/02/pbjt.jpg'/>" bg_color="#ffffff" txt_color="#ffffff"]

Using ‘post_modified’ to show the date of last update or “Recently Updated”

post_modified is the date that a listing was most recently updated.

If you create a badge and use %%input%% for the badge, post_modified will show as a date.

To show “Recently Updated!” if a post was updated in the last 30 days use:


[gd_post_badge key='post_modified' condition='is_less_than' search='+30′ icon_class='fas fa-certificate' badge='Recently Updated!' bg_color='#ff0000′ txt_color='#ffffff' alignment='left']
Was this helpful to you? Yes 2 No 2