Uploads Feature Request
5 posts by 3 authors in: Forums > CMS Builder
Last Post: February 7, 2017 (RSS)
By kitsguru - January 25, 2017
Working through new project and looking at responsive website using img srcset, I find that the number of thumbnails to be slightly inadequate to meet the needs of all devices and scenarios. I am requesting one more additional thumb size.
Assuming setting each image size for corresponds to a device breakpoint and using bootstrap 4 media query sizes:
Extra large ≥1200px - image 1920px wide (original)
Large ≥992px - image 1200px wide (thumb 1)
Medium ≥768px - image 992px wide (thumb 2)
Small ≥576px - image 768px wide (thumb 3)
Extra small <576px - image 576px wide (thumb 4)
Thumbnail - image 200px wide (thumb 5)
The proposal is that the image can be scaled down using max-width 100% at each device width. The thumb is for small images that might be used with slideshows etc.
<img sizes="(max-width: 576px) calc(100vw - 10px), 200px" src="thumb5.jpg"
srcset="thumb4.jpg 576w,
thumb3.jpg 768w,
thumb2.jpg 992w,
thumb1.jpg 1200w,
origin.jpg 1920w"
alt="yah"
class="img-responsive" />
Also it would useful if one text area for the info 1-5 could be textbox instead of textfield size - or maybe even wysiwyg. I suggest info5 for this. If not given a value in the section editor it would not display as it the behaviour now.
By ross - January 26, 2017
Hi Jeff
I see what you mean with the extra thumbnails.
I think we could customize something for you through consulting.
As an alternative, though, if you set the 4 thumbnails you have to the biggest sizes you need, you can then scale them down as needed for anything smaller.
Let me know any questions.
Thanks!
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com
Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/
By kitsguru - January 26, 2017
That is the point of my request, image file size impacts page load times and is a major factor in SEO these days, particularly for mobile.
We need at least one more size to hit the new breakpoints as a result of very wide, high resolution displays, the relatively new srcset attribute for images and SEO. It really shows up on my new Macbook Pro.
Research shows some images need as many as 7 or 8 sizes to maximize SEO (minimize load times).
Just scaling an image down does not effect the file size Nor load times. The current default image sizes of 800x600 when creating a new section are now too small.
This is not a major priority, but something to consider. It would also be worth considering incorporating image optimization as part of the upload process. I know there are already several requests in regarding image handling, and this should be added to the wish list. For now working within the current limits of CMSB is fine.
By ross - January 27, 2017
Hi Jeff
Thanks for the extra details.
I'll let Dave know about the suggestion about adding more thumbnails.
I am not sure on exactly when/how/if this will be implemented.
Let me know any other questions.
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com
Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/
By Dave - February 7, 2017
Hi Jeff,
Thanks for the feedback and suggestions. One thing we're exploring for the future is to move the image generation settings from the CMS Section Editors into the code so developers can specify unlimited numbers of thumbnails and image variations and have those created and cached in real time.
If you wanted to try out an existing library that does that there's phpThumb: http://phpthumb.sourceforge.net/
And alternatives: http://stackoverflow.com/questions/4224238/what-best-free-thumbnails-library-for-php
interactivetools.com