=========== ViewHelpers =========== Namespace ========= Use the Media Utils namespace in Fluid templates: .. code-block:: html Responsive image ViewHelpers ============================ ``mediaUtils:responsiveImages.image`` ------------------------------------- Renders responsive image markup for a FAL image or source path. Required input: * either ``image`` * or ``src`` Do not pass both at the same time. Example: .. code-block:: html ``mediaUtils:responsiveImages.media`` ------------------------------------- Renders images through the responsive image pipeline and non-image media through TYPO3's media renderer registry. Required input: * either ``file`` * or ``src`` Example: .. code-block:: html Common responsive arguments =========================== .. list-table:: :header-rows: 1 * - Argument - Description * - ``settings`` - Settings array used for defaults. * - ``settingsVariant`` - Optional settings variant key. * - ``alt`` / ``title`` - Metadata attributes. If omitted, file metadata can be used. * - ``class`` / ``id`` / ``style`` - HTML attributes. * - ``loading`` - Native loading hint. * - ``decoding`` / ``fileDecoding`` - Image decoding hint. * - ``fileExtension`` - Target extension for processed images. * - ``crop`` / ``cropVariant`` - Crop handling. * - ``width`` / ``height`` - Target dimensions. * - ``minWidth`` / ``minHeight`` - Minimum dimensions. * - ``maxWidth`` / ``maxHeight`` - Maximum dimensions. * - ``absolute`` - Generate absolute URLs. * - ``srcset`` / ``sizes`` - Responsive ``img`` attributes. * - ``breakpoints`` - ``picture`` breakpoint configuration. * - ``lazyload`` - Enables JavaScript lazy-load attributes. * - ``placeholderSize`` - Placeholder image width. * - ``placeholderInline`` - Inline placeholder as data URI where possible. * - ``ignoreFileExtensions`` - Extensions excluded from responsive processing. * - ``renderHeightAttribute`` - Render height on fallback image tag. File helper ViewHelpers ======================= ``mediaUtils:file.getProperty`` ------------------------------- Reads a property from a FAL ``FileReference`` or Extbase file reference. .. code-block:: html ``mediaUtils:file.getReference`` -------------------------------- Loads FAL references for a table, field and UID. .. code-block:: html ``mediaUtils:file.cropVariantClass`` ------------------------------------ Creates a CSS class from the first selected crop ratio of a file reference. Without Bootstrap classes: .. code-block:: html With Bootstrap ratio classes: .. code-block:: html The Bootstrap output uses classes such as ``ratio ratio-16x9``.