Image

Plain image

This is a image
Hey, I am a caption for an image
<!-- image.blade.php -->
<figure class="c-image" data-uid="6606b8c08f9e7">
     
        <img src="https://picsum.photos/id/1026/300/200" alt="This is a image" class="c-image__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

This is a image
Click image to open a modal with a bigger image example

Warning: Undefined array key "width" in /tmp/blade-cache/2a602ce46213d19c8383acaa70c5d93994612346.php on line 14

Warning: Undefined array key "height" in /tmp/blade-cache/2a602ce46213d19c8383acaa70c5d93994612346.php on line 15

Warning: Undefined array key "srcset" in /tmp/blade-cache/2a602ce46213d19c8383acaa70c5d93994612346.php on line 16

Deprecated: htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/BaseController.php on line 418

Deprecated: htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/BaseController.php on line 418

Deprecated: htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/BaseController.php on line 418
This is a image
<!-- image.blade.php -->
<figure class="c-image" data-uid="6606b8c08fa81">
     
        <img src="https://picsum.photos/id/1028/300/200" alt="This is a image" class="c-image__image c-image__modal" data-open="6606b8c08fa77" />
                    <figcaption>
                                    <span class="c-image__caption">Click image to open a modal with a bigger image example</span><br>
                                            </figcaption>
            </figure>

    <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--padding-3 c-modal--overlay-dark" aria-modal="true" aria-labelledby="modal__label__6606b8c08fa77" id="6606b8c08fa77" data-uid="6606b8c08fb90">

    <div class="c-modal__header">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__6606b8c08fa77" data-uid="6606b8c08fbf9">
    Click image to open a modal with a bigger image example
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" target="_top" data-close="" aria-label="close" type="button" data-uid="6606b8c08fc72">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols-outlined material-symbols-outlined--filled c-icon--size-lg" aria-hidden="true" material-symbol="close" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6606b8c08fce3">
                close
    </span>
            </span>
        
        
    </span> </button>    </div>

    <section class="c-modal__content" tabindex="2">

        
        
        <br />
<b>Warning</b>:  Undefined array key "width" in <b>/tmp/blade-cache/2a602ce46213d19c8383acaa70c5d93994612346.php</b> on line <b>14</b><br />
<br />
<b>Warning</b>:  Undefined array key "height" in <b>/tmp/blade-cache/2a602ce46213d19c8383acaa70c5d93994612346.php</b> on line <b>15</b><br />
<br />
<b>Warning</b>:  Undefined array key "srcset" in <b>/tmp/blade-cache/2a602ce46213d19c8383acaa70c5d93994612346.php</b> on line <b>16</b><br />
<br />
<b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/BaseController.php</b> on line <b>418</b><br />
<br />
<b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/BaseController.php</b> on line <b>418</b><br />
<br />
<b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/BaseController.php</b> on line <b>418</b><br />
<!-- image.blade.php -->
<figure class="c-image" data-uid="6606b8c08fb1e">
     
        <img src="https://picsum.photos/id/1028/300/200" alt="This is a image" width="" height="" srcset="" class="c-image__image" />
            </figure>

        
            </section>

    
    </dialog>
@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

This is a image
Image with rounded corners (default size: md)
<!-- image.blade.php -->
<figure class="c-image c-image--radius-1" data-uid="6606b8c08fd7f">
     
        <img src="https://picsum.photos/id/1032/300/200" alt="This is a image" class="c-image__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" data-uid="6606b8c08fdf6">
            
        <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-outlined material-symbols-outlined--filled c-icon--size-xl" material-symbol="broken_image" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6606b8c08fe32">
                broken_image
    </span>
            
                            <label class="c-image__placeholder-text">
                    Image missing
                </label>
                        
        </div>
        
    </figure>
@image([
    'src'=> false,
    'alt' => "This is a image not found",
    'caption' => "Hey, I am a caption for an missing image",
])
@endimage

Blade component parameters

Key Default value Type Available values Description
src false boolean - -
alt string - Alt text of the image
caption string - Image caption
byline false boolean - placed under the caption
fullWidth false boolean - -
rounded false boolean - Border radius of the image, false for no radius. Accepted values are xs, sm, md, lg, full
openModal false boolean - If the image should be able to open in a modal
placeholderText Image missing string - Label to show if image is missing
placeholderIcon broken_image string - Icon to display if image is missing / false to hide
placeholderIconSize xl string - Icons size, please refer to image component for size.
imgAttributeList [] array - Attributes for the img element.
removeCaption false boolean - Shows only the alt-text removing the image caption and byline
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