footballrs.net

Picture 

<picture class="picture ">
    <img class="" src="" width="" height="" alt="">
</picture>
 
{% set isPatternlab = isPatternlab() %}
{% set minWidth = default.width %}
{% set minHeight = default.height %}

<picture class="picture {{ className }}">
    {% for source in sources %}
        {% if source.src is not empty %}
            {% if source.width is not empty and source.width < minWidth %}
                {% set minWidth = source.width %}
            {% endif %}
            {% if source.height is not empty and source.height < minHeight %}
                {% set minHeight = source.height %}
            {% endif %}

            {% if isPatternlab %}
                <source
                        srcset="{{ source.src }}"
                        media="{{ source.media }}"
                        type="image/webp"
                />
                <source
                        srcset="{{ source.src }}"
                        media="{{ source.media }}"
                />
            {% else %}
                <source
                        srcset="{{ source.src|towebp }} 1x"
                        media="{{ source.media }}"
                        type="image/webp"
                />
                <source
                        srcset="{{ source.src }} 1x"
                        media="{{ source.media }}"
                />
            {% endif %}
        {% endif %}
    {% endfor %}
    <img class="{{ className }}" {% if default.srcset is empty %}src="{{ default.src }}"
         {% else %}srcset="{{ default.srcset }}"{% endif %}{% if ignoreDimensions is not defined %} width="{{ minWidth }}" height="{{ minHeight }}"{% endif %}
         alt="{{ default.alt }}">
</picture>
 
{
  "picture": {
    "default": {
      "src": "https://loremflickr.com/800/600/business",
      "alt": "Repellendus quam omnis harum sunt.",
      "width": 800,
      "height": 600
    },
    "sources": [
      {
        "src": "https://loremflickr.com/800/600/business",
        "media": "(max-width: 2560px)"
      }
    ]
  }
}
  • Content: 
    <?php

namespace Theme\Views\Atoms\picture;

use ACFToolkit\Types\CustomAtom;
use Theme\Views\Atoms\image\Image;

class Picture extends CustomAtom
{
    public string $name = 'picture';
    public string $label = 'Picture';
    public int $needsJs = 0;
    public int $needsVue = 0;
    public int $needsVueInitialisation = 0;

    public function __construct($name = '', $title = '', $children = [])
    {
        parent::__construct($name, $title);
        $this->addChildren(array_merge($children, [
            ...(Image::getInstance($this->getPrefixedName($this->name, 'picture'), 'Image'))
                ->getChildren()
        ]));
    }
}
  • URL: /components/raw/picture/Picture.php
  • Filesystem Path: resources/Views/Atoms/picture/Picture.php
  • Size: 648 Bytes
  • Content: 
    <?php

namespace Theme\Views\Atoms\picture;

use ACFToolkit\ViewModels\BaseViewModel;
use Theme\Views\Atoms\image\ImageViewModel;

class PictureViewModel extends BaseViewModel
{
    public function image()
    {
        return (new ImageViewModel($this->data, $this->getPrefixedName('picture')))->image();
    }

    protected function getFlexibleContentParameters()
    {
        return $this->image();
    }
}
  • URL: /components/raw/picture/PictureViewModel.php
  • Filesystem Path: resources/Views/Atoms/picture/PictureViewModel.php
  • Size: 412 Bytes

No notes defined.