[solved] Archive page - How to use smaller Coverarts

funkenstrahlen · 2015-10-12T17:08:32.442Z

I use this code in my archive page template to display the coverart of each episode:

<img src="{{ episode.imageUrlWithFallback }}" width="{{ icon_size }}" height="{{ icon_size }}">

This is the complete generated page: https://podcast.funkenstrahlen.de/archiv/
It embeds the images like this: https://podcast.funkenstrahlen.de/wp-content/cache/podlove/29/6b802105d04606813f66dcdc1f10d5/fs074-flattrboard-und-mobile-bitcoins_original.png

However this is the original size image. So the page loads pretty slow.

How can I use the cached smaller version of podlove in my template?

David_1701 · 2015-10-12T19:45:28.216Z

You should upgrade to Podlove Publisher Version 2.2.0 or higher. With this version the use of Wordpress’ image caching was introduced. Since then smaller versions of your images are rendered on the server and delivered to the browser. That saves bandwith and time for transmitting.

After upgrading you should use the new syntax for handling images. In your case the new syntax should be something like this:

{{ episode.image({fallback: true}).html({width: icon_size, height: icon_size}) }}

funkenstrahlen · 2015-10-15T08:37:34.626Z

David_1701:

After upgrading you should use the new syntax for handling images. In your case the new syntax should be something like this:

{{ episode.image({fallback: true}).html({width: icon_size, height: icon_size}) }}

It now generates the following html for an image:

<img width="96" height="96" src="http://cdn.podseed.org/funkenstrahlen/fs074-flattrboard-und-mobile-bitcoins.png" srcset="http://cdn.podseed.org/funkenstrahlen/fs074-flattrboard-und-mobile-bitcoins.png 1x, http://cdn.podseed.org/funkenstrahlen/fs074-flattrboard-und-mobile-bitcoins.png 2x, http://cdn.podseed.org/funkenstrahlen/fs074-flattrboard-und-mobile-bitcoins.png 3x">

However this links to the full version of the image in my CDN. It dos not use smaller versions cached by Podlove.

I just checked how the html code looks on the Freakshow Archive page:

<img title="FS162 Das fix ich jetzt einfach mal" width="96" height="96" src="http://freakshow.fm/wp-content/cache/podlove/88/f24a931ad4a10e394270edf037e877/freak-show_96x96.jpg" srcset="http://freakshow.fm/wp-content/cache/podlove/88/f24a931ad4a10e394270edf037e877/freak-show_96x96.jpg 1x, http://freakshow.fm/wp-content/cache/podlove/88/f24a931ad4a10e394270edf037e877/freak-show_192x192.jpg 2x, http://freakshow.fm/wp-content/cache/podlove/88/f24a931ad4a10e394270edf037e877/freak-show_288x288.jpg 3x">

This is correct.

So what is wrong with my setup?

ericteubert · 2015-10-18T11:09:31.124Z

The caching API only returns URLs to the resized images if they already exist on disk. If they are not there, it returns the original URL and creates an internal job to cache and resize the image.
If you use some sort of page cache there is a scenario where the HTML of the img with original file URLs gets cached. Another reason could be that something prevents the image cache from working correctly, for example missing file permissions.

Pleaser verify:

That it’s no other (page) cache interfering
That the image cache is generally working. Cached files should be in wp-content/cache/podlove/

funkenstrahlen · 2015-10-18T13:32:57.735Z

After disabling the Caching plugin the images were generated correctly by Podlove. So now I have the minified versions available. Thanks for the tip!