Hi kirby community,
i started to use kriby 2 days ago and i already like it.
Before i worked years with Redaxo, i wanted to find a more simple and small Solution and Kirby is perfect.
I could not figure out where to post this so excuse me if its at the wrong place O:)
i wanted to render a responsive image solution the plugins seems to be nice, but i could not install it.
Do my time is to short to find the problems i tried to make it plain PHP.
The solution is not ideal and its to much code for sure, but it works for me (quick and dirty).
Its based on the idea that for Optimization reasons i always want to compress the image as hell with tools like tinypng (website) and so on.
I made 3 versions of the image: image–small.jpg 420w, image–mid.jpg 820w and a large one.
Uploaded them into the page file: section.
I limited the function to a template and the image count of 3 for this specific case.
I assembly the markup into one string for output.
I’am not the master Coder but always eager to find out how to make it better.
If you have ideas and suggestions how it could be done smarter, i appreciate every idea.
foreach($pages->children() as $item) {
if($item->hasFiles()) {
//make a array with the url strings inside
foreach($item->images() as $image) {
$imageStrings[] = $image->url();
}
if(count($imageStrings) == 3) {
for($img=0; $img<count($imageStrings); $img++) {
switch($img) {
case 0:
$sectionWrapImages.= '<div class="scrollable__white__layout__images"><picture><source srcset="'. $imageStrings[$img] .' 2048w,';
break;
case 1:
$sectionWrapImages.= ' '. $imageStrings[$img] .' 820w,';
break;
case 2:
$sectionWrapImages.= ' '. $imageStrings[$img] .' 420w" type="image/jpeg" sizes="(min-width: 75em), (min-width: 51.250em), (min-width: 26.250em)">';
$sectionWrapImages.= '<img src="'. $imageStrings[$img] .'" alt="image alt text here"></picture></div>';
break;
}
}
$imageStrings = [];
} else {
$imageStrings = [];
$sectionWrapImages = '';
}
}
$sectionWrapMarkup.= '<section class="scrollable__white__layout__base">';
$sectionWrapMarkup.= $sectionWrapImages;
$sectionWrapMarkup.= '<h4>'. $item->title()->html(). '</h4>';
$sectionWrapMarkup.= '<p class="white__layout__text">'. $item->text()->html() .'</p>';
$sectionWrapMarkup.= '</section>';
// empty images string
$sectionWrapImages = '';
}
the result is a nice markup:
<picture>
<source srcset="http://localhost/kirby-project/content/1-production-infrastructure/1-audio/image-large.jpg 2048w,
http://localhost/kirby-project/content/1-production-infrastructure/1-audio/image-mid.jpg 820w,
http://localhost/kirby-project/content/1-production-infrastructure/1-audio/image-small.jpg 420w"
type="image/jpeg" sizes="(min-width: 75em), (min-width: 51.250em), (min-width: 26.250em)">
<img src="http://localhost/kirby-project/content/1-production-infrastructure/1-audio/image-small.jpg" alt="image alt text here">
</picture>
best pascal