F
F
Fedor Ananin2016-07-16 19:20:50
Images
Fedor Ananin, 2016-07-16 19:20:50

Make adaptive images in CKEDITOR, where to start?

Good time!
There is a self-written engine and a great desire to make it even better.
The CKEDITOR editor is used to edit the content.
I like everything about it, except for working with pictures.
Problems:
1) Image size... Sites don't have precise dimensions in pixels for a long time, which means that it makes no sense to set photo sizes in pixels. You can set the size in percentages in the editor, but... a picture of 35% width on a FullHD monitor looks perfect, but on some iPhone 5s it looks like a tiny icon. Solution: set the size through css classes, for example, .fit - 100%, .fit50 - 50%, .fit25 - 25% and so on depending on the need. And in css, already through media queries, adjust the exact sizes.
2) Alignment. ckeditor simply puts float:left on the photo; or float:right; but on devices with a small screen, it makes no sense to align images and wrap text around them. Again I decide everything through classes: .left and .right. At a certain breakpoint, the photo becomes float:none; width:100%;
3) LazyLoad and required size. Clients very often upload photos without any processing, that is, often with a resolution of, roughly speaking, 8000x6000. This is easily solved on the backend, a php script that uploads a photo simply resizes it to, for example, 1600 in width. But back to the iPhone 5s, it makes no sense to upload a photo from 1600 in width. It is enough for him and 400-500 pixels. You can set up lazyload through data attributes, and on the src of the img tag hang some kind of gif preloader or photo, but in extremely low quality. Everything is fine and even easy to do on the side of the php backend, but only in the editor itself, instead of a photo, we will observe a gif spinner or a very low-quality photo...
I want to ask for advice on the best way to solve the problem. Particularly concerned about the lazyload part. The backend can easily save each uploaded photo in 3-4 resolutions and, for example, one in low resolution with a blur for the placeholder. It's not a problem. Just how can I make it convenient to upload photos with minimal effort, so that in the editor dialog I can check the box next to the need for LazyLoad, check the box next to saving in different resolutions?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question