Merge pull request #176 from City-of-Helsinki/UHF-X_media_libary_bug_fix

UHF-X Media library bug fix

hdbt_admin.theme

@@ -7,6 +7,7 @@
 
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Language\LanguageInterface;
+use Drupal\media\MediaInterface;
 
 /**
  * Implements hook_preprocess().
@@ -375,3 +376,26 @@ function hdbt_admin_manipulate_custom_fields(array &$form) {
     $form['hide_sidebar_navigation']['#type'] = 'hidden';
   }
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function hdbt_admin_preprocess_media(&$variables) {
+  if (
+    isset($variables['media']) &&
+    $variables['media'] instanceof MediaInterface &&
+    $variables['media']->bundle() === 'image'
+  ) {
+    $current_language = $variables['current_langcode'];
+    $route = \Drupal::routeMatch();
+    if (!empty($route->getParameter('target'))) {
+      $current_language = $route->getParameter('target')->getId();
+    }
+
+    if ($variables['media']->hasTranslation($current_language)) {
+      $alt = $variables['media']
+        ->getTranslation($current_language)->field_media_image->alt;
+      $variables['alt_text'] = $alt !== '""' ? $alt : FALSE;
+    }
+  }
+}

src/scss/06_components/entity/__index.scss

@@ -1,2 +1,3 @@
+@import 'media';
 @import 'hel-map';
 @import 'helfi-chart';

src/scss/06_components/entity/_media.scss

@@ -0,0 +1,12 @@
+.media-library-item__name,
+.media-library-item__alt {
+  font-size: 0.875rem;
+}
+
+.media-library-item__alt {
+  font-weight: 500;
+
+  span {
+    font-weight: 400;
+  }
+}

src/scss/06_components/views/_media-library.scss

@@ -2,9 +2,20 @@
   .media-library-item__click-to-select-checkbox .form-boolean {
     box-shadow: 0 3px 6px $color-black-50;
   }
+  .pager {
+    width: 100%;
+  }
+}
 
-  // Override edit-button position for media library widget.
+// Override edit-button position for media library widget.
+[dir="ltr"] .media-library-view--widget .media-library-item {
   .media-library-item__edit {
     right: 0.5rem;
   }
 }
+
+[dir="rtl"] .media-library-view--widget .media-library-item {
+  .media-library-item__edit {
+    left: 0.5rem;
+  }
+}

templates/entity/media--media-library.html.twig

@@ -0,0 +1,64 @@
+{#
+/**
+ * @file
+ * Theme override of a media item in the media library.
+ *
+ * This is used for media that the user can select from the grid of media
+ * items. It is not used for items that have already been selected in the
+ * corresponding field widget, or for items that have been previously selected
+ * before adding new media to the library.
+ *
+ * Available variables:
+ * - media: The entity 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.
+ * - 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.
+ * - url: Direct URL of the media.
+ * - preview_attributes: HTML attributes for the preview wrapper.
+ * - metadata_attributes: HTML attributes for the expandable metadata area.
+ * - status: Whether or not the Media is published.
+ *
+ * @see template_preprocess_media()
+ *
+ * @ingroup themeable
+ */
+#}
+
+<article{{ attributes.addClass('media-library-item__preview-wrapper') }}>
+  {% if content %}
+    <div{{ preview_attributes.addClass('media-library-item__preview js-media-library-item-preview') }}>
+      {{ content|without('name') }}
+    </div>
+    {% if not status %}
+      <div class="media-library-item__status">{{ "unpublished" | t }}</div>
+    {% endif %}
+    <div{{ metadata_attributes.addClass('media-library-item__attributes') }}>
+      <div class="media-library-item__name">{{ name }}</div>
+
+      <div class="media-library-item__alt">
+        {% if alt_text %}
+          {{ 'Alt'|t({}, {'context': 'Alt text in media library'}) }}:
+          <span>{{ alt_text }}</span>
+        {% else %}
+          {{ 'Alt'|t({}, {'context': 'Alt text in media library'}) }}:
+          <span>"" ({{ 'Empty'|t({}, {'context': 'Empty alt text in media library'}) }})</span>
+        {% endif %}
+      </div>
+    </div>
+  {% endif %}
+</article>

translations/fi.po

@@ -5,6 +5,10 @@ msgctxt "Accent color"
 msgid "Accent"
 msgstr "Korosteväri"
 
+msgctxt "Empty alt text in media library"
+msgid "Empty"
+msgstr "Tyhjä"
+
 msgid "Basic motif"
 msgstr "Perus"
 

translations/sv.po

@@ -1,5 +1,9 @@
 msgid ""
 msgstr ""
 
+msgctxt "Empty alt text in media library"
+msgid "Empty"
+msgstr "Tom"
+
 msgid "Published on"
 msgstr "Publicerad på"