Jump to content

Template partials

Modular template structure for easy maintenance and customisation.

VidPly TYPO3 Extension Logo

Location

Resources/Private/Partials/VidPly/

Available sub-templates

1. Assets.html

Registers CSS and JavaScript assets conditionally

 
<f:render partial="VidPly/Assets" arguments="{
    needsPrivacyLayer: vidply.needsPrivacyLayer,
    needsVidPlay: vidply.needsVidPlay,
    needsPlaylist: vidply.needsPlaylist,
    needsHLS: vidply.needsHLS,
    needsDASH: vidply.needsDASH
}" />
 

Arguments:

  • needsPrivacyLayer - Load PrivacyLayer.js (external services)
  • needsVidPlay - Load VidPly core (native player)
  • needsPlaylist - Load PlaylistInit.js (playlists/player initialisation)
  • needsHLS - Load hls.js (HLS streaming)
  • needsDASH - Load dash.js (DASH streaming)

Always loaded:

  • vidply.min.css - Player styling

Loaded conditionally depending on media type:

  • privacy-layer.css - Privacy layer styles (external services only)
  • PrivacyLayer.js - YouTube, Vimeo, SoundCloud
  • hls.min.js — vendor-provided hls.js 1.6.16 (HLS streams only)
  • dash.all.min.js — embedded ‘dash.js’ 5.2.0 (modern UMD; DASH streams only)
  • PlaylistInit.js - Playlists or player initialisation
  • vidply/vidply.esm.min.js - Native player only (plus code-split blocks)

See Documentation/AssetLoading.md for details on optimisation.

2. VideoSources.html

Renders ‘<source>’ elements for video players

 
<f:render partial="VidPly/VideoSources" arguments="{
    videoUrl: vidply.videoUrl,
    playlistData: vidply.playlistData,
    sources: vidply.sources,
    mediaFiles: vidply.mediaFiles
}" />
 

Supports:

  • Multiple source formats with fallback order (DASH → HLS → MP4/WebM)
  • Multiple quality and format options
  • Playlist mode
  • Sources for audio descriptions

3. AudioSources.html

Renders ‘<source>’ elements for audio players

 
<f:render partial="VidPly/AudioSources" arguments="{
    playlistData: vidply.playlistData,
    tracks: vidply.tracks,
    sources: vidply.sources,
    mediaFiles: vidply.mediaFiles
}" />
 

Supports:

  • Multiple source formats with fallback order (DASH → HLS → MP3/OGG)
  • Playlist mode
  • Format fallback

4. Tracks.html

Renders subtitle and chapter <track> elements

 
<f:render partial="VidPly/Tracks" arguments="{
    captions: vidply.captions,
    chapters: vidply.chapters,
    languageSelection: vidply.languageSelection
}" />
 

Shared by video and audio players. Supports multiple languages and track types.

5. MetadataScripts.html

JSON data for audio description and sign language (read by the player on initialisation – not JSON-LD)

 
<f:render partial="VidPly/MetadataScripts" arguments="{
    uniqueId: vidply.uniqueId,
    audioDescriptionTracks: vidply.audioDescriptionTracks,
    audioDescription: vidply.audioDescription,
    signLanguage: vidply.signLanguage
}" />
 

Used by video players for metadata relating to audio description and sign language tracks.

 

SEO JSON-LD (VideoObject / AudioObject) is output separately on the page <head> via Partials/Page/StructuredDataVideo.html — see Developer Quick Start → Structured Data.

 

6. PrivacyLayer.html

GDPR consent layer for external services

 
<f:render partial="VidPly/PrivacyLayer" arguments="{
    service: 'youtube',
    videoUrl: vidply.videoUrl,
    poster: vidply.poster,
    title: data.header,
    uniqueId: vidply.uniqueId,
    privacySettings: vidply.privacySettings.youtube
}" />
 

Displays a play button with a privacy notice for YouTube, Vimeo and SoundCloud. Uses the database settings from the tx_mpcvidply_privacy_settings table, with a fallback to translations from the language file. Loads an iframe upon consent.

Structure of the privacy settings:

 
[
    'headline' => 'Optional headline',
    'intro_text' => 'Text before link',
    'outro_text' => 'Text after link',
    'policy_link' => 'https://...',
    'link_text' => 'Link text',
    'button_label' => 'Button aria-label'
]
 

Template structure

 
VidPly.html (Main)
└── VidPly/Player.html (wrapper + renderMode switch)
    ├── privacy → PrivacyLayer.html
    ├── mixedPlaylist → MixedPlaylistPlayer.html
    ├── audio → AudioPlayer.html
    └── video → VideoPlayer.html
        ├── VideoSources.html / AudioSources.html
        ├── Tracks.html
        └── MetadataScripts.html (video only)
    └── Assets.html (conditional JS/CSS)
 

At page level: Partials/Page/StructuredDataVideo.html (JSON-LD in <head>).

Override

Override in the site package

TypoScript:

 
tt_content.mpc_vidply {
    partialRootPaths.100 = EXT:your_sitepackage/Resources/Private/Partials/
}
 

Creating a custom partial:

 
your_sitepackage/
└── Resources/Private/Partials/VidPly/
    └── VideoSources.html  ← Your customization
 

Other partials remain unchanged.

List view and detail templates

Location: Resources/Private/Partials/Listview/ and Resources/Private/Templates/Listview.html / Detail.html

Partial / TemplateRole
Listview/RowA shelf or a grid row: Heading, Sorting <select>, optional pagination wrapper
Listview/RowListBodyShared <ul> for grid or shelf (can be used with or without pagination)
Listview/CardIndividual media card (poster, title, artist, category chips, link)
Listview/ShelfArrows‘Back/Next’ controls for the horizontal shelf

Overwrite in the same way using partialRootPaths for mpc_vidply List view TypoScript, if your site package requires a different markup; retain data-* attributes if you use Listview.js (Shelf, Sorting, Pagination).

Advantages

  • Single point of responsibility – each partial has a clear purpose
  • Reusability – Partial templates shared by video and audio content are tracked
  • Easy to overwrite – Customise only what you need
  • Maintainability – Changes are limited to specific files
  • Readability – The main template has been reduced from 250 to 130 lines

No changes that break compatibility

The refactoring leaves the HTML output and functionality unchanged. Existing configurations will continue to work without any changes.

Share page