hi forum,
for using a lazy loading plugin, I would like to add “data-src” to images inside kirbytext(). Does somebody know where I need to add the data-src attribute?
my php:
<?php snippet('header') ?>
<div id="project_page"></div>
<div class="back"><a href="/">×</a></div>
<main class="main" role="main" id="project">
<div class="text">
<?php echo $page->text()->kirbytext() ?>
</div>
<?php snippet('footer') ?>
</main>You would have to make a copy of the image kirbytag and add it there.
Like this it shows up the images twice if I put them in between paragraphs with kirby markup…
<?php snippet('header') ?>
<div id="project_page"></div>
<div class="back"><a href="/">×</a></div>
<main class="main" role="main" id="project">
<div class="text">
<?php echo $page->text()->kirbytext() ?>
<img data-src="<?php echo $image->url() ?>" alt="<?php echo $page->title()->html() ?>">
</div>
<?php snippet('footer') ?>
</main>No, I meant make a custom kirbytag as a copy of the image kirbytag in /kirby/extensions/tags/extensions
Copy the tag, create a new file in /site/tags and make the required changes.
okay, I created the file called image.php in /site/tags and added the following code. What I need to add in this code then to get the data-src attr? right now my images are not displayed anymore… sry…i am new to kirby…
<?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);
}
);Your tag is not complete:
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($url, array(
'width' => $tag->attr('width'),
'height' => $tag->attr('height'),
'class' => $class,
'title' => $title,
'alt' => $alt,
'data-src' => $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>' . html($caption) . '</figcaption>');
}
return $figure;
} else {
$class = trim($tag->attr('class') . ' ' . $tag->attr('imgclass'));
return $_link($_image($class));
}
}
);
Note that I added the data-src attribute in the image builder section .
In the image builder bit, replace $url with an empty string:
return html::img('', array(
(line 135 of the original file)
changed, but still there exist the src attr…
do you have any other ideas of what to add to make this work or what ?
the image builder in the original file now looks like this:
$_image = function($class) use($tag, $url, $alt, $title) {
return html::img('', array(
'width' => $tag->attr('width'),
'height' => $tag->attr('height'),
'class' => $class,
'title' => $title,
'alt' => $alt
));
};You have to change it in your cloned image kirbytag, not in the original file, because your cloned file overwrites the original tag. I only the put the line number of the original file there for reference purposes to you know where you have to make the change.
all right, thanks! 