sitegeist/media-components

Ready-to-use fluid components for embedding different media files

0.1.1 2024-10-16 07:03 UTC

Requires

• php: ^8.2
• sitegeist/fluid-components: ^3.8.1
• sitegeist/fluid-tagbuilder: ^1 || dev-main
• typo3/cms-core: ^13.3 || dev-main
• typo3fluid/fluid: ^4.0

Requires (Dev)

• editorconfig-checker/editorconfig-checker: ^10.0
• squizlabs/php_codesniffer: ^3.0
• typo3/testing-framework: ^8.2

GPL-2.0-or-later

• Benjamin Tammling
• Ulrich Mathes
• Simon Praetorius

• media
• image
• template
• components
• audio
• html
• video
• typo3
• fluid
• Responsive Images
• typo3-extension
• typo3-fluid

README

This extension is still in development and might not ready for production usage.

This extension provides ready-to-use Fluid Components for various media assets:

• Images
  • Image tag with support for srcset/sizes
  • Picture tag with support for image types and different responsive breakpoints
• Audio files
  • HTML5 audio tag
• Video files
  • HTML5 video tag with support for subtitles

Usage

We use the public namespace from fluid-components.

Images

<fc:image src="{width:200, height:100}" />

<fc:image
    src="5"
    width="500"
    height="100"
    maxDimensions="true"
    cropVariant="Default"
    srcset="400w, 800w, 1200w"
    sizes="(min-width: 400px) 400px, (min-width: 800px) 800px, (min-width:1200px) 1200px, 100vw"
    format="jpg"
    alt="Alt text"
    title="Title text"
    lazyload="true"
    preload="true"
/>

Pictures

<fc:picture
    src="{originalImage: {fileUid: 5}, srcset: \'400,800,1200\'}"
    sources="{desktop: {originalImage: {fileUid: 5}, srcset: \'1000, 1200, 1400, 1600, 1800, 2000\'}}"
    width="500"
    height="100"
    maxDimensions="true"
    alt="Alt text"
    title="Title text"
    lazyload="true"
    preload="true"
/>

Video

<fc:video
    sources="{0: 7}"
    tracks="{0: 8}"
    width="800"
    height="600"
    autoplay="false"
    controls="true"
    loop="true"
    muted="false"
    poster="{fileUid: 4}"
    preload="metadata"
    fallbackText="Fallback"
    crossorigin="anonymous"
    playsinline="true"
/>

Audio

<fc:audio
    sources="{0: 1, 1: 2, 3: 2}"
    autoplay="true"
    controls="true"
    loop="true"
    muted="true"
    preload="metadata"
    fallbackText="Fallback"
    crossorigin="anonymous"
/>