Responsive-Retina Images

Post Reply
Mark
Ssr. Bludit
Posts: 13
Joined: Sun Oct 08, 2017 4:01 pm

Sun Nov 19, 2017 4:16 pm

Is there a method to use responsive retina images in Bludit?

Something like srcset ? https://www.smashingmagazine.com/2014/0 ... re-srcset/

Code: Select all

<picture>
      	<img srcset="
	    img/lake-mountain-600w.jpg 600w,
            img/lake-mountain-800w.jpg 800w,
            img/lake-mountain-1200w.jpg 1200w"
     	sizes="
     	    (max-width: 320px) 200px,
            (max-width: 480px) 400px,
            (max-width: 640px) 600px"
     	src="img/lake-mountain.jpg" alt="Lake Mountain">
</picture>
User avatar
Edi
Site Admin
Posts: 1164
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Sun Nov 19, 2017 10:26 pm

Not at the moment. But a good point!
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
User avatar
diego
Site Admin
Posts: 673
Joined: Sat May 16, 2015 2:53 pm
Contact:

Sun Nov 19, 2017 10:58 pm

Why you don't add the html code on the content with the images ? or you want to auto-create this images when you upload an image ?
Mark
Ssr. Bludit
Posts: 13
Joined: Sun Oct 08, 2017 4:01 pm

Mon Nov 20, 2017 2:56 am

Thank you so much for the response.

True I can build this myself. I hand code this already for a number of projects. However one of the beauties of a CMS is that this kind of stuff gets done for the user. ;) In theory we would load one large image and the theme, depending on the size and display resolution would build the files needed and display the corresponding image accordingly. I understand this may be simpler said than done. The good news is the server only has to build the image versions. The theme can do the rest when the user accesses it from their browser.
User avatar
Edi
Site Admin
Posts: 1164
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Mon Nov 20, 2017 11:44 am

Responsive images are an interesting concept, and an idea for further development.

But I'm not shure if it makes really sense for the average user of a lightweight CMS. And how to handle it: with the core, the editor or a plugin.

I also do not know if it is really still/yet state of the art. There is a discussion about the topic, for example at

State of Responsive Images 2017
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
User avatar
bayerberg
Sr. Bludit
Posts: 45
Joined: Wed Jun 07, 2017 1:05 pm

Mon Nov 20, 2017 4:15 pm

theres a way of doing retina images but its fiddly and you need to use the same template for anything you upload.

- bl-kernel/boot/init.php
you need to change the // Thubmnails size dimensions to fit your standard image size. factory setting is 400x400px but you can change it to the size you need.
- you need to upload retina size images via content editor
here is where the template comes in - you need to upload 2x the size of thumbnails you just edited.
- you need to edit your template to display those images correctly
find the bit that shows your images and switch it for something like

Code: Select all

<?php
if($Post->coverImage()) {
      echo '<a href="'.$Post->permalink().'">
      <img src="'.HTML_PATH_UPLOADS_THUMBNAILS.$Post->coverImage(false).'" srcset="'.HTML_PATH_UPLOADS_THUMBNAILS.$Post->coverImage(false).' 1x,'.$Post->coverImage().' 2x'" alt="" class="scale-me">
      </a>';
    }
?>
you might want to add css class to make the images adapt to your template

Code: Select all

.scale-me {width: 100%; height: auto;}
not tested, I remember doing something like this for one of my bludit webites. for bludit 2.0 you'll need to tweak it a bit
i do things, check them out on behance | check out startups undiluted - london's startup ecosystem
Post Reply