Tags widget

You use the Tags widget to display tags on your page. You use tags filter content by clicking different tags from the list of tags displayed on the webpage.

For details about tags, see Use tags.

Configure the Tags widget

After you place the Tags widget on your page, open the widget designer by clicking the Edit button in the upper-right corner of the widget.

In the Tags dialogue, configure configure what tags are displayed and how:

  • All tags
    All tags will be displayed in the list.

  • Selected tags...
    A custom selection of tags is displayed. To select one or more tags you want to display, click the Select button.

  • Only tags used by content type...
    A custom selection of tags is displayed. Only tags assigned to the selected content type items will be displayed in the list.

  • Show item count
    The count of all items to which the tag is assigned is displayed.

  • Show empty tags
    Tags that are not assigned to any item are displayed.

  • Sort tags
    By default, tags are sorted by their title (A-Z). You can select a different sorting criterion:

    • By Title (A-Z)
    • By Title (Z-A)
    • As set manually
      This option is available only when you have selected specific tags using Selected tags… option. If you select As set manually, tags are displayed in the selected order.
    • As set in Advanced mode
      To sort the list of tags by property that is not defined in the sort dropdown menu, you must add a new sorting expression in the designer’s Advanced mode. For example, to sort tags using the Description property of tags, navigate to Advanced » Model and, for SortExpression, add Description ASC. As a result, in the sort dropdown menu, the As set in Advanced mode option is selected by default.
  • Template
    Select the template you want to use to list tags on the webpage.

    • SimpleList
      The widget displays tags in a vertical list.
    • TagCloud
      The system tags in a horizontal list. The more items are tagged with a tag, the larger font the system uses to display this tag.
    • CloudList
      The system tags in a vertical list. The more items are tagged with a tag, the larger font the system uses to display this tag.
  • CSS classes
    Expand More options section to specify CSS class names and apply additional CSS classes to the Tags widget.

Display custom classification

PREREQUISITES: You must create custom classifications first. For more information, see Create custom classifications.

To display a custom simple list classification, you can use the Tags widget. Complete the following:

  1. Place the Tags widget on a page and click the Edit button in the upper-right corner of the widget.
  2. Go to Advanced » Model.
  3. In the TaxonomyId property field, set the ID of the classification you want to display.
  4. In the TaxonomyProviderName property field, enter the provider name of the classification you want to display.
  5. In the FieldName property field, enter the name of the content type field that contains the classification.
  6. Click Save.

Advanced settings

In Advanced settings, you specify individual properties of the widget - the TemplateName. This property gets the template you chose in the Template dropdown menu.

Model settings

Model settings display all properties directly bound to the Tags widget model. Access these properties by clicking the Model button in Advanced settings and configure them:

  • BaseUrl
    Gets the URL name of the page whose content you want to filter using tags.
    This page can be either the same page on which the Tags widget is placed, or it can also be another page. For example, you can display the tags on one page of your website, but if the user clicks a tag, the system opens another page and filters its content.

    NOTE: You must enter the URL name in the following format ~/. For example, if the title of the page is About us, the automatically generated URL name is about-us (in case you have not changed it). In BaseUrl input field you must enter ~/about-us.

  • ContentId
    Use this property if you want to only show  tags that are assigned to a specific content item. To do this, specify the content item ID. For example, if you want to only show tags that are assigned to a news item News 1, specify its ID in the ContentId property. In the Only tags used by content type... option select News.

  • ContentProviderName
    If you have more than one provider added to the selected content type, you can use a provider different than the default one. To do this, specify the name of this provider.

    NOTE: If you leave this property value empty, the default provider is used.

  • ContentTypeName
    Gets the content type you chose in the Only tags used by content type... option:

    • Telerik.Sitefinity.News.Model.NewsItem
    • Telerik.Sitefinity.Blogs.Model.BlogPost
    • Telerik.Sitefinity.Libraries.Model.Image
    • Telerik.Sitefinity.Libraries.Model.Document
    • Telerik.Sitefinity.Libraries.Model.Video
    • Telerik.Sitefinity.Lists.Model.ListItem
  • CssClass
    Gets and sets an additional CSS class.

  • DynamicContentTypeName
    If you selected a dynamic content type in Only tags used by content type... option, the content type name will be populated in this property.

  • FieldName
    Gets the name of the property that contains the taxonomy.

  • SerializedSelectedTaxaIds
    In case tags are specifically selected, the IDs of the selected tags are serialized and populated in this property. For example: ["3f47d0b8-2d22-6e58-888c-ff0000bfc4e0"]

  • ShowEmptyTaxa
    Gets whether to show tags that are not assigned to any item.

  • ShowItemCount
    Gets whether to show the count of all items to which the tag is assigned.

  • SortExpression
    Adds additional sorting expression for the tags. The default value is Title ASC.

  • TaxaToDisplay
    Gets the value you selected in the Which tags to display? option:

    • All
      This is the default option.
    • Selected
    • UsedByContentType
  • TaxonomyId
    Specifies the taxonomy ID which taxons will be displayed. By default, the selected taxonomy is Tags.

  • TaxonomyProviderName
    If you have more than one provider added to the selected taxonomy, you can use a provider different than the default one. To do this, specify the name of this taxonomy provider.

    NOTE: If you leave this property value empty, the default provider is used.

  • UrlKeyPrefix
    Gets or sets the URL key prefix, which is used when building and evaluating URLs together with the ContentView controls.

  • UrlEvaluationMode
    Use this property to specify the URL evaluation mode filter - the URL segments or query string. The supported options are:

    • UrlPath 
      This is the default option. The URL has the following structure:
      http://[sitefinity]/page/-in-tags/tags/site1-tag1
    • QueryString 
      Generates the URL in the following format:
      http://[sitefinity]/page?taxonomy=tags&propertyName=tags&taxon=site1-tag1
  • TaxaCountLimit
    Use this property to specify the maximum number of taxa to be displayed.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Categories widget