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