[CIVIC-1204] Added SVG support for Logos.

civictheme · Jul 12, 2023 · c15ea94 · c15ea94
1 parent 76d8c11
commit c15ea94
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 11 deletions.
diff --git a/docroot/themes/contrib/civictheme/civictheme_library/components/02-molecules/logo/logo.twig b/docroot/themes/contrib/civictheme/civictheme_library/components/02-molecules/logo/logo.twig
@@ -16,6 +16,7 @@
  *    - breakpoint: [object] Object with 'mobile' and 'desktop' keys:
  *       - url: [string] URL for the logo.
  *       - alt: [string] Image alt text.
+ *       - svg_logo: [content] Svg Logo (Optional).
  * - url: [string] Optional URL that wraps the logo.
  * - title: [string] Optional logo title attribute.
  * - attributes: [string] Additional attributes.
@@ -41,12 +42,16 @@
         <span class="ct-logo__stripe {{ type == 'inline' ? 'hide-xxs show-l' : '' }}"></span>
       {% endif %}
       {% for breakpoint, img in logo %}
-        {% include '@atoms/image/image.twig' with {
-          theme: theme,
-          url: img.url,
-          alt: img.alt,
-          modifier_class: 'ct-logo__image ct-logo__image--' ~ breakpoint ~ ' ' ~ (breakpoint == 'mobile' ? (type == 'inline' and logo_type == 'secondary' ? 'hide-xxs' : 'hide-l') : 'hide-xxs show-l'),
-        } only %}
+        {% if img.svg_logo %}
+          {{ img.svg_logo|raw }}
+        {% else %}
+          {% include '@atoms/image/image.twig' with {
+            theme: theme,
+            url: img.url,
+            alt: img.alt,
+            modifier_class: 'ct-logo__image ct-logo__image--' ~ breakpoint ~ ' ' ~ (breakpoint == 'mobile' ? (type == 'inline' and logo_type == 'secondary' ? 'hide-xxs' : 'hide-l') : 'hide-xxs show-l'),
+          } only %}
+        {% endif %}
       {% endfor %}
     {% endif %}
   {% endfor %}

diff --git a/docroot/themes/contrib/civictheme/includes/system_branding.inc b/docroot/themes/contrib/civictheme/includes/system_branding.inc
@@ -43,9 +43,26 @@ function civictheme_preprocess_block__system_branding_block(&$variables) {
       foreach (['desktop', 'mobile'] as $breakpoint) {
         $logo_image = civictheme_get_theme_config_manager()->load("components.logo.{$type}.{$theme}.{$breakpoint}.path", '');
         if (!empty($logo_image)) {
+          if (is_svg_extension($logo_image)) {
+            $logo_image = '/' . ltrim($logo_image, '/');
+            $modifier_class = 'ct-logo__image ct-logo__image--' . $breakpoint . ' ';
+            if ($breakpoint == 'mobile') {
+              if ($type == 'inline' && $logo_type == 'secondary') {
+                $modifier_class .= 'hide-xxs';
+              }
+              else {
+                $modifier_class .= 'hide-l';
+              }
+            }
+            else {
+              $modifier_class .= 'hide-xxs show-l';
+            }
+            $svg_logo = civictheme_embed_svg($logo_image, [$modifier_class]);
+          }
           $variables['logos'][$type][$breakpoint] = [
-            'url' => '/' . ltrim($logo_image, '/'),
+            'url' => $logo_image,
             'alt' => $logo_alt,
+            'svg_logo' => $svg_logo ?? NULL,
           ];
         }
       }

diff --git a/docroot/themes/contrib/civictheme/includes/utilities.inc b/docroot/themes/contrib/civictheme/includes/utilities.inc
@@ -753,3 +753,17 @@ function _civictheme_feature_optout_flags() {
     'components.link.email' => t('Email links processing'),
   ];
 }
+
+/**
+ * Checks if a file path has the SVG extension.
+ *
+ * @param string $file_path
+ *   File path to check.
+ *
+ * @return bool
+ *   TRUE if the file path has SVG extension, FALSE otherwise.
+ */
+function is_svg_extension($file_path) {
+  $extension = pathinfo($file_path, PATHINFO_EXTENSION);
+  return strtolower($extension) === 'svg';
+}
diff --git a/docroot/themes/contrib/civictheme/src/Settings/CivicthemeSettingsFormSectionBase.php b/docroot/themes/contrib/civictheme/src/Settings/CivicthemeSettingsFormSectionBase.php
@@ -11,6 +11,7 @@
 use Drupal\Core\File\FileSystemInterface;
 use Drupal\Core\File\FileUrlGenerator;
 use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Image\ImageFactory;
 use Drupal\Core\Messenger\Messenger;
 use Drupal\Core\StreamWrapper\StreamWrapperManager;
 use Drupal\Core\StringTranslation\StringTranslationTrait;
@@ -75,6 +76,13 @@ abstract class CivicthemeSettingsFormSectionBase implements ContainerInjectionIn
    */
   protected $themeConfigManager;
 
+  /**
+   * The image factory.
+   *
+   * @var \Drupal\Core\Image\ImageFactory
+   */
+  protected $imageFactory;
+
   /**
    * Constructor.
    *
@@ -92,15 +100,18 @@ abstract class CivicthemeSettingsFormSectionBase implements ContainerInjectionIn
    *   Config manager.
    * @param \Drupal\civictheme\CivicthemeConfigManager $civictheme_config_manager
    *   Theme config manager.
+   * @param \Drupal\Core\Image\ImageFactory $image_factory
+   *   The image factory.
    */
-  public function __construct(ThemeManager $theme_manager, ThemeExtensionList $theme_extension_list, FileSystem $file_system, FileUrlGenerator $file_url_generator, Messenger $messenger, ConfigManager $config_manager, CivicthemeConfigManager $civictheme_config_manager) {
+  public function __construct(ThemeManager $theme_manager, ThemeExtensionList $theme_extension_list, FileSystem $file_system, FileUrlGenerator $file_url_generator, Messenger $messenger, ConfigManager $config_manager, CivicthemeConfigManager $civictheme_config_manager, ImageFactory $image_factory) {
     $this->themeManager = $theme_manager;
     $this->themeExtensionList = $theme_extension_list;
     $this->fileSystem = $file_system;
     $this->fileUrlgenerator = $file_url_generator;
     $this->messenger = $messenger;
     $this->configManager = $config_manager;
     $this->themeConfigManager = $civictheme_config_manager;
+    $this->imageFactory = $image_factory;
   }
 
   /**
@@ -114,7 +125,8 @@ public static function create(ContainerInterface $container) {
       $container->get('file_url_generator'),
       $container->get('messenger'),
       $container->get('config.manager'),
-      $container->get('class_resolver')->getInstanceFromDefinition(CivicthemeConfigManager::class)
+      $container->get('class_resolver')->getInstanceFromDefinition(CivicthemeConfigManager::class),
+      $container->get('image.factory')
     );
   }
 

diff --git a/docroot/themes/contrib/civictheme/src/Settings/CivicthemeSettingsFormSectionComponents.php b/docroot/themes/contrib/civictheme/src/Settings/CivicthemeSettingsFormSectionComponents.php
@@ -26,6 +26,8 @@ public function weight() {
    * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
    */
   public function form(&$form, FormStateInterface &$form_state) {
+    $allowed_extensions = $this->imageFactory->getSupportedExtensions();
+    $allowed_extensions[] = 'svg';
     $form['components'] = [
       '#type' => 'vertical_tabs',
       '#title' => $this->t('Components'),
@@ -92,7 +94,7 @@ public function form(&$form, FormStateInterface &$form_state) {
               '@public' => rtrim($this->toFriendlyFilePath($this->getDefaultFileScheme()), '/'),
             ]),
             '#upload_validators' => [
-              'file_validate_is_image' => [],
+              'file_validate_extensions' => [implode(' ', $allowed_extensions)],
             ],
           ];
         }
@@ -195,7 +197,7 @@ public function form(&$form, FormStateInterface &$form_state) {
         '@public' => rtrim($this->toFriendlyFilePath($this->getDefaultFileScheme()), '/'),
       ]),
       '#upload_validators' => [
-        'file_validate_is_image' => [],
+        'file_validate_extensions' => [implode(' ', $allowed_extensions)],
       ],
     ];