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: #
#
#
# # #
# Michal from Czechia #
#
#
# # #
# Self photo #
#
#
#
# # .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 AUTHOR Michal Josef Špaček LICENSE AND COPYRIGHT © 2022 Michal Josef Špaček BSD 2-Clause License VERSION 0.02