I’ve been testing this in several browsers… and can’t get SVGs inside /content subfolders to cache… weirdly enough the same SVGs cache normally once moved to any /assets sub folders.
I’ve fiddled with the .htaccess for a a bit, tried to implement some of the html5boilerplate best practices and still nothing. Tested several different files/browers combos, but only on mac os x.
Any advice?
H, I cannot verify this. And looking at your paths, both images are in the /content folder, the one that is cached as well as the one that isn’t?
Ooops… my bad. The image came out wrong due to my confusion with the tests…
I’ve kinda found out how to “fix” it… but still don’t know why it behaved like it did…
My template was like:
<?php foreach($myfield->toStructure() as $item): ?>
<img src="<?php echo $page->url() . DS . $item->logo() ?>" alt="logotype">
<?php endforeach ?>
After changing it to:
<?php foreach($myfield->toStructure() as $item): ?>
<img src="<?php echo $item->logo()->toFile()->url() ?>" alt="logotype>">
<?php endforeach ?>
The cache started to work… any idea why?
Combining the URL manually is not recommended. DS is a dynamic directory separator constant BTW, you shouldn’t use it for URLs or your URLs will break when running your site on a Windows server (DS becomes a backslash).
Letting Kirby do the URL building for you (as in your second example) is the safest way of doing it.
But a general note: You aren’t telling the browser that you want it to cache your image yet. You need to add a rule for Apache’s mod_expires in your .htaccess, otherwise the browser won’t always cache your images.
Thanks for the tips @lukasbestle
I’m using some of html5boilerplate.com’s .htaccess… including:
<IfModule mod_expires.c>
ExpiresByType image/svg+xml "access plus 1 month"
</IfModule>
I’m using the expire times together with cache headers:
# cache control
<ifModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|svg|woff)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\\.(js)$">
Header set Cache-Control "max-age=2592000, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</filesMatch>
</ifModule>
Can I use those mod_headers together with the mod_expires from my example above?
What are the advantages of setting cache control with mod-headers?
Is your example best optimized for kirby?
I’ve found a nice conceptual explanation here.
Could you point me somewhere with more practical examples?
Yes, of course.
You can make your own settings as you deem appropriate, this is just an example I grabbed from a .htaccess file of a site I developed in the past (in most cases I don’t use .htaccess files but put the stuff in a server config file)
I use the following code:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "modification plus 1 year"
ExpiresByType text/javascript "modification plus 1 year"
ExpiresByType application/javascript "modification plus 1 year"
ExpiresByType application/x-javascript "modification plus 1 year"
ExpiresByType application/font-woff "modification plus 1 year"
ExpiresByType image/svg+xml "modification plus 1 year"
ExpiresByType application/vnd.ms-fontobject "modification plus 1 year"
ExpiresByType application/x-font-ttf "modification plus 1 year"
ExpiresByType application/x-font-truetype "modification plus 1 year"
ExpiresByType application/x-font-opentype "modification plus 1 year"
</IfModule>
You can add more content types if you need.
Either mod_expires or mod_headers is enough. You can use both together, but it doesn’t make any sense. 
mod_headers is only needed if you need more fine grained control over the caching by using the Cache-Control header.
