Using the view helpers

Target group: Developers, Integrators

Introduction

With the help of <schema:type> view helpers you can define schema markup in Fluid templates. This can be helpful if you can’t use the API, e.g. in third-party extensions.

Each type in the schema.org vocabulary is mapped into an according view helper. The properties of a type are available as view helper arguments. As you will see in the example, you can also nest view helpers into each other.

There are currently over 600 view helpers available.

Note

The extension registers schema in the global Fluid namespace. So there is no need to import the namespace in your templates.

<schema:type> view helpers

Let’s start with a simple example. It’s the same markup about John Smith as in the API reference, so you can compare the differences.

Imagine you describe a person on a plugin’s detail page that you want to enrich with structured markup:

<schema:type.person
   -id="http://example.org/#person-42"
   givenName="John"
   familyName="Smith"
   gender="http://schema.org/Male"
>
   <schema:type.event
      -as="performerIn"
      name="Fancy Event"
      image="https://example.org/event.png"
      url="https://example.org/"
      isAccessibleForFree="true"
   >
      <schema:property -as="sameAs" value="https://twitter.com/fancy-event"/>
      <schema:property -as="sameAs" value="https://facebook.com/fancy-event"/>
   </schema:type.event>
</schema:type.person>

Every type view helper starts with <schema:type.xxx> where xxx is the lower camel case variant of the schema.org type name.

The according properties (like givenName and familyName) are attributes. You can find a list of all available properties for a specific type on the schema.org page, e.g. for the Person.

In the example, there are two attributes that begin with a -. They are explained in detail in the chapter Special attributes.

As you can see, the value true (and false accordingly) can be used. They are mapped later to the schema types http://schema.org/True and http://schema.org/False.

Please also recognise the <schema:property> view helper. With this view helper you can pass more than one string value to the according type.

You can also use the default Fluid view helpers:

<schema:type.blogPosting
   -isMainEntityOfWebPage="1"
   headline="{data.title}"
   description="{data.description}"
   datePublished="{f:format.date(format:'Y-m-d', date: data.publishDate)}"
>
   <f:if condition="{data.lastUpdated}">
       <schema:property -as="dateModified" value="{f:format.date(format:'Y-m-d', date: data.lastUpdated)}"/>
   </f:if>
</schema:type.blogPosting>

Special attributes

The special attributes are starting with a dash (-) to separate them from the common properties of the schema.org specification and to avoid collisions. Let’s have a deeper look on them.

-id

This attribute sets a unique id for the type and is mapped in JSON-LD to the @id property. The LD in JSON-LD means “linked data”. With an @id you can define a type on one page (e.g. Event):

{
   "@context": "http://schema.org",
   "@type": "Event",
   "@id": "http://example.org/#event-1",
   "name": "Fancy Event",
   "image": "https://example.org/event.png",
   "url": "https://example.org",
   "isAccessibleForFree": "http://schema.org/True",
   "sameAs": ["https://twitter.com/fancy-event", "https://facebook.com/fancy-event"]
}

and reference it on the same or another page (e.g. Person):

{
   "@context": "http://schema.org",
   "@type": "Person",
   "@id": "http://example.org/#person-42",
   "givenName": "John",
   "familyName": "Smith",
   "gender": "http://schema.org/Male",
   "performerIn": {
      "@type": "Event",
      "@id": "http://example.org/#event-1",
      "name": "Fancy Event"
   }
}

Tip

You can also cross-reference the types between different websites. The @id is globally unique, so a best practise is to use an IRI for it. It is also good practise to add the name property as attribute.

-as

This attribute is used to connect a type to its parent. In the above example, you can see that the event type view helper uses -as to connect to the performerIn property of the person type view helper.

Note

The usage of the attribute makes only sense in a child. If it is used in a parent type the view helper is ignored.

-specificType

Sometimes it can may be helpful to set a specific type. Imagine you have records of places in the backend where you can select which type of specific place a record has: e.g. Museum, Airport, Park or Zoo. In a Fluid template you can loop over these records when they are on the same page. But it is not very convenient to use a <f:switch> or <f:if> view helper to choose the correct type. For this scenario you can benefit from this argument:

<f:for each="{places}" as="place">
   <schema:type.place
      name="{place.name}"
      -specificType="{place.type}"
   />
</f:for>

Important

When using the -specificType attribute you can only set the properties of the original type view helper (here: place), no additional ones from the specific type.

-isMainEntityOfWebPage

This argument defines the type as the main entity of a web page:

<schema:type.person
   -id="http://example.org/#person-42"
   -isMainEntityOfWebPage="1"
   givenName="John"
   familyName="Smith"
   gender="http://schema.org/Male"
/>

which results in the output:

{
   "@context": "http://schema.org",
   "@type": "WebPage",
   "mainEntity": {
      "@type": "Person",
      "@id": "http://example.org/#person-42",
      "givenName": "John",
      "familyName": "Smith",
      "gender": "http://schema.org/Male"
   }
}

<schema:property> view helper

You can only set one string value in the argument of a type view helper, but sometimes it is necessary to add more than one value to it. There comes the property view helper into the game:

<schema:type.corporation
   name="Acme Ltd."
   image="https://example.org/logo.png"
   url="https://example.org/"
>
   <schema:property -as="sameAs" value="https://twitter.com/acme"/>
   <schema:property -as="sameAs" value="https://facebook.com/acme"/>
</schema:type.corporation>

You can use as much property view helpers as you like for the same property. If you prefer, you can combine the view helpers as follows:

<schema:type.corporation>
   <schema:property -as="name" value="Acme Ltd."/>
   <schema:property -as="image" value="https://example.org/logo.png"/>
   <schema:property -as="url" value="https://example.org/"/>
   <schema:property -as="sameAs" value="https://twitter.com/acme"/>
   <schema:property -as="sameAs" value="https://facebook.com/acme"/>
</schema:type.corporation>

The <schema:property> view helper accepts two argument, both are required.

-as

You know already the -as attribute from the type view helpers. Its purpose is the same, it references the property in the parent <schema:type> view helper.

value

The value argument sets the value of the property, as you guessed already.

<schema:breadcrumb> View Helper

This view helper is described in-depth in the chapter View helper <schema:breadcrumb>.

Using the XML schema (XSD) in your code editor

It is possible to assist your code editor on suggesting the tag name and the possible attributes:

Auto completion in PhpStorm with configured XSD schema

Auto completion in PhpStorm with configured XSD schema

Just add the schema namespace to the root element of your Fluid template:

<html
    xmlns:f="https://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:schema="http://typo3.org/ns/Brotkrueml/Schema/ViewHelpers"
    schema:schemaLocation="https://brot.krue.ml/schemas/schema-1.9.0.xsd"
    data-namespace-typo3-fluid="true"
>

The relevant parts are the namespace declaration (xmlns:schema="http://typo3.org/ns/Brotkrueml/Schema/ViewHelpers") and the schema:schemaLocation attribute which points to the recent XSD definition.

You can also import the XSD file into your favorite IDE after downloading it from the following URL: https://brot.krue.ml/schemas/schema-1.9.0.xsd.