Issue #3047711 by ultrabob, jhodgdon, kkalaskar, shetpooja04, James.Shee,...

Issue #3047711 by ultrabob, jhodgdon, kkalaskar, shetpooja04, James.Shee, nuklive, benjifisher, mfv: Convert file, image, media, media_library, responsive_image module hook_help() to topic(s)

(cherry picked from commit 40887e97)

core/modules/help_topics/help_topics/core.media.html.twig

+---
+label: 'Managing media'
+top_level: true
+related:
+  - core.content_structure
+  - field_ui.add_field
+  - field_ui.reference_field
+  - field_ui.manage_form
+  - breakpoint.overview
+---
+{% set structure = render_var(url('help.help_topic', {'id': 'core.content_structure'})) %}
+<h2>{% trans %}What are media items?{% endtrans %}</h2>
+<p>{% trans %}Core media items include audio, images, documents, and videos. You can add other media types, such as social media posts, through the use of contributed modules. Media items may be files located in your site's file system, or remote items referenced by a URL. Media items are content entities, and they are divided into media types (which are entity sub-types); media types can have fields. See the <a href="{{ structure }}">Managing content structure</a> topic for more information on content entities and fields.{% endtrans %}</p>
+<h2>{% trans %}What is the media library?{% endtrans %}</h2>
+<p>{% trans %}The media library is a visual user interface for managing and reusing media items. Add media items to content using Media reference fields and the Media library field widget.{% endtrans %}</p>
+<h2>{% trans %}What is an image style?{% endtrans %}</h2>
+<p>{% trans %}An image style is a set of processing steps, known as <em>effects</em>, that can be applied to images. Examples of effects include scaling and cropping images to different sizes. Responsive image styles can associate image styles with your theme's size breakpoints. This allows serving images sized for the browser width.{% endtrans %}</p>
+<h2>{% trans %}Overview of managing media{% endtrans %}</h2>
+<p>{% trans %}The following modules provide media-related functionality:{% endtrans %}</p>
+<ul>
+  <li>{% trans %}Media items and media types are managed by the core Media module.{% endtrans %}</li>
+  <li>{% trans %}The core Media module provides a Media reference field to add media to content entities. The core File and Image modules also provide reference fields. It is recommended to use the Media reference field because it is more versatile.{% endtrans %}</li>
+  <li>{% trans %}The core Media Library module provides the media library and the Media library field widget. With this module installed, the Media library field widget becomes the default widget for editing Media reference fields.{% endtrans %}</li>
+  <li>{% trans %}The core Image module provides a user interface for defining image styles. The core Responsive Image module provides responsive image styles. Using the core Breakpoint module, and a breakpoint-enabled theme, these responsive styles can serve images sized for the browser.{% endtrans %}</li>
+</ul>
+<p>{% trans %}See the related topics listed below for specific tasks.{% endtrans %}</p>
+<h2>{% trans %}Additional resources{% endtrans %}</h2>
+<ul>
+  <li>{% trans %}<a href="https://www.drupal.org/docs/8/core/modules/media">Media module</a>{% endtrans %}</li>
+</ul>

core/modules/help_topics/help_topics/image.style.html.twig

+---
+label: 'Adding an image style'
+related:
+  - core.media
+  - field_ui.manage_display
+  - layout_builder.overview
+---
+{% set overview = render_var(url('help.help_topic', {'id': 'core.media'})) %}
+{% set styles = render_var(url('entity.image_style.collection')) %}
+<h2>{% trans %}Goal{% endtrans %}</h2>
+<p>{% trans %}Add a new image style, which can be used to process and display images. See <a href="{{ overview }}">Managing media</a> for an overview of image styles.{% endtrans %}</p>
+<h2>{% trans %}Steps{% endtrans %}</h2>
+<ol>
+  <li>{% trans %}In the <em>Manage</em> administrative menu, navigate to <em>Configuration</em> &gt; <em>Media</em> &gt; <a href="{{ styles }}"><em>Image styles</em></a>.{% endtrans %}</li>
+  <li>{% trans %}Click <em>Add image style</em>.{% endtrans %}</li>
+  <li>{% trans %}Enter a descriptive <em>Image style name</em>, and click <em>Create new style</em>.{% endtrans %}</li>
+  <li>{% trans %}Under <em>Effect</em>, choose an effect to apply and click <em>Add</em>.{% endtrans %}</li>
+  <li>{% trans %}Configure the effect on the next page. Most effects require some additional configuration after they are added.  For example, for the <em>Crop</em> effect, enter the <em>Width</em> and <em>Height</em> to crop the image to, and choose the <em>Anchor</em> point. Click <em>Add effect</em>.{% endtrans %}</li>
+  <li>{% trans %}Repeat the previous two steps until all of the effects have been added.{% endtrans %}</li>
+  <li>{% trans %}Drag to change the order of the effects. Then click <em>Save</em> to save the new order.{% endtrans %}</li>
+  <li>{% trans %}The image style can now be used to format a field containing an image in your layouts or traditional field displays. It can also be used as part of a responsive image style. See related topics below for more information.{% endtrans %}</li>
+</ol>

core/modules/help_topics/help_topics/media.media_type.html.twig

+---
+label: 'Adding a new media type'
+related:
+  - core.media
+  - field_ui.add_field
+  - field_ui.reference_field
+---
+{% set structure = render_var(url('help.help_topic', {'id': 'core.content_structure'})) %}
+{% set overview = render_var(url('help.help_topic', {'id': 'core.media'})) %}
+{% set media = render_var(url('entity.media_type.collection')) %}
+<h2>{% trans %}Goal{% endtrans %}</h2>
+<p>{% trans %}Add a new media type that can be referenced in Media reference fields; media types are a content entity type. See the <a href="{{ overview }}">Managing media</a> topic for an overview of media items and media types, and the <a href="{{ structure }}">Managing content structure</a> topic for more information on content entities and fields.{% endtrans %}</p>
+<h2>{% trans %}Steps{% endtrans %}</h2>
+<ol>
+  <li>{% trans %}In the <em>Manage</em> administrative menu, navigate to <em>Structure</em> &gt; <a href="{{ media }}"><em>Media types</em></a>.{% endtrans %}</li>
+  <li>{% trans %}If there is not already a media type for the type of media you want to use on your site, click <em>Add media type</em>.{% endtrans %}</li>
+  <li>{% trans %}Enter a <em>Name</em> and <em>Description</em> for your media type, and select the <em>Media source</em>.{% endtrans %}</li>
+  <li>{% trans %}For most media sources, there is additional information that will need to be stored with your media item, in a field on your media type. Under <em>Media source configuration</em>, select an existing field to re-use to store this information, or select <em> - Create -</em> to create a new field.{% endtrans %}</li>
+  <li>{% trans %}Note the types of metadata in the <em>Field mapping</em> section that can be mapped to fields on your media type.{% endtrans %}</li>
+  <li>{% trans %}Click <em>Save</em>.{% endtrans %}</li>
+  <li>{% trans %}Optionally, add additional fields for the metadata noted above or for other information that you want to store to your media type by clicking on <em>Manage fields</em> (see related topic below).{% endtrans %}</li>
+  <li>{% trans %}If you have added metadata fields, click <em>Edit</em>. Under <em>Field mapping</em>, select the fields you added for each piece of metadata information.{% endtrans %}</li>
+  <li>{% trans %}Click <em>Save</em>.{% endtrans %}</li>
+  <li>{% trans %}You can now use this media type by adding a Media reference field to any content entity sub-type. See related topic below.{% endtrans %}</li>
+</ol>

core/modules/help_topics/help_topics/responsive_image.style.html.twig

+---
+label: 'Configuring a responsive image style'
+related:
+  - core.media
+  - field_ui.manage_display
+  - layout_builder.overview
+  - image.style
+  - breakpoint.overview
+---
+{% set overview = render_var(url('help.help_topic', {'id': 'core.media'})) %}
+{% set image_style = render_var(url('help.help_topic', {'id': 'image.style'})) %}
+{% set breakpoint = render_var(url('help.help_topic', {'id': 'breakpoint.overview'})) %}
+{% set styles = render_var(url('entity.responsive_image_style.collection')) %}
+<h2>{% trans %}Goal{% endtrans %}</h2>
+<p>{% trans %}Configure a responsive image style, which can be used to display images at different sizes on different devices. See <a href="{{ overview }}">Managing media</a> for an overview of responsive image styles, and <a href="{{ breakpoint }}">Managing height, width, and resolution breakpoints</a> for an overview of breakpoints.{% endtrans %}</p>
+<h2>{% trans %}Steps{% endtrans %}</h2>
+<ol>
+  <li>{% trans %}In the <em>Manage</em> administrative menu, navigate to <em>Configuration</em> &gt; <em>Media</em> &gt; <a href="{{ styles }}"><em>Responsive image styles</em></a>.{% endtrans %}</li>
+  <li>{% trans %}Click <em>Add responsive image style</em>.{% endtrans %}</li>
+  <li>{% trans %}Enter a descriptive <em>Label</em> for your style.{% endtrans %}</li>
+  <li>{% trans %}Select a <em>Breakpoint group</em> from the groups defined by your installed themes and modules.{% endtrans %}</li>
+  <li>{% trans %}Select a <em>Fallback image style</em> to use when none of the other styles apply. See <a href="{{ image_style }}">Adding an image style</a> if you need to add a new style.{% endtrans %}</li>
+  <li>{% trans %}Click <em>Save</em>.{% endtrans %}</li>
+  <li>{% trans %}On the next page, locate the fieldsets for the breakpoints provided by the selected <em>Breakpoint group</em>.{% endtrans %}</li>
+  <li>{% trans %}For each breakpoint that you want to use, expand the corresponding fieldset. Select the <em>Select a single image style.</em> radio button under <em>Type</em> for the breakpoint, and select the <em>Image style</em> to use for images when that breakpoint is in effect. Repeat this step for the rest of the breakpoints you want to use.{% endtrans %}</li>
+  <li>{% trans %}Click <em>Save</em>{% endtrans %}</li>
+  <li>{% trans %}You can now use this responsive image style to format a field containing an image, in your layouts or traditional field displays. See related topics below for more information.{% endtrans %}</li>
+</ol>