A very last time: about better ways to deal with images in responsive designs

[kreincke]

Recently, I argued that bootScore does not adequately deal with images. You've answered that it's the task of the bootScore users to compensate for possible weaknesses because bootScore itself shall strictly follow Bootstrap. Here are some further info, positions, and solutions. I want to convince you to reconsider your position:

(I) Facts

I've created two demos, both based on a (nearly) pure WordPress and a really pure bootStrap:

• Demo A presents the post list as it is generated by the index.php of an unmod­i­fied bootScore. The Featured Image has been uploaded in size 1280*720. The smaller variants are automatically created by WordPress and embedded by bootScore. On a desktop machine with a larger screen, your can directly see the blurring effect.
• Demo B presents the post list as it is gen­er­at­ed by archive-masonry.php from the tem­plate package of an oth­er­wise unmod­i­fied bootScore: with the same but a bit weaker result.

Two solutions are possible:

• Demo Aa: Solution 1 - which I had already described in the past - is the method to use an additionally created bootScore specific image size between medium and larger.
• Demo Ab: Solution 2 - which I now present - uses the newer structure of the img-Tag in which the new attributes scrSet and sizes are applied.

Play around with these demos and see, what they do.

(II) Attitudes to this subject

You have argued that you want to follow bootstrap and therefore cannot contribute anything to the proper treatment of images. This must remain the task of bootScore users.

First, you are right, Bootstrap deals with images by making them fluid. https://getbootstrap.com/docs/5.0/content/images/ In accordance with the real image size and the given space, they are scaled up or down. That's the reason why they are so often blurred and distorted in Bootstrap based themes, not only in bootScore

Second, you are wrong, if you say, that doing that correctly is not your cup of tea:

Yes, Bootstrap can't do that, because it does not know anything about the real design. It offers methods to design a site, it does not apply them. But you do. If you do not want to take that job generally, every user of bootScore must invent his own solution. If there is one ideal HTML5 based solution, the best of the bootScore users will find this best solution - each for himself. And the other will miss it. I can't see any reason, why a general tool like bootScore should not offer such a general solution to all its users. By applying the Boostrap methods in a specific way, it does exactly do that.

(III) The good and the ideal solution:

My solution I which I proposed first is good. But it is not the best: Even by requesting another better fitting image format, it is still the site developer himself who decides which picture shall be embedded into a space. And he does that at a moment at which he can't know the real dimensions and constraints.

'My' Solution II delegates the task to select the best fitting picture to the browser. The pages tell the browser the options it has: The browser gets a list of equal images and its widths in form of a sourceSet. And it gets list of existing sizes mapped to the dimensions for which they can used. This is done by the 'new' structure of the img-Tag in HTML-5. This is not a cryptic way, but the official way HTML-5 wants to be used. For details see these documents:

• https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
• https://straightvisions.com/en/news/howtos-en/gutenberg-and-responsive-image-sizes/
• https://fodina.de/image-j/ and - as example with a larger set of posts - https://fodina.de/

In solution II, I've implemented the theoretical analyses into bootScore. So, if you agree, that eventually every one will use this official way and that it is the task of bootScore to deliver its users what's necessary to get a usable theme by implementing that what Bootstrap itself cannot deliver, then you will probably also agree that this technique should be incorporated into bootScore.

To cut the long story short: if you want to integrate this technique, I can prepare a respective PR. Tell me, if I shall do that.

[crftwrk]

As mentioned in a previous comment, we do not touch the WP image management. We follow straight Bootstrap and WordPress and use strict the tools they provide to us. If you want to change that, you can simply do this in your child.

I agree that images in horizontal cards on xl+ screens can be made better. We can improve them by dealing with gutter and col classes to less crop featured images on large screens. Less crop means more sharp. But this has a minor priority right now.

[kreincke]

Ok. Got it. As I mentioned, this was only a last try. I anticipated your answer, of course. I totally understand that you two try to keep your business clean and lean. Otherwise, you would probably not be able to do what you are doing.

In a few weeks / months I will start a little GitHub project 'pimp your bootStrap' into which I will collect all proposals I made and would make in the future. So, the solutions will not get lost. And you can point to it if other asking for the same features.

Good luck. Your work is great. Don't hesitate to ask if you need a specific help.

BR KR