From 3917ba8adbb61985891f08c10d697867b5819655 Mon Sep 17 00:00:00 2001
From: Karsten Nowak <nowak@undkonsorten.com>
Date: Sun, 28 Jan 2024 19:52:19 +0100
Subject: [PATCH] [DOCS] Add RenderMedia ViewHelper to docs

---
 Documentation/Reference/ViewHelpers/Index.rst |   1 +
 .../ViewHelpers/RenderMediaViewHelper.rst     | 134 ++++++++++++++++++
 2 files changed, 135 insertions(+)
 create mode 100644 Documentation/Reference/ViewHelpers/RenderMediaViewHelper.rst

diff --git a/Documentation/Reference/ViewHelpers/Index.rst b/Documentation/Reference/ViewHelpers/Index.rst
index ab3a66b3dc..e7470fbcdd 100644
--- a/Documentation/Reference/ViewHelpers/Index.rst
+++ b/Documentation/Reference/ViewHelpers/Index.rst
@@ -37,6 +37,7 @@ All ViewHelpers
    MediaFactoryViewHelper
    MetaTagViewHelper
    PaginateBodytextViewHelper
+   RenderMediaViewHelper
    TargetLinkViewHelper
    TitleTagViewHelper
 
diff --git a/Documentation/Reference/ViewHelpers/RenderMediaViewHelper.rst b/Documentation/Reference/ViewHelpers/RenderMediaViewHelper.rst
new file mode 100644
index 0000000000..437c8190c5
--- /dev/null
+++ b/Documentation/Reference/ViewHelpers/RenderMediaViewHelper.rst
@@ -0,0 +1,134 @@
+.. include:: /Includes.rst.txt
+
+.. _viewHelperRenderMedia:
+
+RenderMediaViewHelper
+---------------------
+
+ViewHelper to render media from any content
+
+**Type:** Basic
+
+
+General properties
+^^^^^^^^^^^^^^^^^^
+
+.. t3-field-list-table::
+ :header-rows: 1
+
+ - :Name: Name:
+   :Type: Type:
+   :Description: Description:
+   :Default value: Default value:
+
+ - :Name:
+         news (required)
+   :Type:
+         Tx\_News\_Domain\_Model\_News
+   :Description:
+         The news post
+   :Default value:
+
+ - :Name:
+         imgClass
+   :Type:
+         string
+   :Description:
+         Add css class to images.
+   :Default value:
+
+ - :Name:
+         videoClass
+   :Type:
+         string
+   :Description:
+         Wrap videos in a div with this css class.
+   :Default value:
+
+
+ - :Name:
+         audioClass
+   :Type:
+         string
+   :Description:
+         Wrap audio files in a div with this css class
+   :Default value:
+
+
+ - :Name:
+         fileIndex
+   :Type:
+         integer
+   :Description:
+         index of image to start with
+   :Default value:
+         0
+
+ - :Name:
+         cropVariant
+   :Type:
+         string
+   :Description:
+         Select a cropping variant, in case multiple croppings have been specified or stored in FileReference
+   :Default value:
+         default
+
+
+
+Examples
+^^^^^^^^
+
+Basic usage
+"""""""""""
+
+Use `[media]` in the RTE fields of a news. In Fluid tempate wrap rendering of text fields with the VieHelper.
+
+
+Backend: ::
+
+   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+   eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+   sed diam voluptua.
+
+   [media]
+
+   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+   gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+   [media]
+
+   Lorem    ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+   voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+   kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+Code: ::
+
+   <n:renderMedia news="{newsItem}" imgClass="img-responsive" videoClass="video-wrapper" audioClass="audio-wrapper">
+      <div class="news-text-wrap" itemprop="articleBody">
+         <f:format.html>{newsItem.bodytext}</f:format.html>
+      </div>
+   </n:renderMedia>
+
+Output: ::
+
+   Media tags in RTE of the text are replaced with images.
+
+.. tip::
+
+   Move news detail template to your site-package and remove default rendering
+   of images to avoid duplicates.
+
+.. tip::
+
+   Use `fileIndex` attribute to not start with the first image.
+
+.. tip::
+
+   Use "Show in views" setting for the images to control visibility in detail
+   view.
+
+.. tip::
+
+   Change sorting of images in backend to change the order of images in
+   frontend.