Commit d3b4ad11 authored by Pierre Dureau's avatar Pierre Dureau
Browse files

Issue #3319153: Add Figure from https://getbootstrap.com/docs/4.6/content/figures/

parent a195d925

assets/figure-image.png

0 → 100644
+709 B
Loading image diff...

templates/patterns/figure/figure.ui_patterns.yml

0 → 100644
+18 −0
Original line number Diff line number Diff line 
figure:

  label: "Figure"

  description: "Anytime you need to display a piece of content—like an image with an optional caption, consider using figure. https://getbootstrap.com/docs/4.6/content/figures/"

  fields:

    image:

      type: "render"

      label: "Image"

      description: "Figure image"

      preview:

        - type: html_tag

          tag: img

          attributes:

            src: assets/figure-image.png

    caption:

      type: "render"

      label: "Caption"

      description: "A caption under the image."

      preview: "A caption for the above image."

templates/patterns/figure/pattern-figure.html.twig

0 → 100644
+10 −0
Original line number Diff line number Diff line 
{% if variant != '' and variant|lower != 'default' %}

  {% set attributes = attributes.addClass('jumbotron-' ~ variant|lower|replace({'_': '-'})) %}

{% endif %}



<figure{{ attributes.addClass('figure') }}>

  {{ image }}

  <figcaption class="figure-caption">

    {{ caption }}

  </figcaption>

</figure>

ui_suite_bootstrap.theme

+46 −25
Original line number Diff line number Diff line
@@ -30,7 +30,7 @@ function _ui_suite_bootstrap_add_media_path($item): array { 
    }

  }

  if (is_array($item) && array_key_exists('#type', $item)) {

    if (($item['#type'] === 'html_tag') || ($item['#tag'] === 'img')) {

    if (($item['#type'] === 'html_tag') && ($item['#tag'] === 'img')) {

      $uri = isset($item['#attributes']['src']) ? implode('/', [

        '',

        $base_path,
@@ -66,6 +66,30 @@ function _ui_suite_bootstrap_add_link_class(&$item, string $class): void { 
  }

}



/**

 * Add expected class to images.

 *

 * @param mixed $item

 *   The render element.

 * @param string $class

 *   The CSS class to add.

 */

function _ui_suite_bootstrap_add_image_class(&$item, string $class): void {

  if (is_array($item) && array_key_exists('#theme', $item)) {

    if ($item['#theme'] === 'image') {

      $item['#attributes']['class'][] = $class;

    }

    if ($item['#theme'] === 'image_formatter') {

      $item['#item_attributes']['class'][] = $class;

    }

  }

  if (is_array($item)) {

    foreach ($item as &$next) {

      _ui_suite_bootstrap_add_image_class($next, $class);

    }

  }

}



/**

 * Implements hook_preprocess_HOOK() for 'page'.

 */
@@ -83,7 +107,11 @@ function ui_suite_bootstrap_preprocess_page(array &$variables): void { 
function ui_suite_bootstrap_preprocess_pattern_card(array &$variables): void {

  if (array_key_exists('image', $variables) && is_array($variables['image'])) {

    foreach ($variables['image'] as &$item) {

      _ui_suite_bootstrap_add_card_image_class($item, $variables['variant']);

      $class = 'card-img-top';

      if ($variables['variant'] === 'overlay') {

        $class = 'card-img';

      }

      _ui_suite_bootstrap_add_image_class($item, $class);

      if ($variables['context']->getType() == 'preview') {

        $item = _ui_suite_bootstrap_add_media_path($item);

      }
@@ -96,29 +124,6 @@ function ui_suite_bootstrap_preprocess_pattern_card(array &$variables): void { 
  }

}



/**

 * Add expected class in card's image.

 */

function _ui_suite_bootstrap_add_card_image_class(&$item, string $variant): void {

  $class = 'card-img-top';

  if ($variant === 'overlay') {

    $class = 'card-img';

  }

  if (is_array($item) && array_key_exists('#theme', $item)) {

    if ($item['#theme'] === 'image') {

      $item['#attributes']['class'][] = $class;

    }

    if ($item['#theme'] === 'image_formatter') {

      $item['#item_attributes']['class'][] = $class;

    }

  }

  if (is_array($item)) {

    foreach ($item as &$next) {

      _ui_suite_bootstrap_add_card_image_class($next, $variant);

    }

  }

}



/**

 * Implements hook_preprocess_HOOK() for 'pattern_carousel'.

 *
@@ -134,6 +139,22 @@ function ui_suite_bootstrap_preprocess_pattern_carousel(array &$variables): void 
  }

}



/**

 * Implements hook_preprocess_HOOK() for 'pattern_figure'.

 *

 * See also: https://getbootstrap.com/docs/4.6/components/figures/.

 */

function ui_suite_bootstrap_preprocess_pattern_figure(array &$variables): void {

  if (array_key_exists('image', $variables) && is_array($variables['image'])) {

    foreach ($variables['image'] as &$item) {

      _ui_suite_bootstrap_add_image_class($item, 'figure-img');

      if ($variables['context']->getType() == 'preview') {

        $item = _ui_suite_bootstrap_add_media_path($item);

      }

    }

  }

}



/*

 * Implements hook_preprocess_HOOK() for 'pattern_pagination'.

 *