Just purchased Pinegrow WP Pro and noticed that no attention is paid in the Bootstrap 4 modes to and or any modern approach for responsive/adaptive webdesign.
Looked at the building blocks that are for sale elsewhere and they mostly use background images for everything what is a no go for proper responsive webdesign.
Are there any plans for implementation of responsive images with art direction?
Technically it’s no problem in 2019, I’m using it every day but it would be nice to be able to drop in a big size image that is automatically cropped in the different sizes and split in jpg and webp (webp works in Google Chrome, Microsoft Edge and Mozilla Firefox!). Then the HTML is placed with links to the images.
Regards,
David
A image in the Bootstrap 4 carousel would look like this (sizes are only an example I know I can do it with a comma! ):
Thanks for your reply! Try to look at it a bit more positive and think out of the box!
Bootstrap is a framework that I use for many years and in that framework you can build what ever you want including the latest picture en srcset HTML techniques (that’s actually the idea behind Bootstrap) .
Pinegrow is an advanced editor and website builder. You wound find CSS Grid editor and smart components for Bootstrap to edit in Bootstrap it self and a SASS compiler too (I use NMP) so what you are saying is simply not true. All those things are build in in Pinegrow already!
It would be a real help when a responsive/adaptive images plugin is build in Pinegrow for the use in Bootstrap. Almost every webdesigner (in general) nowadays is using some sort technique to load only a particular image size and art direction for a particular device or they (in general) have mist the last 5 years of web development techniques. Hope it’s built in soon. I developed a full screen foreground image system (based on Lazy Sizes from Farkas on Github) that works on every device and can be build in Pinegrow as a plugin. It is using webp and jpg images. But a normal picture and srcet possibility would be great as well.
Example of my own developed all foreground images responsive system : picture srcset example change the browser size to see it working or look on a mobile phone
Here the same system working on a Bootstrap 4 website: Bootstrap 4 example picture srcset
Right now, there is a big push to optimize everything to conserve bandwidth and throughput because much of the world is still stuck on 3G. Even 4G can benefit from smaller files, but this is all temporary. In five years, nobody is going to care if an image is 50k or 150k or 500k because we’ll have gigabit transfer speeds as the norm.
It’s kind of like when we all used to compress files to save hard drive space because storage was so expensive. Now, storage is cheap, and people no longer want compressed files, they the highest resolution, best quality files possible.
In ten years, we’re all going to be wondering why people made such a fuss over things like Accelerated Mobile Pages. It will all seem pointless.
In Pinegrow, you can do whatever you want - even srcset. Admittedly it’s, like so many things in PG, not natively supported. I’m under the impression, mentioning this moons ago, too.
The things I don’t understand at all:
Why discussing this under the aspect of a f*****g framework which in itself, is only an add-on for a primary app anyway? Frameworks, templates, blocks and components are constraints. Rather strengthen the basic application, it’s a general view, building web based project is even impossible without using full-bloated frameworks. And if things are limited by them - ask their community.
One of the reasons I don’t support PG actively anymore is, that 75% and up of resources and efforts are spent into Bootstrap and WordPress (and the like) while there are tons of classy things could be invested into the app itself.
Wasting resources (available or not) seems to be part of mankind.
I’m here as a user of Pinegrow. So I’m primary discussing Pinegrow app - especially when a thread is posted under “general”. I’m as well aware about the most popular frameworks and CMSes available in market.
But the gist is, that the picture (and img) element basically belongs as a “new” (or additional) element into the core library (aka Library (add elements to page)) including an opportunity to add/adjust the required resources (building the source set). Thus enables “everyone” - dependant of something or not - using it out-of-the-box.
I have - Pinegrow spoken - certainly nothing against any add-on, plugin, library or action. But I tend to think them as addition - and I tend to think about a purchasing structure which is something like:
Ideally, once there is a proper documentation and perhaps API about writing the stuff for P3, it would be even possible to write your own stuff. So it would be an extreme flexible system and you’d pay only for stuff you really need.
It would be a nice and welcome addition to have this in Pinegrow!
Matjaz used “responsive images” on the Pinegrow site, and wrote an article about it on Medium (more than a year ago).
This was the first time I used responsive images on a production website. The approach is very powerful, but the implementation is begging for automation. It would be great to have a helper tool in Pinegrow that would take care of setting up the correct image sets and sizes. We’ll work on that.
@matjaz I thought that this would lead to have integration and support for “responsive images” in Pinegrow with smart and easy to use “visual helpers”.
Hopefully it’s still in their mind and/or on their todo list, so we can have it one day as a new feature in Pinegrow!
