Hi
I would like to create a kirbytag for lazyloading images with unknow heights as mentionned here for example. It’s a cool way to maintain aspect ratio during the loading page.
This is my tag now, I have found it from Sonja response in this topic and added a src with base64 1x1 transparent png.
<?php
kirbytext::$tags['image'] = array(
'attr' => array(
'width',
'height',
'alt',
'text',
'title',
'class',
'imgclass',
'linkclass',
'caption',
'link',
'target',
'popup',
'rel'
),
'html' => function($tag) {
$url = $tag->attr('image');
$alt = $tag->attr('alt');
$title = $tag->attr('title');
$link = $tag->attr('link');
$caption = $tag->attr('caption');
$file = $tag->file($url);
// use the file url if available and otherwise the given url
$url = $file ? $file->url() : url($url);
// alt is just an alternative for text
if($text = $tag->attr('text')) $alt = $text;
// try to get the title from the image object and use it as alt text
if($file) {
if(empty($alt) and $file->alt() != '') {
$alt = $file->alt();
}
if(empty($title) and $file->title() != '') {
$title = $file->title();
}
}
// at least some accessibility for the image
if(empty($alt)) $alt = ' ';
// link builder
$_link = function($image) use($tag, $url, $link, $file) {
if(empty($link)) return $image;
// build the href for the link
if($link == 'self') {
$href = $url;
} else if($file and $link == $file->filename()) {
$href = $file->url();
} else if($tag->file($link)) {
$href = $tag->file($link)->url();
} else {
$href = $link;
}
return html::a(url($href), $image, array(
'rel' => $tag->attr('rel'),
'class' => $tag->attr('linkclass'),
'title' => $tag->attr('title'),
'target' => $tag->target()
));
};
// image builder
$_image = function($class) use($tag, $url, $alt, $title) {
return html::img('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', array(
'width' => $tag->attr('width'),
'height' => $tag->attr('height'),
'class' => $class,
'title' => $title,
'alt' => $alt,
'data-original' => $url // add data-src attribute
));
};
if(kirby()->option('kirbytext.image.figure') or !empty($caption)) {
$image = $_link($_image($tag->attr('imgclass')));
$figure = new Brick('figure');
$figure->addClass($tag->attr('class'));
$figure->append($image);
if(!empty($caption)) {
$figure->append('<figcaption>' . kirbytext($caption) . '</figcaption>');
}
return $figure;
} else {
$class = trim($tag->attr('class') . ' ' . $tag->attr('imgclass'));
return $_link($_image($class));
}
}
);
The goal here is to wrap a div inside figure, adding padding from the image ratio. e.g. :
<figure>
<div class="container" style="width:100%; padding-bottom: calc(100% / <?php echo $vignette->ratio() ?>)" >
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-original="<?php echo thumb($vignette, array('width' => 900))->url() ?>"
</div>
</figure>
With this style
.container {
display: block;
position: relative;
height: 0;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-bottom: calc(100% / <?php echo $image->ratio() ?>)
}
So how can I make that with kirbytag ?
- wrap a div inside the default figure from the tag
- using aspect ratio from image
- generate a thumb (for a better loading time)
I have to deal with caption, I don’t know how to set the ratio image or if I have to use another array. This is my actual code, knowing it’s not complete or working.
