Responsive-Retina Images

Post Reply
Mark
Ssr. Bludit
Posts: 26
Joined: Sun Oct 08, 2017 4:01 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: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Not at the moment. But a good point!
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
diego
Site Admin
Posts: 773
Joined: Sat May 16, 2015 2:53 pm
Been thanked: 1 time
Contact:

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: 26
Joined: Sun Oct 08, 2017 4:01 pm

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: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

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
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
bayerberg
Master Bludit
Posts: 141
Joined: Wed Jun 07, 2017 1:05 pm
Location: London, UK
Has thanked: 7 times
Been thanked: 10 times
Contact:

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
bludit plugins and themes - makeitblu | I do things, check them out on behance and dribbble.
Post Reply