Merge pull request #1357 from CuBoulder/issue/1356

Fixes Slider block link color and special character rendering
CuBoulder · Oct 3, 2024 · df87d53 · df87d53
2 parents d2a737b + 3d3ac6f
commit df87d53
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 39 deletions.
diff --git a/css/block/slider.css b/css/block/slider.css
@@ -138,6 +138,17 @@
   max-width: calc(100% - 100px);
 }
 
+.ucb-slider-block .slide-text-container .slide-text a:link,
+.ucb-slider-block .slide-text-container .slide-text a:visited {
+  color: var(--ucb-gold);
+}
+
+.ucb-slider-block .slide-text-container .slide-text a:hover,
+.ucb-slider-block .slide-text-container .slide-text a:active,
+.ucb-slider-block .slide-text-container .slide-text a:focus {
+  color: #FFF;
+}
+
 .ucb-slider-block .carousel-inner a:hover {
   cursor: pointer;
 }

diff --git a/templates/paragraphs/paragraph--slider-image.html.twig b/templates/paragraphs/paragraph--slider-image.html.twig
@@ -1,17 +1,14 @@
 {#
 /**
- * @file
- * Theme to format images that appear within the Image Slider Paragraph
- *
+ * @file Contains the template to render a Slider Image paragraph.
+ */
 #}
-{%
-  set classes = [
-    'paragraph',
-    'paragraph--type--' ~ paragraph.bundle|clean_class,
-    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
-    not paragraph.isPublished() ? 'paragraph--unpublished'
-  ]
-%}
+{% set classes = [
+  'paragraph',
+  'paragraph--type--' ~ paragraph.bundle|clean_class,
+  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+  not paragraph.isPublished() ? 'paragraph--unpublished'
+] %}
 
 {# set paragraph's parent for field information #}
 {% set parent = paragraph._referringItem.parent.parent.entity %}
@@ -31,37 +28,39 @@
 {% set imgUrl = paragraph.field_slide_image.entity.field_media_image.entity.fileuri|image_style(imgStyle) %}
 {% set imgAlt = paragraph.field_slide_image.entity.field_media_image.alt %}
 
-
 {% block paragraph %}
   {% block content %}
     <div class="slide-image-container">
       {% if paragraph.field_slide_link.0.url is not empty %}
-        <a href="{{ paragraph.field_slide_link.0.url }}">
-          <img{{create_attribute({src:imgUrl,alt:imgAlt})}}></a>
-        {% else %}
-          <img{{create_attribute({src:imgUrl,alt:imgAlt})}}>
+        <a{{ create_attribute({ href: paragraph.field_slide_link.0.url|render }) }}>
+          <img{{ create_attribute({ src: imgUrl, alt: imgAlt }) }}>
+        </a>
+      {% else %}
+        <img{{ create_attribute({ src: imgUrl, alt: imgAlt }) }}>
+      {% endif %}
+    </div>
+    {% if paragraph.field_slide_title.value is not empty or paragraph.field_slide_image_text is not empty %}
+      <div class="carousel-caption d-md-block">
+        <div class="slide-text-container">
+          {% if paragraph.field_slide_title is not empty %}
+            <span>
+              <h3>
+                {{ content.field_slide_title['#items'].0.value|trim }}
+                {% if paragraph.field_slide_link.0.url is not empty %}
+                  <a{{ create_attribute({ href: paragraph.field_slide_link.0.url|render, class: 'slide-link' }) }}>
+                    <i class="fa-solid fa-up-right-from-square"></i>
+                  </a>
+                {% endif %}
+              </h3>
+            </span>
           {% endif %}
-        </div>
-        {% if paragraph.field_slide_title.value is not empty or paragraph.field_slide_image_text is not empty %}
-          <div class="carousel-caption d-md-block">
-            <div class="slide-text-container">
-              {% if paragraph.field_slide_title is not empty %}
-                <span>
-                  <h3>{{ content.field_slide_title|render|striptags|trim }}
-                    {% if paragraph.field_slide_link.0.url is not empty %}
-                      <a href="{{ paragraph.field_slide_link.0.url }}" class="slide-link">
-                        <i class="fa-solid fa-up-right-from-square"></i>
-                      </a>
-                    {% endif %}
-                  </h3>
-                </span>
-
-              {% endif %}
-              {% if paragraph.field_slide_image_text.value is not empty %}
-                <p>{{ content.field_slide_image_text|render }}</p>
-              {% endif %}
+          {% if paragraph.field_slide_image_text.value is not empty %}
+            <div class="slide-text">
+              {{ content.field_slide_image_text }}
             </div>
-          </div>
-        {% endif %}
-      {% endblock %}
-    {% endblock paragraph %}
+          {% endif %}
+        </div>
+      </div>
+    {% endif %}
+  {% endblock %}
+{% endblock %}