Hi Jonathan. To be honest, I did not think about that so far, but it’s definitely an option (that I would need for my own projects as well from time to time 
). But don’t expect it to land into 1.0 final, sorry.
I’ve opend an issue on GitHub for further ideas and discussions on that idea.
As the final implementation is not figured out yet, I’m not able to give you a definite answer on this. However, the adjustments you have to do in your code once this feature has landet in ImageSet shouldn’t be too many, if it’s only about this particular feature.
Really impressed with the plugin, wondered if you have a date for release yet. Would be interested in knowing the costs of licensing.
Hey @andyklyon,
I’m still in the final stages of developing and testing. I think, the fallback mode option will go away before the final release, because this is something we can handle through CSS only without resulting in distorted images in older browsers. When this is done, there’s nothing left in the way of 1.0 final!
The plugin will cost about $ 25 (depending on exchange rate and taxes), same as ImageKit. Both plugins will also be available as a bundle for $ 40. Customers who have bought and ImageKit license prior to ImageSet’s release date will get a discount when they want to buy ImageSet.
I’m sorry I cannot give you a final release date yet, but I really want to release 1.0 before March is over. 
I found some time to continue my work on ImageSet today, so I was able to release 1.0.0-rc1 just a few minutes ago! 
If no other bugs will be found through the next week, this will also become the final release and the plugin will finally be available for sale. The biggest changes from beta 2 are of course the revamped CSS classes as well as the removal of the noscript.priority option. The latter change tackled a lot of ImageSet’s behavior and resultet in re-testing the plugin in every browser, including Opera Mini. If you are wondering, why I care about Opera Mini at all: It is uses a lot allover the world, especially in by people who live in areas or countries with bad cellular coverage or by people who have a very limited data rate. I hope this helps to keep your Kirby site accessible to users on low-end devices and/or slow connections.
Have a nice weekend! 
ImageSet 1.0.0-rc1
-
Leaner CSS classes: I decided to switch from full-blown BEM syntax to a leaner scheme for ImageKit’s class names. As ImageSet already produces a lot of CSS classes and those will become possibly more as new features are added, BEM seems to be to verbose to keep the generated HTML source readable. The new scheme uses shorter classes for modifiers and state.
-
CSS: Fix collisions with responsive image rules from inuit.css (and possibly other frameworks).
-
Fix some errors in Opera Mini regarding distorted images and JavaScript errors.
-
Improved noscript-fallback: Removed
noscript.priority, because due to better CSS positioning of the placeholder, it is not needed any more.
-
SASS: Adjusted SASS file by removing
Download form GitHub
Release!
ImageSet 1.0.0 is finally here and ready to be used on your site. Licenses are available via FastSpring. Information on how existing owners of ImageKit licenses can get a discount on ImageSet can also be found there.
Everything else – as always – can be found on GitHub.
Enjoy! 
ImageSet 1.0.0
- Fix alt attribute not added under certain conditions.
5 Likes
Is there a way to use something like the focus crop plugin for cropping the images with imageset? I would really like to let the user choose an important point in the image and then crop on that basis. Or is there a similar feature I didn’t see?
ImageSet uses Kirby’s thumbs API or a component that has been overridden by a plugin and thus should work with the focus plugin. Have you tried it?
Now I did:
Works:
<?= $page->images()->first()->focusCrop(300,200); ?>
Doesn’t work:
<?= $page->images()->first()->imageset('300x200,600x400'); ?>
So I guess it doesn’t use the focus plugin. Any idea?
Please open an issue on GitHub, I will have a look at how this can be enhanced.
Thanks
I’m trying out the plugin, it seems to be working great but i’m getting the error “imageset.js:945 Uncaught ReferenceError: el is not defined” in the console with the code
<?php foreach($project->limage()->yaml() as $limage): ?>
<?php if($limage = $project->image($limage)): ?>
<?= $limage->imageset([
'160-1280,6',
'sizes' => '(min-width: 640px) 100vw, 50vw'
], [
'class' => 'project-thumbnail',
'placeholder' => 'blurred',
])->html() ?>
<?php endif ?>
<?php endforeach; ?>
What could be the problem?
It’s a known issue. Probably best to check the issues in Github before asking in here, there may already be a solution. 
1 Like
I’m having a some CSS trouble. I want the the image set to take the full height of main; maintaining aspect ratio for the width. Ideally two images would be displayed using flex-box. Usually height: 100% and width: auto would suffice with but setting auto on the width collapses the images. It seems width has to be declaritive.
<div id="container">
<?php foreach($projects as $project): ?>
<?php foreach($project->limage()->yaml() as $limage): ?>
<?php if($limage = $project->image($limage)): ?>
<?= $limage->imageset([
'160-1280,6',
'sizes' => '(min-width: 640px) 100vw, 50vw'
], [
'class' => 'project-thumbnail',
'placeholder' => 'blurred',
])->html() ?>
<?php endif ?>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
CSS
main {
display: flex
justify-content: flex-start
height: 300px
}
Does anyone have pointers on how could achieve this? It would be greatly appreciated
Well, you need it to fill the box rather then fit it (thats what contain does). Take a look here and also here. This NPM package might also be useful.
You might also be able to combine it with focus crop plugin which will allow you to control more precisely how the image displays responsively (for example, reduce the chance of heads being cut off)
<img src="<?php echo $image->url() ?>" style="object-fit: cover; object-position: <?php echo $image->focusPercentageX() ?>% <?php echo $image->focusPercentageY() ?>%;" />
1 Like
Unless you don’t have to support IE11 I would be careful with using object-fit.
Besides that it sounds more like a flex problem. It seems like you allow your flex child nodes main > * to grow. You could try to set flex-grow: 0 for those but it’s hard to tell without knowing your complete css around this.
Have a look at this pen for one way you can do it.
ImageSet 1.1.0-beta2 is out!
Get it from GitHub
What’s new?
- [Enhancement] Extensive rewrite of frontend code in ES6-compatible syntax, using a new approach for imageset loading.
- [Enhancement] The build process now uses webpack (except for the readme) instead of Gulp for besser handling of dependencies in the script.
- [Removed] Removed settings API, because it’s benefits are neglectable while it adds lots of complexity.
- [Breaking] Removed IE 10 from the list of supported browsers … he’s dead, Jim! Also replaced support for “Edge 12+” with “✓”, because Edge has a rolling release-cycle.
- [Breaking] Raised PHP support to 5.6, because I won’t test new features on older versions than that any more in the future.
- [Readme] Removed settings API section.
- [Readme] Added note how to set
display: block to all image sets.
3 Likes
Hey @fabianmichael now that Firefox is adding webp support and Microsoft is going to use chrome as their engine for edge, wouldn’t it be the moment to add support for webp + fallback to jpeg/png in imageset? 
1 Like
