Skip to content
Snippets Groups Projects
Commit 75cc3cb9 authored by Rajab Natshah's avatar Rajab Natshah
Browse files

Issue #3357698: Improve the Image atom SDC component with Bootstrap 5 Image...

Issue #3357698: Improve the Image atom SDC component with Bootstrap 5 Image component options and Utility Classes
parent 54f39142
No related branches found
No related tags found
No related merge requests found
# Image
Image component with responsive behavior for the system image.
## Bootstrap Documentation
https://getbootstrap.com/docs/5.2/content/images
https://getbootstrap.com/docs/5.2/content/images/#responsive-images
## Available Properties:
#### Aligning images (`align`):
(optional) Align images with the helper float classes or text alignment classes.
block-level images can be centered using the .mx-auto margin utility class.
options (`start`, `center`, `end`)
#### Responsive image (`responsive`):
(optional) Images in Bootstrap are made responsive with `.img-fluid`.
This applies max-width with 100% and height with auto to the image so that
it scales with the parent width.
#### Image thumbnails (`thumbnails`):
(optional) In addition to Bootstrap border-radius utilities, you can use
`.img-thumbnail` to give an image a rounded 1px border appearance.
#### Rounded image (`rounded`):
(optional) Rounded image
#### Utility Classes (`utility_classes`):
(optional) This property contains an array of utility classes that can be used to
add extra Bootstrap utility classes or custom classes to this component.
### Examples
**Example #1:** Default system image
```
{% include 'varbase_components:image' %}
```
**Example #2:** Use the Image component with Responsive image
```
{% include 'varbase_components:image' with {
responsive: true
}
%}
```
**Example #3:** Use the Image component with align center, rounded, and thumbnails
```
{% include 'varbase_components:image' with {
align: 'center',
responsive: true,
rounded: true,
thumbnails: true,
}
%}
```
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: Image
status: BETA
componentType: atom
description: Image component with responsive behavior for the system image.
props:
type: object
properties:
align:
type: string
title: Aligning images
description: (optional) Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.
enum:
- ''
- start
- center
- end
responsive:
type: boolean
title: Responsive image
description: (optional) Images in Bootstrap are made responsive with `.img-fluid`. This applies max-width with 100% and height with auto to the image so that it scales with the parent width.
thumbnails:
type: boolean
title: Image thumbnails
description: (optional) In addition to Bootstrap border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.
rounded:
type: boolean
title: Rounded image
utility_classes:
type: array
title: Utility Classes
description: (optional) An array of utility classes. Use this property to add extra Bootstrap utility classes or your custom class over to this to this component.
attributes:
type: Drupal\Core\Template\Attribute
name: Attributes
style_name:
type: string:
title: Style name
description: (optional) The name of the image style applied.
title: "Atoms/Image"
description:
component: "Image component description."
## Canvas height
height: 150
## Responsive image settings
responsive:
description: boolean
default: false
table:
category: settings
## alignment settings
align:
description: Bootstrap class
table:
category: settings
default: 'left'
options:
'Left': 'float-start'
'Center': 'mx-auto d-block'
'Right': 'float-end'
\ No newline at end of file
{#
/**
* @file
* Template for an Image component.
* Varbase Components implementation of an image.
*
* Available properties:
* - align: (optional) Align images with the helper float classes or text alignment classes.
block-level images can be centered using the .mx-auto margin utility class.
options (`float-start`, `mx-auto d-block`, `float-end`)
* - responsive: (optional) Images in Bootstrap are made responsive with `.img-fluid`. This applies max-width with 100% and height with auto to the image so that it scales with the parent width.
* - thumbnails: (optional) In addition to Bootstrap border-radius utilities, you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
* - rounded: (optional) Rounded image
* - utility_classes: (optional) An array of utility classes. Use this property to add extra Bootstrap utility classes or your custom class over to this to this component.
*
* Available variables:
* - attributes: HTML attributes for the img tag.
* - style_name: (optional) The name of the image style applied.
*
* Available config:
* - utility_classes: An array of utility classes.
* - align: left|right|center
* - responsive: true|false
*/
#}
{% set aligning = {
start: ['float-start'],
center: ['mx-auto', 'd-block'],
end: ['float-end'],
} %}
{% set align = align ? aligning[align]: [] %}
{% set responsive = responsive ? ['img-fluid'] : [] %}
{% set thumbnails = thumbnails ? ['img-thumbnail'] : [] %}
{% set rounded = rounded ? ['rounded'] : [] %}
{% set utility_classes = utility_classes ? utility_classes : [] %}
{% set responsive = responsive ? 'img-fluid' : 'img-thumbnail' %}
{% set align = align ?? '' %}
{% set classes = [
responsive,
align
]|merge(utility_classes ? utility_classes : []) %}
{% set classes = []|merge(align)|merge(responsive)|merge(thumbnails)|merge(rounded)|merge(utility_classes) %}
<img{{ attributes.setAttribute('src', src).addClass(classes) }} />
<img{{ attributes.addClass(classes) }} />
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment