Feature requests: Image resampling after resize and custom content pieces

feature request
#1

Hi,

first: For simple sites and non-tec users Sitecake is a fantastic approach!

My future wish as a designer with some basic PHP knowledge is a way to easy extend content types of Sitecake, i.e. add rows with predefined columns, add an ordered list or edit the alt-caption for images.
PS: Now I’ve seen that someone ask already for such template snippets, so I just vote for it :wink:

PS:
Only issue I found was that images are only resized not resampled after publishing, so in this case may be a big file is loaded for a small visual image.

Thanks and a good New 2016
Juergen

#2

Hey Juergen,

thanks for your support! We wish you good and productive New Year too!

These ‘template snippets’ are on the road map! We will allow developers to extend Sitecake. We will maintain the core and provide out of the box simple editing solution, and encourage developers to write their own extensions and provide them for the community (free or for a price). In that case web designers, like yourself will be able to customize Sitecake version for the client.

I am just back from winter vacation and I will look into these image resize issues and get back to you.

#3

I am very pleased to see these coming features.

Have tested a dozen CMS but no one (except Typo3 Neos) have great front end editing features plus the possibilities to build my own components.
And because most of my sites don’t need a database, SiteCake is the right tool here – ease to setup and to use.

#4

Let me give more details about handling responsive images with Sitecake.

When user uploads image, for example 2000px wide, Sitecake will resample it in four sizes: 1280px, 960px, 640px and 320px. Original will be deleted and replaced with 1280px version. (we did this because some users were uploading a lot of huge images and having performance and storage issues)

Sitecake will form <img> tag like this:

<img style="width:100%; max-width:100%;" src="image-320.jpg" srcset="image-1280.jpg 1280w, image-960.jpg 960w, image-640.jpg 640w, image-320.jpg 320w">

src attribute is used only by browsers that do not support srcset. So, src is becoming less and less important. See srcset browser support here. As you can see, most modern browsers support srcset. Browser is doing image selection from the set, based on the screen size, browser window size, etc…

In this example, 320px image size is selected for src because the image was placed in a column within five column layout.

When I tested 2000px image (PC, 1920x1200 screen) Firefox and Edge browser served different sizes depending on browser window width. Chrome was ignoring the image selection and always displayed 1280px version. This is clearly an issues and we will see how we resolve it.

All thoughts and comments are welcome. We want to make robust and practical solution and current implementation is just first shot in a row.

#5

Yes, the you’re absolutely right with the srcset specification.

But my suggestion was more how SiteCake should handle resized images.

Example: I inserted an image in my site and resized it to 1/3 of the page.
The I make a reload on my desktop browser and use Firefox inspect of the downloaded image.
So because of my large viewport Firefox loaded the huge image of 1280px, altought it isn’t necessary.

Firefox-Inspect.png832×349 277 KB

My suggestion is, to give the site developer some internal configurations for handle this:

  • Do a real resampling of the image if it seem necessary (i.e. we only need a small image on all devices / viewports)
  • Give a kind of “blueprints” (templates) where the developer can build needed image structures / breakpoints (because there is some more you can define with srcset and art direction (“picture”-tag) in the future.

So the developer could set some definitions and breakpoints and interally SiteCake scans the blueprint template for reading the desired image dimensions and do the resampling.

PS: Or, seem easier to implement: Let the site developer set some desired resampling PHP-functions inside the blueprint / template.

PPS: The srcset defintion seems working in Chrome too. After resizing the viewport I must do a reload of the page, to reload the image of the next breakpoint.

#6

Thanks for your suggestions we are considering them!

#7

Just want to report what I have found regarding “image resizing”.

With HTML5 there are new possibilities for very smart upload technics – I personally didn’t know that before.

Infos:

Tools:

This could be a usefull enhancement, as I know, that users/customers like it to load their 16+ MP photo files to the webpage and wondering why it doesn’t work :wink:

#8

These are great suggestions! We have already started considering them and planning what could be included in the next releases.

Thanks