Images

At Vanilo Cloud, images can be assigned to products, taxonomies and taxons.

Each of these can have 0, 1 or multiple images. When there are multiple images, one of them can be marked as the primary image of the product, taxonomy or taxon.

Images can be uploaded manually in the Shop Admin Panel or automated via the Admin REST API.

Uploaded images will be stored in their original size and format, and they will also be resized to several variants like "thumbnail", "medium", etc. You can freely define the sizes of these variants based on what your shop layout requires.

Configuration

The image sizes need to be defined in the config/vanilo.json file under the foundation.image.variants key:

{
    "foundation": {
        "image": {
            "variants": {
                "thumbnail": {
                    "width": 250,
                    "height": 250,
                    "fit": "crop"
                },
                "medium": {
                    "width": 500,
                    "height": 360,
                    "fit": "crop"
                }
            }
        }
    }
}

For all details about the image configuration, refer to the Configuration Page.

Regenerating Images

When the image configuration changes then it will only apply to the newly uploaded images.

If you want to apply the changes to all previously uploaded images, then you need to start the "Regenerate Images" action from the Shop Admin panel

Using Images In Templates

The associated images can be used in twig or blade templates:

<h2>{{ $product->title }}</h2>
@if($product->hasImage())
    <img src="{{ $product->getThumbnailUrl() }}" />
@else
 <p>This product has no image</p>
@endif

The following methods are available for getting the images of an entry:

Method	What it does
hasImage()	Returns true if the entry has at least one image, false otherwise
imageCount()	Returns the number of associated images
getImageUrl('variant')	Returns the URL of the primary image 'variant', or null if there's no image associated
getImageUrls('variant')	Returns the list of URLs of all images in the given variant, or an empty collection if there's no image associated
getThumbnailUrl()	A shortcut to getImageUrl('thumbnail')
getThumbnailUrls()	A shortcut to getImageUrls('thumbnail')

Example:

<h1>{{ $product->title }}</h1>
<img src="{{ $product->getImageUrl('wide')" />

<section>
@foreach($product->getImageUrls('thumbnail') as $thumbnail)
   <img src="{{ $thumbnail }}" />
@endforeach
</section>