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

cpanm Tags::HTML::Image::Grid

perl -MCPAN -e shell
install Tags::HTML::Image::Grid