footballrs.net

Image 

<img class="image " src="https://loremflickr.com/400/300/city" alt="Ipsa repudiandae ex animi reprehenderit." />
 
{% set srcset = image.srcset ? ' srcset="' ~ image.srcset ~ '"' : '' %}
{% set src = image.src ? image.src : '' %}
{% set sizes = image.img_sizes ? ' sizes="' ~ image.img_sizes ~ '"' : '' %}
{% set alt = image.alt ? ' alt="' ~ image.alt ~ '"' : '' %}
{% set className = className ?? '' %}

<img class="image {{ className }}" src="{{ src }}"{{ srcset }}{{ sizes }}{{ alt }}/>
 
{
  "image": {
    "src": "https://loremflickr.com/400/300/city",
    "alt": "Ipsa repudiandae ex animi reprehenderit."
  }
}
  • Content: 
    <?php

namespace Theme\Views\Atoms\image;

use ACFToolkit\FieldClasses\Message;
use ACFToolkit\Traits\SetWrapperWidth;
use ACFToolkit\Types\CustomAtom;

class Image extends CustomAtom
{
    use SetWrapperWidth;

    public string $name = 'image';
    public string $label = 'Image';
    public int $needsJs = 0;
    public int $needsVue = 0;
    public int $needsVueInitialisation = 0;

    public function __construct($name = '', $title = '', $children = [])
    {
        $imageChildren = [];
        $breakpoints = config('responsive.breakpoints');

        parent::__construct($name, $title);
        foreach ($breakpoints as $breakpoint) {
            $imageChildren[] = (\ACFToolkit\FieldClasses\Image::getInstance(
                $this->getPrefixedName($this->name, 'image_' . $breakpoint['name']),
                $title.' '.$breakpoint['label']
            ))
                ->setWrapperWidth(100/count($breakpoints));
        }
        $this->addChildren(array_merge($children, $imageChildren));
    }

    public function setImageInfo($imageInfoHtml)
    {
        array_unshift(
            $this->children,
            (Message::getInstance($this->getPrefixedName($this->name, 'image_size_info'), 'Image Size info'))
                ->setMessage($imageInfoHtml)
        );
        return $this;
    }
}
  • URL: /components/raw/image/Image.php
  • Filesystem Path: resources/Views/Atoms/image/Image.php
  • Size: 1.3 KB
  • Content: 
    <?php

namespace Theme\Views\Atoms\image;

use ACFToolkit\ViewModels\BaseViewModel;
use Timber\Image;

class ImageViewModel extends BaseViewModel
{
    public function image($size = 'full')
    {
        $result = [
            'sources' => [],
        ];

        $breakpoints = config('responsive.breakpoints');
        $defaultImage = null;
        $maxIndex = 0;

        foreach ($breakpoints as $breakpoint) {
            $name = $breakpoint['name'];
            $data = $this->getPrefixedData('image_' . $name);
            $image = new Image($data);
            $src = $image->src($size);
            if (!empty($src)) {
                if (!isset($defaultImage) || $breakpoint['index'] > $maxIndex) {
                    $defaultImage = $image;
                }
                $result['sources'][] = [
                    'width' => $image->width(),
                    'height' => $image->height(),
                    'media' => $breakpoint['media'],
                    'src' => $src,
                ];
            }
        }
        $result['default'] = $defaultImage;
        return $result;
    }
}
  • URL: /components/raw/image/ImageViewModel.php
  • Filesystem Path: resources/Views/Atoms/image/ImageViewModel.php
  • Size: 1.1 KB
  • Content: 
    .image {


/* CHILDREN */


/* /CHILDREN */

}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: resources/Views/Atoms/image/image.scss
  • Size: 47 Bytes

No notes defined.