Merge pull request #836 from SLAC/SLAC22-729--no-caption-on-event-video

729 - hide caption on event detail

config/sync/core.entity_view_display.media.image.video_lightbox_no_caption_credit.yml

@@ -0,0 +1,66 @@
+uuid: 8025035c-b5ef-4ffe-adee-b617a3597d9b
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.video_lightbox_no_caption_credit
+    - field.field.media.image.field_body
+    - field.field.media.image.field_boolean
+    - field.field.media.image.field_caption
+    - field.field.media.image.field_credit
+    - field.field.media.image.field_display_style
+    - field.field.media.image.field_internal_tags
+    - field.field.media.image.field_keyword_boost
+    - field.field.media.image.field_landing_display
+    - field.field.media.image.field_link
+    - field.field.media.image.field_long_text
+    - field.field.media.image.field_media_image
+    - field.field.media.image.field_paragraphs
+    - field.field.media.image.field_related_person
+    - field.field.media.image.field_research_area
+    - field.field.media.image.field_tags
+    - field.field.media.image.field_teaser
+    - field.field.media.image.field_type
+    - image.style.centered
+    - media.type.image
+  module:
+    - image
+id: media.image.video_lightbox_no_caption_credit
+targetEntityType: media
+bundle: image
+mode: video_lightbox_no_caption_credit
+content:
+  field_media_image:
+    type: image
+    label: hidden
+    settings:
+      image_link: ''
+      image_style: centered
+      image_loading:
+        attribute: lazy
+    third_party_settings: {  }
+    weight: 0
+    region: content
+hidden:
+  created: true
+  field_body: true
+  field_boolean: true
+  field_caption: true
+  field_credit: true
+  field_display_style: true
+  field_internal_tags: true
+  field_keyword_boost: true
+  field_landing_display: true
+  field_link: true
+  field_long_text: true
+  field_paragraphs: true
+  field_related_person: true
+  field_research_area: true
+  field_tags: true
+  field_teaser: true
+  field_type: true
+  langcode: true
+  name: true
+  search_api_excerpt: true
+  thumbnail: true
+  uid: true

config/sync/core.entity_view_display.media.remote_video.video_lightbox_no_caption_credit.yml

@@ -0,0 +1,108 @@
+uuid: d29b8dea-9c42-4390-8968-246c2b146ca4
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.video_lightbox_no_caption_credit
+    - field.field.media.remote_video.field_body
+    - field.field.media.remote_video.field_boolean
+    - field.field.media.remote_video.field_caption
+    - field.field.media.remote_video.field_credit
+    - field.field.media.remote_video.field_display_style
+    - field.field.media.remote_video.field_duration
+    - field.field.media.remote_video.field_internal_tags
+    - field.field.media.remote_video.field_keyword_boost
+    - field.field.media.remote_video.field_landing_display
+    - field.field.media.remote_video.field_link
+    - field.field.media.remote_video.field_long_text
+    - field.field.media.remote_video.field_media_oembed_video
+    - field.field.media.remote_video.field_paragraphs
+    - field.field.media.remote_video.field_related_person
+    - field.field.media.remote_video.field_research_area
+    - field.field.media.remote_video.field_source_name
+    - field.field.media.remote_video.field_tags
+    - field.field.media.remote_video.field_teaser
+    - field.field.media.remote_video.field_thumbnail
+    - field.field.media.remote_video.field_transcript
+    - image.style.centered
+    - media.type.remote_video
+  module:
+    - image
+    - media
+    - text
+id: media.remote_video.video_lightbox_no_caption_credit
+targetEntityType: media
+bundle: remote_video
+mode: video_lightbox_no_caption_credit
+content:
+  field_caption:
+    type: text_default
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    weight: 0
+    region: content
+  field_credit:
+    type: text_default
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    weight: 0
+    region: content
+  field_long_text:
+    type: text_default
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    weight: 3
+    region: content
+  field_media_oembed_video:
+    type: oembed
+    label: hidden
+    settings:
+      max_width: 0
+      max_height: 0
+    third_party_settings: {  }
+    weight: 2
+    region: content
+  field_thumbnail:
+    type: entity_reference_entity_view
+    label: hidden
+    settings:
+      view_mode: video_lightbox_no_caption_credit
+      link: false
+    third_party_settings: {  }
+    weight: 0
+    region: content
+  thumbnail:
+    type: image
+    label: hidden
+    settings:
+      image_link: ''
+      image_style: centered
+      image_loading:
+        attribute: lazy
+    third_party_settings: {  }
+    weight: 1
+    region: content
+hidden:
+  created: true
+  field_body: true
+  field_boolean: true
+  field_display_style: true
+  field_duration: true
+  field_internal_tags: true
+  field_keyword_boost: true
+  field_landing_display: true
+  field_link: true
+  field_paragraphs: true
+  field_related_person: true
+  field_research_area: true
+  field_source_name: true
+  field_tags: true
+  field_teaser: true
+  field_transcript: true
+  langcode: true
+  name: true
+  search_api_excerpt: true
+  uid: true

config/sync/core.entity_view_display.node.event.full.yml

@@ -210,7 +210,7 @@ content:
     type: entity_reference_entity_view
     label: hidden
     settings:
-      view_mode: video_lightbox
+      view_mode: video_lightbox_no_caption_credit
       link: false
     third_party_settings: {  }
     weight: 11

config/sync/core.entity_view_mode.media.video_lightbox_no_caption_credit.yml

@@ -0,0 +1,10 @@
+uuid: b3618ed9-afd8-467b-a345-ea81eb668a80
+langcode: en
+status: true
+dependencies:
+  module:
+    - media
+id: media.video_lightbox_no_caption_credit
+label: 'Video Lightbox (No Caption / Credit)'
+targetEntityType: media
+cache: true

web/themes/gesso/includes/media.inc

@@ -67,7 +67,7 @@ function gesso_preprocess_media(array &$variables) {
     ->toString();
   $variables['has_caption'] = isset($variables['attributes']['data-caption']);
   $variables['bundle'] = $variables['media']->bundle();
-  if ($variables['view_mode'] == 'video_lightbox') {
+  if (in_array($variables['view_mode'], ['video_lightbox', 'video_lightbox_no_caption_credit'])) {
     if ($variables['bundle'] == 'remote_video') {
       /** @var \Drupal\media\Entity\Media $video_media */
       $video_media = $variables['media'];

web/themes/gesso/source/03-components/event-details/event-details.twig

@@ -16,7 +16,9 @@
       {{ video }}
     {% elseif image %}
       {{ image }}
-      {% if not is_past_event %}<div class="c-card__gradient"></div>{% endif %}
+      {% if not is_past_event %}
+        <div class="c-card__gradient"></div>
+      {% endif %}
     {% endif %}
     {% if start_date and not is_past_event and not video %}
       {% include '@components/event-date/event-date.twig' %}
@@ -31,9 +33,9 @@
           label: 'Date',
           icon_name: 'calendar',
         } %}
-        <span{% if is_past_event %} class="is-past-event"{% endif %}>
+        <span {% if is_past_event %} class="is-past-event" {% endif %}>
           {% if calendar_link_url and not is_past_event %}
-            <a class="href="{{ calendar_link_url }}" title="{{ 'Add to calendar'|t }}">
+            <a href="{{ calendar_link_url }}" title="{{ 'Add to calendar'|t }}">
               {{ calendar_link_text|raw }}
             </a>
           {% else %}
@@ -84,7 +86,7 @@
     {% if additional_links %}
       <div class="c-event-details__section">
         {% for link in additional_links %}
-         {{ link }}
+          {{ link }}
         {% endfor %}
       </div>
     {% endif %}

web/themes/gesso/templates/media/media--image--video-lightbox-no-caption-credit.html.twig

@@ -0,0 +1,39 @@
+{#
+/**
+ * @file
+ * Default theme implementation to present a media item.
+ *
+ * Available variables:
+ * - media: The media item, with limited access to object properties and
+ *   methods. Only method names starting with "get", "has", or "is" and
+ *   a few common methods such as "id", "label", and "bundle" are available.
+ *   For example:
+ *   - entity.getEntityTypeId() will return the entity type ID.
+ *   - entity.hasField('field_example') returns TRUE if the entity includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   Calling other methods, such as entity.delete(), will result in
+ *   an exception.
+ *   See \Drupal\Core\Entity\EntityInterface for a full list of methods.
+ * - name: Name of the media item.
+ * - content: Media content.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - attributes: HTML attributes for the containing element.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ *
+ * @see template_preprocess_media()
+ *
+ * @ingroup themeable
+ */
+#}
+{% include '@components/figure/figure.twig' with {
+  'attributes': attributes.addClass('u-align-center'),
+  'media': content.field_media_image,
+  'is_video': true,
+  'video_button_label': 'Play video'
+} %}

web/themes/gesso/templates/media/media--remote-video--video-lightbox-no-caption-credit.html.twig

@@ -0,0 +1,51 @@
+{#
+/**
+ * @file
+ * Default theme implementation to present a media item.
+ *
+ * Available variables:
+ * - media: The media item, with limited access to object properties and
+ *   methods. Only method names starting with "get", "has", or "is" and
+ *   a few common methods such as "id", "label", and "bundle" are available.
+ *   For example:
+ *   - entity.getEntityTypeId() will return the entity type ID.
+ *   - entity.hasField('field_example') returns TRUE if the entity includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   Calling other methods, such as entity.delete(), will result in
+ *   an exception.
+ *   See \Drupal\Core\Entity\EntityInterface for a full list of methods.
+ * - name: Name of the media item.
+ * - content: Media content.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - attributes: HTML attributes for the containing element.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ *
+ * @see template_preprocess_media()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+  {{ title_prefix }}
+  {% if content.field_thumbnail|field_value is not empty %}
+    {{ content.field_thumbnail }}
+  {% else %}
+    {{ content.thumbnail }}
+  {% endif %}
+  {{ title_suffix }}
+  {% include '@components/video-lightbox/video-lightbox.twig' with {
+    'video_title': content.field_long_text|field_value ? content.field_long_text : name,
+    'video_date': created|date('F j, Y'),
+    'video_embed': content.field_media_oembed_video,
+    'video_description': content.field_caption|field_value,
+    'video_credit': content.field_credit|field_value,
+    'video_details_url': detail_page_url
+  } %}
+  {% set catch_cache = content|render %}
+</div>