Hello,
I want to use the IMGIX service which you also recommend, as we have a lot of heavy images on our site. I can not find any documentation on implementing it with kirby, and i would think others would also like to know how this can be achieved in a dynamic way. Or better yet let us in on how Kirby uses it?
I would be very grateful if you could help me with this:)
You can check out the getkirby.com source code on GitHub: https://github.com/getkirby/getkirby.com
As far as I can see, there is an imgix plugin in the /site/plugins folder. Then images are called like this:
<img src="<?php echo imgix($image, array('w' => 300)) ?>" alt="Screenshot: <?php echo $feature->title() ?>" />
Maybe this new plugin is interesting for you as well: ImageKit - An Asynchronous Thumbs API
Thank you for this, sadly i can’t get it to work due to my limited understanding…
Here is what I’ve done:
function imgix($url, $params = array()) {
if(is_object($url)) {
$url = $url->url();
}
$url = trim(str_replace(array(url(), 'http://jungfeldt.de/content/'), '', $url), '/');
$url = 'https://jungfeldt.imgix.net/' . $url . '?' . http_build_query($params);
return $url;
}
In my template i then insert the code into a slider:
<ul id="rslides"class="rslides">
<?php foreach($page->children()->find('slider')->images() as $img): ?>
<li><img src="<?php echo imgix($img, array('w' => 300)) ?>" alt="<?php echo $img->description() ?>" /></li>
<?php endforeach ?>
</ul>
I changed the plugin from Kirby to the our URL and the URL from IMGIX, unfortunately it throws the wrong URL back:
https://jungfeldt.imgix.net/content/home/02.jpg" when it should be https://jungfeldt.imgix.net/home/02.jpg
Can you please explain this to me? I’m learning by doing here:)
Thank you for your patience!
Hi, I think you have to remove content from your url:
function imgix($url, $params = array()) {
if(is_object($url)) {
$url = $url->url();
}
$url = trim(str_replace(array(url(), 'http://jungfeldt.de/'), '', $url), '/');
$url = 'https://jungfeldt.imgix.net/' . $url . '?' . http_build_query($params);
return $url;
}
And one more thing: Please help to improve code readability by wrapping code blocks within three backticks at the beginning and the end of a block on a separate line. I have corrected your code above. To see how it works, click on the pencil icon of your post. Thank you.
i tried that before but it didn’t change anything…
function imgix($url, $params = array()) {
if(is_object($url)) {
$url = $url->url();
}
$url = trim(str_replace(array(url(), 'http://jungfeldt.de/'), '', $url), '/');
$url = 'https://jungfeldt.imgix.net/' . $url . '?' . http_build_query($params);
return $url;
}
thank you for your patience, i didn’t know that:)
I think the code should really be like something like this:
$url = trim(str_replace(array(url(), 'http://jungfeldt.de/assets/images/'), '', $url), '/');
$url = 'https://jungfeldt.imgix.net/' . $url . '?' . http_build_query($params);
return $url;
The search value here is an array ((array(url(), 'http://jungfeldt.de/assets/images/')), so that you cover images in the content folders and in the assets folder. If any of these search values is found in the haystack ($url), it is replace with an empty string.
Why you need to get rid of the “content” bit I don’t really understand … If I look at the urls at https://getkirby.com, they look like this:
https://getkirby.imgix.net/content/home/hero/slide-01.png?
Anyway, if you need to remove the content bit, you probably need to replace the first element of the array like this:
$url = trim(str_replace(array(url() . DS . 'content', 'http://jungfeldt.de/assets/images/'), '', $url), '/');
Hello,
I changed the source details in IMGIX to just http://jungfeldt.de/ and now the link is correct but also adds the image source after the img src tag, so the image is unable to display. Do you have any suggestions for further improvements? Also what is the best url path to use as the source for IMGIX on kirby?
<img src="<img src=https://jungfeldt.imgix.net/content/home/01.jpg?" alt="Invitation card with embossment for the Korean crafts and design exhibition, Korea Now! in Bavarian National Museum">
Also: I’m doing all the testing on a local version of the site… should this have any implications?
Thank you
You should add url() when echoing the image to just get the url instead of the complete image tag.
Thank you! again! It works!! and i can hardly believe it. I will collect all the files and setup so that if someone else wonders about the same thing they can use it to.
Thank you so much texnixe!!
You are welcome
IMGIX setup with kirby plugin
With help from Texnixe i managed to get imgix working for my page. Im writing this up for future reference.
Set the base URL to your root domain f.ex.: http://example.com and deploy. You can now test to see if your images are available by entering the new url from IMGIX and adding the path to your images. (f.ex.: https://example.imgix.net/content/home/01.jpg)
If that works your ready to go the next step.
function imgix($url, $params = array()) {
if(is_object($url)) {
$url = $url->url();
}
$url = trim(str_replace(array(url(), 'http://example.com/'), '', $url), '/');
$url = 'https://example.imgix.net/' . $url . '?' . http_build_query($params);
return $url;
}
How this exactly works is best explained by Texnixe or someone at the same level. But of importance to most is the need to change the link 'http://example.com/' to the same base URL as you provided as the source on IMGIX. The last thing you must change is the url 'https://example.imgix.net/' to the one IMGIX provides you. Then the plugin is finished.
<?php foreach($page->images() as $img): ?>
<li><img src="<?php echo imgix($img, url()) ?>" alt="<?php echo $img->description() ?>" /></li>
<?php endforeach ?>
This should print the following link https://example.imgix.net/content/home/01.jpg
when visiting that site. You can now serve images from IMGIX !
This works for me, and I would like to think it can work for you 
Hey guys,
first of all, thanks for the walktrough.
I’m going trough the same steps here, but when loading the page, the template prints a warning like this instead of the url:
any ideas on what could be wrong?
I’ve copied and pasted the code from the imgix plugin, so this is bothering me.
Just a heads up that i’ve managed to put it to work by removing params from the url after the ? and putting them directly on the php snippet/template.
I’ll see how this scales for more complex demands.