Gallery Field (PRO)

Images

It has the same settings as the File Field, with the additional setting for file groups.

Result:

Each image is edited separately:

Thumbnail Example:

{"webp":{"w":120,"h":90,"q":90,"zc":"1","bg":"000000","f":"webp"}}

This configuration generates thumbnails sized 120x90 pixels, saves them in the webp folder, and stores them in webp format.

Output:

{$images|print}

[images] => Array
(
    [0] => Array
        (
            [id] => 29
            [path] => assets/images/1/34/
            [filename] => z2ovxw9d7dk.jpg
            [extension] => jpg
            [provider] => 
            [name] => z2ovxw9d7dk
            [title] => 
            [description] => 
            [width] => 600
            [height] => 405
            [size] => 27414
            [url] => assets/images/1/34/z2ovxw9d7dk.jpg
            [preview] => 
            [type] => image
            [groups] => ["1","2"]
        )

    [1] => Array
        (
            [id] => 30
            [path] => assets/images/1/34/
            [filename] => 8417304-bones-brigade-brigade-by-cuypi-t60cd82c6.jpg
            [extension] => jpg
            [provider] => 
            [name] => 8417304-bones-brigade-brigade-by-cuypi-t60cd82c6
            [title] => 
            [description] => 
            [width] => 600
            [height] => 684
            [size] => 87373
            [url] => assets/images/1/34/8417304-bones-brigade-brigade-by-cuypi-t60cd82c6.jpg
            [preview] => 
            [type] => image
            [groups] => 0
        )
...

Example:

<div class="gallery">
  {foreach $images as $image}
    <img src="{$image.url}" width="{$image.width}" height="{$image.height}" alt="{$image.title?:$image.name}">
  {/foreach}
</div>

Other files

The gallery can hold not only images but also any other files:

For each file, its type will be set (see the type parameter).

[images] => Array
(
    [0] => Array
        (
            [id] => 49
            [path] => assets/images/1/36/
            [filename] => img-0915.mp4
            [extension] => mp4
            [provider] => 
            [name] => img-0915
            [title] => 
            [description] => 
            [width] => 0
            [height] => 0
            [size] => 2322184
            [url] => assets/images/1/36/img-0915.mp4
            [preview] => assets/images/1/33/z2ovxw9d7dk.jpg
            [type] => video
            [groups] => 0
        )

    [1] => Array
        (
            [id] => 50
            [path] => assets/images/1/36/
            [filename] => nqooxxb4li.jpg
            [extension] => jpg
            [provider] => 
            [name] => nqooxxb4li
            [title] => 
            [description] => 
            [width] => 600
            [height] => 727
            [size] => 100893
            [url] => assets/images/1/36/nqooxxb4li.jpg
            [preview] => 
            [type] => image
            [groups] => 0
        )

    [2] => Array
        (
            [id] => 52
            [path] => assets/images/1/36/
            [filename] => phpbook.pdf
            [extension] => pdf
            [provider] => 
            [name] => phpbook
            [title] => 
            [description] => 
            [width] => 0
            [height] => 0
            [size] => 950015
            [url] => assets/images/1/36/phpbook.pdf
            [preview] => 
            [type] => pdf
            [groups] => 0
        )

)

Example:

{foreach $images as $item}

  {if $item.type === 'image'}
    <img src="{$item.url}" width="{$item.width}" height="{$item.height}" alt="{$item.title?:$item.name}">
  {/if}

  {if $item.type === 'video'}
    <video width="{$item.width}" height="{$item.height}" poster="{$item.preview}" controls>
      <source src="{$item.url}" type="video/{$item.extension}">
    </video>
  {/if}

  {if $item.type === 'pdf'}
      <a href="{$item.url}" download="{$item.name}" target="_blank"></a>
  {/if}

{/foreach}

Video

If you've uploaded a video, you can change its preview.

Array
  (
      [id] => 53
      [path] => assets/images/1/36/
      [filename] => img-0915.mp4
      [extension] => mp4
      [provider] => 
      [name] => Video file
      [title] => 
      [description] => 
      [width] => 0
      [height] => 0
      [size] => 2322184
      [url] => assets/images/1/36/img-0915.mp4
      [preview] => assets/images/1/33/z2ovxw9d7dk.jpg
      [type] => video
      [groups] => 0
  )