NAME
    Tags::HTML::Image::Grid - Tags helper for image grid.

SYNOPSIS
     use Tags::HTML::Image::Grid;

     my $obj = Tags::HTML::Image::Grid->new(%params);
     $obj->process($images_ar);
     $obj->process_css;

METHODS
  "new"
     my $obj = Tags::HTML::Image::Grid->new(%params);

    Constructor.

    *       "css"

            'CSS::Struct::Output' object for process_css processing.

            Default value is undef.

    *       "css_image_grid"

            Form CSS style.

            Default value is 'image-grid'.

    *       "img_link_cb"

            Image link callback.

            Default value is undef.

    *       "img_select_cb"

            Image select callback.

            Default value is undef.

    *       "img_src_cb"

            Image src callback across data object.

            Default value is undef.

    *       "img_width"

            Image width in pixels.

            Default value is 340.

    *       "tags"

            'Tags::Output' object.

            Default value is undef.

    *       "title"

            Image grid title.

            Default value is undef.

  "process"
     $obj->process($images_ar);

    Process Tags structure for images in $images_ar to output.

    Accepted items in $images_ar reference to array are Data::Image objects.

    Returns undef.

  "process_css"
     $obj->process_css;

    Process CSS::Struct structure for output.

    Returns undef.

ERRORS
     new():
             From Class::Utils::set_params():
                     Unknown parameter '%s'.
             From Tags::HTML::new():
                     Parameter 'css' must be a 'CSS::Struct::Output::*' class.
                     Parameter 'tags' must be a 'Tags::Output::*' class.
             Parameter 'img_link_cb' must be a code.
             Parameter 'img_select_cb' must be a code.
             Parameter 'img_src_cb' must be a code.

     process():
             From Tags::HTML::process():
                     Parameter 'tags' isn't defined.
             Bad data image object.

     process_css():
             From Tags::HTML::process_css():
                     Parameter 'css' isn't defined.

EXAMPLE
     use strict;
     use warnings;

     use CSS::Struct::Output::Indent;
     use Data::Image;
     use Tags::HTML::Image::Grid;
     use Tags::Output::Indent;

     # Object.
     my $css = CSS::Struct::Output::Indent->new;
     my $tags = Tags::Output::Indent->new;
     my $obj = Tags::HTML::Image::Grid->new(
             'css' => $css,
             'tags' => $tags,
     );

     # Images.
     my $image1 = Data::Image->new(
             'comment' => 'Michal from Czechia',
             'url' => 'https://upload.wikimedia.org/wikipedia/commons/a/a4/Michal_from_Czechia.jpg',
     );
     my $image2 = Data::Image->new(
             'comment' => 'Self photo',
             'url' => 'https://upload.wikimedia.org/wikipedia/commons/7/76/Michal_Josef_%C5%A0pa%C4%8Dek_-_self_photo_3.jpg',
     );

     # Process image grid.
     $obj->process([$image1, $image2]);
     $obj->process_css;

     # Print out.
     print $tags->flush;
     print "\n\n";
     print $css->flush;

     # Output:
     # <div class="image-grid">
     #   <div class="image-grid-inner">
     #     <figure>
     #       <img src=
     #         "https://upload.wikimedia.org/wikipedia/commons/a/a4/Michal_from_Czechia.jpg"
     #         >
     #       </img>
     #       <figcaption>
     #         Michal from Czechia
     #       </figcaption>
     #     </figure>
     #     <figure>
     #       <img src=
     #         "https://upload.wikimedia.org/wikipedia/commons/7/76/Michal_Josef_%C5%A0pa%C4%8Dek_-_self_photo_3.jpg"
     #         >
     #       </img>
     #       <figcaption>
     #         Self photo
     #       </figcaption>
     #     </figure>
     #   </div>
     # </div>
     # 
     # .image-grid {
     #      display: flex;
     #      align-items: center;
     #      justify-content: center;
     # }
     # .image-grid-inner {
     #      display: grid;
     #      grid-gap: 1px;
     #      grid-template-columns: repeat(4, 340px);
     # }
     # .image-grid figure {
     #      object-fit: cover;
     #      width: 340px;
     #      height: 340px;
     #      position: relative;
     #      overflow: hidden;
     #      border: 1px solid white;
     #      margin: 0;
     #      padding: 0;
     # }
     # .image-grid img {
     #      object-fit: cover;
     #      width: 100%;
     #      height: 100%;
     #      vertical-align: middle;
     # }
     # .image-grid figcaption {
     #      margin: 0;
     #      padding: 1em;
     #      position: absolute;
     #      z-index: 1;
     #      bottom: 0;
     #      left: 0;
     #      width: 100%;
     #      max-height: 100%;
     #      overflow: auto;
     #      box-sizing: border-box;
     #      transition: transform 0.5s;
     #      transform: translateY(100%);
     #      background: rgba(0, 0, 0, 0.7);
     #      color: rgb(255, 255, 255);
     # }
     # .image-grid figure:hover figcaption {
     #      transform: translateY(0%);
     # }
     # .image-grid .selected {
     #      border: 1px solid black;
     #      border-radius: 0.5em;
     #      color: black;
     #      padding: 0.5em;
     #      position: absolute;
     #      right: 10px;
     #      top: 10px;
     # }

DEPENDENCIES
    Class::Utils, Error::Pure, List::MoreUtils, Scalar::Util, Tags::HTML,
    Unicode::UTF8.

REPOSITORY
    <https://github.com/michal-josef-spacek/Tags-HTML-Image-Grid>

AUTHOR
    Michal Josef Špaček <mailto:skim@cpan.org>

    <http://skim.cz>

LICENSE AND COPYRIGHT
    © 2022 Michal Josef Špaček

    BSD 2-Clause License

VERSION
    0.01