Image

Plain image

<!-- image.blade.php -->
    <figure class="c-image" data-uid="678b0c93befe6">
         
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/1026/300/200" 
    alt="This is a image"
    
/>            <figcaption>
                <span class="c-image__caption">Hey, I am a caption for an image</span><br>
              </figcaption>
            </figure>

@image([
    'src'=> "https://picsum.photos/id/1026/300/200",
    'alt' => "This is a image",
    'caption' => "Hey, I am a caption for an image",
])
@endimage

Image in modal

Warning: The parameter "openModal" is not recognized in the component "image" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 244

<br />
<b>Warning</b>:  The parameter <b>"openModal"</b> is not recognized in the component <b>"image"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>244</b><br />
<!-- image.blade.php -->
    <figure class="c-image" data-uid="678b0c93bf374">
         
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/1028/300/200" 
    alt="This is a image"
    
/>            <figcaption>
                <span class="c-image__caption">Click image to open a modal with a bigger image example</span><br>
              </figcaption>
            </figure>

@image([
    'src'=> "https://picsum.photos/id/1028/300/200",
    'alt' => "This is a image",
    'caption' => "Click image to open a modal with a bigger image example",
    'openModal' => true
])
@endimage

Rounded corners

<!-- image.blade.php -->
    <figure class="c-image c-image--radius-1" data-uid="678b0c93bf5ca">
         
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/1032/300/200" 
    alt="This is a image"
    
/>            <figcaption>
                <span class="c-image__caption">Image with rounded corners (default size: md)</span><br>
              </figcaption>
            </figure>

@image([
    'src'=> "https://picsum.photos/id/1032/300/200",
    'alt' => "This is a image",
    'caption' => "Image with rounded corners (default size: md)",
    'rounded' => true
])
@endimage

Missing plain image

<!-- image.blade.php -->
    <figure class="c-image c-image--is-placeholder c-image--is-placeholder" data-uid="678b0c93bf82b">
                    <div class="c-image__placeholder" aria-label="This is a image not found">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--broken-image c-icon--material c-icon--material-broken_image material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-xxl" material-symbol="broken_image" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0c93bf95d">
                    </span>
          </div>
            </figure>

@image([
    'src'=> false,
    'alt' => "This is a image not found",
    'caption' => "Hey, I am a caption for an missing image",
])
@endimage

Full width image

<!-- image.blade.php -->
    <figure class="c-image c-image--full-width" data-uid="678b0c93bfc6a">
         
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/1026/1024/400" 
    alt="This is a image"
    
/>                        </figure>

@image([
    'src'=> "https://picsum.photos/id/1026/1024/400",
    'alt' => "This is a image",
    'fullWidth' => true
])
@endimage

Cover image

<!-- image.blade.php -->
    <figure class="c-image c-image--cover" data-uid="678b0c93bfec8">
         
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/1026/1024/400" 
    alt="This is a image"
    
/>                        </figure>

@image([
    'src'=> "https://picsum.photos/id/1026/1024/400",
    'alt' => "This is a image",
    'cover' => true
])
@endimage

Blade component parameters

Key	Default value	Type	Available values	Description
src	false	boolean	-	A string containing a valid URL or an ImageInterface object. If the object is used, the srcset attribute is ignored.
srcset	false	boolean	-	A string containing a valid srcset attribute. Ignored if src is an ImageInterface object.
alt		string	-	Alt text of the imag. May override the alt text of the ImageInterface object.
caption		string	-	Image caption. That will be visible for the user.
removeCaption	false	boolean	-	Removes the visible caption. The caption may still be used as an alt-text for the image.
byline		string	-	Byline for additional information, placed under the caption
fullWidth	false	boolean	-	If the image should obtain the --full-width modifier.
cover	false	boolean	-	If the image should obtain the --cover modifier.
rounded	false	boolean	-	Border radius of the image, false for no radius. Accepted values are xs, sm, md, lg, full (circle)
placeholderEnabled	true	boolean	-	If the placeholder should be enabled, if false, the component will not render at all if the src is empty
placeholderText	false	boolean	-	Label to show if image is missing
placeholderIcon	broken_image	string	-	Icon to display if image is missing / false to hide
placeholderIconSize	xxl	string	-	Icons size, please refer to image component for size.
imgAttributeList	[]	array	-	Attributes for the img element.
lqipEnabled	true	boolean	-	If the low quality image placeholder should be enabled.
calculateAspectRatio	true	boolean	-	If the aspect ratio should be calculated based on the image dimensions. This option will be ignored if cover is set to true.
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes
containerAware	false	boolean	true/false	Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.

Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Image/image.json