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_border_color_cb

  Image border callback. This is used with 'img_border_width' parameter. Border will be present only for image which has color defined.

  Callback arguments are: $self and $image object.

  Default value is undef.

• img_border_width

  Image border width if need to use.

  Default value is undef.

• 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.03

cpanm Tags::HTML::Image::Grid

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