This time, let me start with the summary before I describe the solutions step by step:

Background

During the past months, I had set up two demos. On an almost pure WordPress 6.1¹ and a pure bootScore². Now, I’ve saved the respective screenshots. The left presents the post list with featured images, as the index.php of an unmodified bootScore generates it. The right presents the post list as generated by archive-masonry.php³ from the template package of an otherwise unmodified bootScore.

In both cases, the blurring effect arises on large screens. In the right picture, it is a bit weaker because the difference between the space provided and the size of the embedded image is smaller. Then I offered two solutions, a traditional and an advanced⁴:

• The traditional solution lets WordPress generate an additional thumbnail when uploading, whose width of 560px is between the default sizes ‘medium’ and ‘large’.⁵ Additionally, this solution no longer makes the templates ask for the size ‘medium’, but for the self-defined size bsTeaser.
• The advanced solution uses the features of the tag <img>, as they were enabled under HTML‑5. By that, the pages tell the displaying browsers which images are available and up to what space they should use which one. But eventually, the browser chooses the right one on the base of this information.

The point is this:

• In the traditional solution, we — the site editors — still statically decide which image the browser shall embed into the space — even though we don’t know its actual size (responsive design).
• In the advanced solution, the browser decides, because it knows the size of the actually available, ‘Responsive Design’-conditioned space. And it can decide that because we have told, which images are available with which dimensions.

Solutions

• For solutions 1 and 2 insert the line add_image_size('bsTeaser', 560, 0, false ); into your functions.php:
• For solution 1, replace get_the_post_thumbnail(null, 'medium') with get_the_post_thumbnail(null, 'bsTeaser') in all templates relevant to you.
• For solution 2 insert the following lines to your functions.php:

/*
 * Applay the better html-5 based image tag structure (with srcset and sizes) 
 * (C) 2023 Karsten Reincke
 * SPDX-License-Identifier: MIT
 *
 * Created in accordance with 
 * a) https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/
 * b) https://straightvisions.com/en/news/howtos-en/gutenberg-and-responsive-image-sizes/
 */
function html5ThumbnailHtml($html, $post_id, $post_thumbnail_id, $size, $attr) {
  $id = get_post_thumbnail_id($post_id); // gets the id of the current post_thumbnail (in the loop)

  $columnSize=", 400px"; 
  if (is_single($post_id)) $columnSize=""; // take the complete screen for visualization  

  $smSrc="";
  $smSize="";
  $mdSrc="";
  $mdSize="";
  $lgSrc="";
  $lgSize="";
  $flSrc="";
  $flSize="";
  $bsSrc="";
  $bsSize="";
  $defImg=null; 

  $smImage=(array) wp_get_attachment_image_src($id, 'thumbnail');
  if ($smImage!=null) {
    $smSrc=$smImage[0] .' '. $smImage[1] .'w';
    $smSize='(max-width: ' . $smImage[1] . 'px) ' . $smImage[1] .'px';
  }

  $mdImage=(array) wp_get_attachment_image_src($id, 'medium');
  if ($mdImage!=null) {
    $mdSrc=$mdImage[0] . ' ' . $mdImage[1] .'w';
    $mdSize='(max-width: ' . $mdImage[1] . 'px) ' . $mdImage[1] .'px';
  }

  $bsImage=(array) wp_get_attachment_image_src($id, 'bsTeaser');
  if ($bsImage!=null) {
    $bsSrc=$bsImage[0] . ' ' . $bsImage[1] .'w';
    $bsSize='(max-width: ' . $bsImage[1] . 'px) ' . $bsImage[1] .'px';
  }

  $lgImage=(array) wp_get_attachment_image_src($id, 'large');
  if ($lgImage!=null) {
    /*
     * There seems to be a bug in wp_get_attachment_image_src($id, 'large'):
     * the function returns a wrong width (640): Solution: hardcode
     * values in accordance with the definition under settings
     */
    $lgSrc=$lgImage[0] . ' ' . '1024w';
    $lgSize='(max-width: ' . '1024px) '  .'1024px';
    $defImg=$lgImage[0];
    //$lgSrc=$lgImage[0] . ' ' . $lgImage[1] .'w';
    //$lgSize='(max-width: ' . $lgImage[1] . 'px) ' . $lgImage[1] .'px';
  }

  $flImage=(array) wp_get_attachment_image_src($id, 'full');
  if ($flImage!=null) {
    $flSrc=$flImage[0] . ' ' . $flImage[1] .'w';
    $flSize='(max-width: ' . $flImage[1] . 'px) ' . $flImage[1] .'px';
    if(!($defImg)) $defImg=$flImage[0];
  }

  $srcSet="";
  $sizeSet="";
  if ($smSrc) {
    $sep=' ';
    if ( ( ($mdSrc)||($bsSrc) )||( ($lgSrc)||($flSrc) ) ) $sep = ', ';
    $srcSet=$smSrc . $sep;
    $sizeSet=$smSize . $sep;
  }

  if ($mdSrc) {
    $sep=' ';
    if ( ($bsSrc)||( ($lgSrc)||($flSrc) ) ) $sep = ', ';
    $srcSet=$srcSet . $mdSrc . $sep;
    $sizeSet=$sizeSet . $mdSize . $sep;
  }

  if ($bsSrc) {
    $sep=' ';
    if ( ($lgSrc)||($flSrc) ) $sep = ', ';
    $srcSet=$srcSet . $bsSrc . $sep;
    $sizeSet=$sizeSet . $bsSize . $sep;
  }

  if ($lgSrc) {
    $sep=' ';
    if ($flSrc) $sep = ', ';
    $srcSet=$srcSet . $lgSrc . $sep;
    $sizeSet=$sizeSet . $lgSize . $sep;
  }
  if ($flSrc) {
    $srcSet=$srcSet . $flSrc;
    $sizeSet=$sizeSet . $flSize;
  }
  $alt=get_post_meta($id, '_wp_attachment_image_alt', TRUE);
  $class = $attr['class']; // gets classes passed to the post thumbnail, defined here for easier function access

  $html = '<img src="' . $defImg . '" ' . 
         'alt="' . $alt . '" ' . 
         'srcSet="' . $srcSet . '" ' .
         'sizes="' . $sizeSet . ' ' . $columnSize .'" ' .
         'class="' . $class . '" />';
  return $html;
}
add_filter('post_thumbnail_html', 'html5ThumbnailHtml', 99, 5);

You may read the code like this:

• First, the algorithm fetches the id of the ‘Featured Image’ and sets the approximate width of a column, the browser shall use if the window is larger than the width of the largest image.
• Then, the algorithm requests the sizes of all defined images and computes the values Image-path-width and Image-width Responsible-for-place-width.
• Finally, the list of available images and the list of which image width is responsible for which space width are created from this.
• And finally, this is converted as an img tag with srcSet and size list.

So for the feature image used in this article, the following line is sent to the browser:

On this basis, the browser itself decides which image to fit where and when. That’s the method for using Responsive Images in a Responsive Design.

Of course, I didn’t come up with this or put it from theory into practice myself. I essentially follow three sources:

• webdesign tutsplus: html5 pictures for responsive images
• straightvisions: gutenberg and responsive image-sizes
• developer.wordpress.org: wp_get_attachment_image_src

And how does this …

… support our migration to bootScore? Well, once started with improving the image handling, a web designer will also notice the blurred ‘featured images’ of bootScore. She will try and refine solutions. And she may also tackle them with new HTML‑5 techniques. Because with that, a fancier image strategy combined with an integrated license fulfillment process and its own logo will really make sense. However, pictures bring colors to reading. So they should be integrated into a customized color concept. This post also contributes something to this topic.

1. as an additional extension I only needed Better Search Replace
2. I uploaded and assigned the ‘Featured Images’ in the size 1280*720
3. with an aligned area <header>..</header>
4. implemented by respecting the same constraints
5. So far, I had recommended 600x600. Now after some discussion, some reading up, and extensive testing I think a 16:9 image with a width of 560px is sufficient.

The post bootScore Without Blurred ‘Featured Images’ appeared first on FODINA 4 FOSS.

Solution

• For getting a nicer tag cloud
  • install the Plugin Cool Tag Cloud,
  • goto Appereance/Widgets,
  • copy the widget Cool Tag Cloud into the sidebar,
  • open it to configure it,
  • set the value Largest Font to 17 (so that the tags denoting more posts are displayed larger),
  • select an image color fitting the style of your theme,
  • and: Bingo.
• For getting a nicer recent post list
  • install the plugin [Recent Posts Widget Extended] https://de.wordpress.org/plugins/recent-posts-widget-extended/,
  • goto Appereance/Widgets,
  • replace the standard widget recent-post-widget in the sidebar with the new recent-post-widget extended,
  • and again: Bingo

Background

WordPress offers some plugins for improving the tag cloud. Its own widget is a little spartan. But most of the alternatives are somehow outdated¹ or try to offer complete tag management. Thus, for the moment² I could only find two candidates: Cool Tag Cloud and Creative Tag Cloud. The latter produces a very stylish spiral. But it is difficult to configure. And the result does not properly work on small devices. Quite different in contrast: Cool Tag Cloud. On its description page, it pretends to be Open-Source Software. But the repository neither contains a license file nor a licensing statement. So — as a FOSS purist — I should ignore it, which I do not do because it is officially hosted as a WordPress plugin and WordPress is licensed under the GPL‑2.0. In other words: I am counting on the Copy-Left Effect.

WordPress delivers its own recent post widget as well as it contains its own tag cloud widget. And the recent post widget also produces a visually rather limited result. For its improvement, I bet on the plugin recent post widget extended. According to its readme.txt, it is licensed under GPL-v3 or later. And eventually, it directly does what I wanted that it should do.

And how does this …

… support our migration to bootScore? Well, when the web designer has completed her work on good illustrations, she can relax and integrate tags and clouds into her site, improve her overview page and design her own landing page. Whether the resulting fullness really benefits her own reader, whether it can become slimmer and how, whether more discreet references and specific fonts also increase the readability, all this she should nevertheless consider while implementing these features. This post supports these steps towards a personalized bootScore site.

1. = not tested with my current version 6.1.1
2. 2023.3.6

The post Topic Clouds & Post Lists: 2 On 1 Stroke!! appeared first on FODINA 4 FOSS.

For large screens, bootStrap itself offers only a ‘solution’, that distorts 100% of all images: It queries WordPress for medium images¹ and lets the browser fit them into a square space. But the generated thumbnails of size medium preserve the aspect ratio of the original. So, the browser displays rectangular images as squares. The distortion is guaranteed.

Discussion

I also offered my way to the bootScore team, via a pull request and a detailed justification. The responses were interesting. The consensus was that handling images in general — and in particular, cleaning up this unsightly detail — shall be the job for the programming bootScore user. However, including larger thumbnails — as I suggested — would also apply to smartphones, degrade their performance, and thus degrade their SEO.

The SEO hint is certainly correct. That’s why I hadn’t suggested using the large size. But what I still don’t understand is why such a valuable work like bootScore looks worse than it should at a first practical glance. Yes, if you — with the original bootScore index.php — go through the possible cases with a Mobile Simulator, it shows a consistently good appearance. But just not on a desktop screen of the size 2560x1440. There, the browser renders the medium-sized image ‘300x169’ into a square provided by bootScore — with horrible results.² And as the devil would have it: bootScore itself demonstrates this ugly effect — by its 5.2.3.1 announcement

Consequences

Thus, we bootScore users have to think and rework carefully, especially with the ‘Featured Images’. One solution I have pointed out. The bootScore team has shown me another way: I should simply activate a template from https://github.com/bootscore/bs-loop-templates as my new home.php, which does not convert to a square, like https://bootscore.me/archives/equal-height-sidebar-right/.³

And what can I say: This looks good. It will look even better when I will have changed the now inappropriate titles in the template . And the template https://bootscore.me/archives/masonry/ would look really great, if — yes, if this one existed with a sidebar and if I switched in that template from the_excerpt() to the_content().

And how does this …

… support our migration to bootScore? Well, once started with improving the image handling, a web designer will also notice the blurred ‘featured images’ of bootScore. She will try and refine solutions. And she may also tackle them with new HTML‑5 techniques. Because with that, a fancier image strategy combined with an integrated license fulfillment process and its own logo will really make sense. However, pictures bring colors to reading. So they should be integrated into a customized color concept. This post also contributes something to this topic.

1. of size 300x?? — the question marks stand for the value that preserves the original aspect ratio at a width of 300
2. And in accordance with Murphy, our customer will be viewing her site on just such a device.
3. The template alternatives are provided in the bootScore download section

The post Less Blurred Featured Images appeared first on FODINA 4 FOSS.

Solution

• Create your own regular logo, preferably as an SVG.
• Create your own smaller logo, preferably as SVG.
• Copy your regular logo to bootscore-child/img/logo/logo.svg.
• Copy your smaller logo to bootscore-child/img/logo/log-sm.svg.
• Also, follow the instructions to create the respective [favicons](https://bootscore.me/documentation/header-php/

Background

The logos are displayed by the nav area of the file header.php and are held in a container, which also has to manage the menu etc. The respective img tags used in it do not specify any heights or widths. Thus, the icons are displayed in the dimensions they were designed with. This is also true for SVG images. So: the higher the generated logo, the higher the NAV area; the longer the logo, the more the following elements are shifted to the right.

This is not a disadvantage, but a lean solution. After all, logos that are displayed on every page are welcome to be more discreet. The reader will also notice smaller versions. I, at least, have had good experiences with the following values:

• 132x27 pixel and 76x27 pixel (bootScore logo.svg and logo-sm.svg)
• 131x46 pixel and 48x56 pixel (logo fodina.de)
• 102x57 pixel and 54x54 pixel (logos karsten-reincke.de)

After creating the favicons, the user should — according to the header.php-Docu — adopt certain values. The specified line numbers refer to the file header.php as it has initially been supplied by bootScore, not to the generated favicons: Of the files created by the realfavicongenerator, only the file site.webmanifest shall be modified by removing the preceding slashes of the absolute paths.

To perform the recommended favicon check, the generated files must be imported into a (pre) production system so that the URL of the site can be handed over to the https://realfavicongenerator.net/favicon_checker. Currently¹, this check discovers errors related to the files generated by the realfavicongenerator itself: well, a bit astonishing, isn’t it?

And how does this …

… support our migration to bootScore? Well, once started with improving the image handling, a web designer will also notice the blurred ‘featured images’ of bootScore. She will try and refine solutions. And she may also tackle them with new HTML‑5 techniques. Because with that, a fancier image strategy combined with an integrated license fulfillment process and its own logo will really make sense. However, pictures bring colors to reading. So they should be integrated into a customized color concept. This post also contributes something to this topic.

1. as of 03/03/2013

The post Your Own Logo and Favicons — bootScore Helps! appeared first on FODINA 4 FOSS.

Solution

• First, use image databases whose pictures are released under the terms of the CC0 license.¹ E.g. pxhere² or openclipart.³
• Then evaluate image databases whose pictures have been published under any different Creative Commons license. E.g. Wikimedia⁴, flicker.com/creativecommons or piqs.de
• But avoid images that are licensed under a CC-??-NC-??⁵ license.⁶
• And meticulously fulfill the other conditions, such as attribution. A good place to do that is a page with image credits.
• Finally, be careful if you use an image database that distributes its images under its own license, which is equivalent to a CC0 license, but excludes certain uses after all.⁷. E.g. pexel⁸, unsplash⁹, or pixabay¹⁰)
• Avoid, if possible, image databases that mix commercial paid images with free.¹¹ E.g. freephotos or the nounproject
• Definitely avoid meta image databases in any case.¹²

Background

On the first attempt, it seems easy. After all, most of the time, the author will only want to ‘illustrate’ her posts. But if she has linked a web store or consulting offer to her site, she earns money indirectly with the images. And thus she uses the images commercially. So again the question is, what can she do?

I have outlined my way above. Two additions to this:

• When it comes to ‘logos’, I search the web presence of the logo owners. Often they tell us explicitly what we can and cannot do with their logos. And this is even true for non-profit organizations, like the OSI((for logo usage cf. https://opensource.org/logo-usage-guidelines/)) or those of the Gimp((for logo usage cf. https://github.com/GNOME/gimp/blob/master/docs/Wilber.xcf.gz.README)).
• When it comes to what is pictured, I follow two rules of thumb:
  • Be careful with people and products depicted — they’d rather not.
  • Caution with unknown buildings

And in what way is this …

… part of the overarching topic FOSS Compliance? For fulfilling the requirements of FOSS licenses, we have to consider specific individual cases as well as side effects — for software, pictures, or documents. We should unhide trends and write guidelines. Above all, however, we must drive forward the automation of license fulfillment, make our licensing knowledge freely available, cast it into smaller tools, and bring it into larger systems: Because FOSS thrives on freedom through license fulfillment, large and small. That’s what also this article is about.

1. We’re allowed to use those for no consideration, after all.
2. for licensing see https://pxhere.com/en/license
3. for licensing cf. https://openclipart.org/faq
4. for licensing cf. https://commons.wikimedia.org/wiki/Commons:Licensing/de
5. for the layer model of CC licenses, see https://creativecommons.org/licenses/
6. Because legally even the simplest blog can still be interpreted as a commercial enterprise.
7. Challengingly, these databases often allow commercial use, but at the same time prohibit the sale of the images, even in print, or their incorporation into other databases
8. for licensing cf. https://www.pexels.com/license/
9. for licensing cf. https://unsplash.com/license
10. for licensing cf. https://pixabay.com/de/service/license/
11. Too great the risk that you pick a non-free image.
12. What exactly applies here is very hard to track there.

The post Getting Nice Pictures — Where From, If Not Steal? appeared first on FODINA 4 FOSS.

For example, sometimes I have to say where I got the image, who its photographer is, and what license it is under. The right place to fulfill such conditions is a page for image credits¹:

Solution

A Table For Image Credits

• Create a page ‘Image Credits’ and include it on your site like your imprint
• Install the plugin TablePress.
• Create a table with the 4 columns ‘Picture’, ‘Download & Licensing’, ‘License’, and ‘Attribution’.
• Include this table in your page Image Credits by using the TablePress shortcode.

A New Image Reference

• Add a new row to the image reference table.
• Concerning the first column ‘IMAGE’
  • open the media library, click on the new image and remember its ID, which is displayed in the browser URL.
  • enter the already-known short code wrong image data.
• In the second column, link an appropriate text to the same image in the database. If the target page does not contain a licensing statement, add a second link in the same column that leads to the licensing statement of the picture database.
• In the third column, link the license name to the license text, preferably in the version from the image database.
• In the fourth column, enter all the information that the license requires.

Background

First things first: The WordPress plugin TablePress is actively maintained and is — according to the file readme.txt — GPL‑2.0 licensed. So this is a ‘flawless’ piece of Open-Source software.

Finally, the more complex aspects: Why do we need an image credit at all? Formally, we don’t! We just need to fulfill in some way every requirement of the license that has been linked to the image we are using. But the license compliance itself is non-negotiable for the sincere user: either she respects the terms of the license, or she does not use the image.²

That’s why I make things simple for myself: I enter every image into my table for image credits according to the marked pattern. Even those, where I am free to say nothing — like with PxHere pictures. And if I follow the pattern, nothing slips through my hands either. Hopefully.

To that end, I’ve written myself a set of short codes that make it a snap to add a new image to the table. I will gladly pass on these codes on request.

And how does this …

… support our migration to bootScore? Well, once started with improving the image handling, a web designer will also notice the blurred ‘featured images’ of bootScore. She will try and refine solutions. And she may also tackle them with new HTML‑5 techniques. Because with that, a fancier image strategy combined with an integrated license fulfillment process and its own logo will really make sense. However, pictures bring colors to reading. So they should be integrated into a customized color concept. This post also contributes something to this topic.

1. BTW: In the European legal space, there is no such thing as ‘public domain’. But we can usually use the images published in this way in America
2. I have already written about image trolls and their ‘business model’

The post A Picture Credit Page? Really? appeared first on FODINA 4 FOSS.

Solution

• Enter the following lines in your functions.php:

// let WordPress also derive this square version from the uploaded images
add_image_size( 'bsTeaser', 600, 600, true );

• Replace the true or 1 with false or 0 in the recently added lines, with which we had also enabled cropping of the middle size:

//do not(!) crop the medium size images to the defined values exactly
// as it is done for thumbnails
if(false === get_option("medium_crop")) {
  add_option("medium_crop", "0");
} else {
  update_option("medium_crop", "0");
}

• Copy bootscore-main/index.php to bootscore-child/home.php.
• In home.php, replace the string get_the_post_thumbnail(null, 'medium') in both places with ‘get_the_post_thumbnail(null, ‘bsTeaser’)

Background

Let’s review these steps for understanding the idea:

With the directive add_image-size, we enforce WordPress — when it loads an image into the media library — not only to compute the traditional smaller sizes as they are configured in Settings/Media, but also to create a 600x600 thumbnail. With the name bsTeaser we can request the path to this new image from WordPress to embed it in a post.¹ And with the inserted value true we make WordPress cropping the original to a square.

So, why 600x600 and not 300x300 or 400x400 squares? This is due to bootScore! Bootstrap — and thus bootScore — do not work with absolute sizes. Rather, they divide the available space into 12 columns of equal width. And sizes are then specified relative to column widths. Something like as wide as including column 4 up to and including column 6. Of course, Bootstrap says this much more elegantly and in a more ‘encapsulated’ way.

But the effect is the same: In a responsive design, the size of the screen showing a page determines how much space there actually is from column 4 to column 6. So, the browser of another machine mostly must convert an image that by default fits into the space defined by the size of the first.

Rendering a picture down preserves the sharpness. Only some details become invisible. But rendering a picture up blurs it: Neither WordPress nor the browser knows, how to fill the new space in accordance with reality. So if we want to add images to bootstrap areas in a way that they look good on large screens, we need to increase the likelihood that the images will be rendered down rather than rendered up. The best way to do that would be to just embed the original images into the pages and let the client machine decrease them.

But this slows down the delivery of a page: transferring larger images over the net takes more time than smaller ones. And decreasing larger images needs more computing time than decreasing smaller ones. In fact, we are trying to find empirically the best solution. And thus — for now — 600x600 seems to us to be the best size.

After all, in our previous post, we had urged WordPress to crop the medium size as well. We have to resolve that. Just deleting the corresponding lines from the functions.php is not enough, though. WordPress has remembered our previous settings. So we have to overwrite them explicitly.

Finally, we copy the file index.php from the bootScore main theme under the name home.php into our child theme folder. This enforces WordPress to start on a higher level of its template hierarchy. So we don’t deprive ourselves of the fallback solution.

Remaining to mention, why we don’t replace the previous solution altogether with this ‘better’ one? Well, sometimes good is good enough. The better one would only make more work without advancing the result. So if you are sure that you don’t need the medium files in the original aspect ratio, you can well stay with our first approach.

And how does this …

… support our migration to bootScore? Well, once started with improving the image handling, a web designer will also notice the blurred ‘featured images’ of bootScore. She will try and refine solutions. And she may also tackle them with new HTML‑5 techniques. Because with that, a fancier image strategy combined with an integrated license fulfillment process and its own logo will really make sense. However, pictures bring colors to reading. So they should be integrated into a customized color concept. This post also contributes something to this topic.

1. on php level

The post Larger Picture Squares — A Remedy For Blurred bootScore Images? appeared first on FODINA 4 FOSS.

One example of that challenge is bootScore’s handling of the primary post images (= ‘featured images’). By default, the web designer explicitly assigns a picture to a post. The browser displays this picture above the text of a page as it has been uploaded into the media library. bootScore manages this quite well. Usually, a theme offers also a preview list of all posts. In this list, each excerpt of a post is supplemented by the respective ‘featured image’. bootScore organizes that, too. However, the displaying browser blurs the featured images in the post preview — although they look perfect in the post view.

I had to think around three corners to understand why this happened. And around one corner to find the solution:

Solution

• Enter the following code into your functions.php:

// crop the medium size images to the defined values exactly
// as it is done for thumbnails
if(false === get_option("medium_crop")) {
  add_option("medium_crop", "1");
} else {
  update_option("medium_crop", "1");
}

Background

So, what’s the problem:

Ideally — according to the web — primary post images (= ‘Featured Images’) shall have a 16:9 ratio, e.g. in the sizes 1200x628 or 1280x768.¹ WordPress already calculates in advance — when uploading — smaller versions.² So it can serve a request faster: It does not have to deliver the large uploaded images again and again to the browser (transfer time), which renders them down to the desired smaller dimensions (computing time) on the client machine. On the other end, WordPress allows the web designer to ask for and include the most appropriate image file for a space.

So if I want to illustrate a list of just article titles, I can have WordPress provide me with the path to the smallest image and prepend it to the entry. If I want to beautify the starting lines of the posts, I can ask WordPress for the paths of the medium-large files and have them placed aside from the article’s beginning.

And here it comes: WordPress calculates the additional image files in advance. For those in the smallest thumbnail format, it crops the files to a square size. For the others, it keeps the aspect ratio by default. So for an original image of size ‘1200x628’ it creates a small preview file of size ‘150x150’ (thumbnail) and a larger preview file of size ‘300 x 157’ (medium). But in the list with the article beginnings, bootScore has provided a square space of — for example — 300 x 300. Thus, if WordPress has sent the browser the small preview file, the browser upsizes the image from 150x150 to 300x300, which makes it blurry. If WordPress has sent the medium preview file, the browser converts the image from 300x157 to 300x300, which distorts it.

So, plague or cholera! Even if I had manually squared all primary image files. The browser distorts or blurs the large image above the post. Either in the preview of the post or in the post itself.

However, I wanted to reprogram or exchange the bootScore templates only in case of an emergency.³

So the only thing left to do was to persuade WordPress itself to square the middle format as well. And for this, I actually only had to modify a parameter via the functions.php.⁴

And how does this …

… support our migration to bootScore? Well, once started with improving the image handling, a web designer will also notice the blurred ‘featured images’ of bootScore. She will try and refine solutions. And she may also tackle them with new HTML‑5 techniques. Because with that, a fancier image strategy combined with an integrated license fulfillment process and its own logo will really make sense. However, pictures bring colors to reading. So they should be integrated into a customized color concept. This post also contributes something to this topic.

1. But even in 4:3 format (1200:800) the problem outlined here would arise.
2. thumbnail: 150x150, medium: <300x<300 und large: <1024x<1024
3. bootScore offers many variants.
4. which I learned of course from the net: see stackoverflow 3454337

The post Blurred Featured Images In BootScore? appeared first on FODINA 4 FOSS.

Until now, the browser that is supposed to display the ‘Fancy Box Image’ always fetches the large image — even if the user only wants to see the reduced version. And then browser reduces it:

<a href="ORIGINAL_IMAGE_URL" data-fancybox=""><img src="ORIGINAL_IMAGE_URL" width="SMALLER_PLEASE"></a>

Thus, the browser that is supposed to display the image always downloads the large image — even if our user only wants to see the reduced version. And then it renders the large version down. In other words: the bigger the original image, the longer the download, the longer the rendering, and the later the display. But WordPress has already precalculated different versions of the images. So why not take the one first and get the big one only on demand?

Solution

• Check that your functions.php contains the following code for displaying block images¹:

/*
 * Simple short code for inserting a fancy boxed image 
 * (C) 2023 Karsten Reincke
 * SPDX-License-Identifier: MIT
 */
function fcbPicCode($atts){
  $atts = (array) $atts;
  $imid = $atts[0];   // obligatoric parameter
  $width = $atts[1];  // obligatoric parameter
  $wpsize = "";       // thumbnail, medium, large, or full
  $alt="";                    // optional parameter
  $style="is-style-default";  // optional parameter 
  $align="alignleft";         // optional parameter

  /* IDEA: try to download the best fitting image size be default.
   * Download the full sized image if and when the user had said
   * she wants to see it by a click (fancy)
   */
  if ($width <= 150)
    $wpsize = "thumbnail";
  elseif ($width <=300)
    $wpsize = "medium";
  elseif ($width <= 1024)
    $wpsize = "large";
  else
    $wpsize = "full";

  /* get the path to the original image */
  $fimgp=wp_get_attachment_image_url($imid,"full");
  if (!($fimgp)) return ("wrong image data");
  /* if it's an svg, there won't be any smaller images */
  if (wp_get_image_mime($fimgp) == "svg" )
    $simgp=$fimgp;
  else {
  /* otherwise get the path to the fitting smaller image */
    $simgp=wp_get_attachment_image_url($imid,$wpsize);
    if (!($simgp)) $simgp=$fimgp;
  }

  if (array_key_exists(2,$atts)) {
    $alt=$atts[2];
    if (array_key_exists(3,$atts)) {
      $style=$atts[3];
      if (array_key_exists(4,$atts))
        $align=$atts[4];
    }
  }

  $res= 
   '<figure class="wp-block-image ' . $align . ' size-medium is-resized ' . $style . '">' .
     '<a href="' . $fimgp . '" data-fancybox="">' .
       '<img src="' . $simgp . '" alt="'. $alt .'" width="' . $width . '" >' .
      '</a>' .
   '</figure>';
  return $res;

}
add_shortcode('fcbpic', 'fcbPicCode');

• Check that your functions.php contains the following code for displaying inline images:

/*
 * Simple short code for inserting a fancy inline img 
 * (C) 2023 Karsten Reincke
 * SPDX-License-Identifier: MIT
 */
function fciPicCode($atts){
  $atts = (array) $atts;
  $imid = $atts[0];   // obligatoric parameter
  $width = $atts[1];  // obligatoric parameter
  $wpsize = "";       // thumbnail, medium, large, or full
  $alt="";                    // optional parameter
  $style="is-style-default";  // optional parameter 

  /* IDEA: try to download the best fitting image size be default.
   * Download the full sized image if and when the user had said
   * she wants to see it by a click (fancy)
   */
  if ($width <= 150)
    $wpsize = "thumbnail";
  elseif ($width <=300)
    $wpsize = "medium";
  elseif ($width <= 1024)
    $wpsize = "large";
  else
    $wpsize = "full";

  /* get the path to the original image */
  $fimgp=wp_get_attachment_image_url($imid,"full");
  if (!($fimgp)) return ("wrong image data");
  /* if it's an svg, there won't be any smaller images */
  if (wp_get_image_mime($fimgp) == "svg" )
    $simgp=$fimgp;
  else {
  /* otherwise get the path to the fitting smaller image */
    $simgp=wp_get_attachment_image_url($imid,$wpsize);
    if (!($simgp)) $simgp=$fimgp;
  }

  if (array_key_exists(2,$atts)) {
    $alt=$atts[2];
    if (array_key_exists(3,$atts)) {
      $style=$atts[3];
    }
  }

  $res= 
     '<a href="' . $fimgp . '" data-fancybox="">' .
      '<img src="' . $simgp . '" alt="'. $alt .'" width="' . $width . '" >' .
     '</a>' ; 
  return $res;

}
add_shortcode('fcipic', 'fciPicCode');

Background

The idea of these functions is clear: We let WordPress find the image file that is closest to the requested display width. But for SVGs, WordPress (or the corresponding plugin) does not pre-calculate other versions.² Therefore, we first get the original image, check if it is an SVG, and in the case of raster graphics let WordPress find the link to the image that fits best to the desired size. This would create an entry on the page like this

<a href="ORIGINAL_IMAGE_URL" data-fancy=""><img src="SMALL_IMAGE_URL" width="SMALLER_PLEASE"></a>

BINGO.

And how does this …

… support our migration to bootScore? Well, once a web designer has taken the first general steps and has checked SEO, she will soon turn to a really thick board, her properly clustered and presented menu without getting too fancy. Eventually, she is going to spruce and speed up the display of fixed and scalable images. This post talks about a part of this way.

1. Of course, I have already updated the elder versions in the elder posts. So, probably you will already have incorporated the improved version into your functions.php. If so, take this post an explanation how to deal with the pictures WordPress pre-calculates when you upload your image.
2. Computing other sizes in advance would make no sense, because SVGs do not have an intended initial size.

The post Fasten Your Fancy Images appeared first on FODINA 4 FOSS.