Web-Design

Blurred Featured Images In BootScore?

/ by Karsten Reincke | Leave a comment

blurred flakes

bootScore — the Boot­strap-based Word­Press starter theme — can only be designed via CSS, PHP, and JS pro­gram­ming: If you want to fash­ion your web­site, you need to pro­gram. bootScore inte­grates Boot­strap tech­ni­cal­ly and leaves the vis­i­ble details to the pro­gram­ming web design­ers. And by default, it deliv­ers some­times blurred fea­tured images. Is it an unavoid­able task to fix that after­ward?

One exam­ple of that chal­lenge is bootScore’s han­dling of the pri­ma­ry post images (= ‘fea­tured images’). By default, the web design­er explic­it­ly assigns a pic­ture to a post. The brows­er dis­plays this pic­ture above the text of a page as it has been uploaded into the media library. bootScore man­ages this quite well. Usu­al­ly, a theme offers also a pre­view list of all posts. In this list, each excerpt of a post is sup­ple­ment­ed by the respec­tive ‘fea­tured image’. bootScore orga­nizes that, too. How­ev­er, the dis­play­ing brows­er blurs the fea­tured images in the post pre­view — although they look per­fect in the post view.

I had to think around three cor­ners to under­stand why this hap­pened. And around one cor­ner to find the solu­tion:

[ en | de ]

Solution

  • Enter the fol­low­ing 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 prob­lem:

Ide­al­ly — accord­ing to the web — pri­ma­ry post images (= ‘Fea­tured Images’) shall have a 16:9 ratio, e.g. in the sizes 1200x628 or 1280x768.1 Word­Press already cal­cu­lates in advance — when upload­ing — small­er ver­sions.2 So it can serve a request faster: It does not have to deliv­er the large uploaded images again and again to the brows­er (trans­fer time), which ren­ders them down to the desired small­er dimen­sions (com­put­ing time) on the client machine. On the oth­er end, Word­Press allows the web design­er to ask for and include the most appro­pri­ate image file for a space.

So if I want to illus­trate a list of just arti­cle titles, I can have Word­Press pro­vide me with the path to the small­est image and prepend it to the entry. If I want to beau­ti­fy the start­ing lines of the posts, I can ask Word­Press for the paths of the medi­um-large files and have them placed aside from the arti­cle’s begin­ning.

And here it comes: Word­Press cal­cu­lates the addi­tion­al image files in advance. For those in the small­est thumb­nail for­mat, it crops the files to a square size. For the oth­ers, it keeps the aspect ratio by default. So for an orig­i­nal image of size ‘1200x628’ it cre­ates a small pre­view file of size ‘150x150’ (thumb­nail) and a larg­er pre­view file of size ‘300 x 157’ (medi­um). But in the list with the arti­cle begin­nings, bootScore has pro­vid­ed a square space of — for exam­ple — 300 x 300. Thus, if Word­Press has sent the brows­er the small pre­view file, the brows­er upsizes the image from 150x150 to 300x300, which makes it blur­ry. If Word­Press has sent the medi­um pre­view file, the brows­er con­verts the image from 300x157 to 300x300, which dis­torts it.

So, plague or cholera! Even if I had man­u­al­ly squared all pri­ma­ry image files. The brows­er dis­torts or blurs the large image above the post. Either in the pre­view of the post or in the post itself.

How­ev­er, I want­ed to repro­gram or exchange the bootScore tem­plates only in case of an emer­gency.3

So the only thing left to do was to per­suade Word­Press itself to square the mid­dle for­mat as well. And for this, I actu­al­ly only had to mod­i­fy a para­me­ter via the functions.php.4

And how does this …Bilder

… sup­port our migra­tion to bootScore? Well, once start­ed with improv­ing the image han­dling, a web design­er will also notice the blurred ‘fea­tured images’ of bootScore. She will try and refine solu­tions. And she may also tack­le them with new HTML‑5 tech­niques. Because with that, a fanci­er image strat­e­gy com­bined with an inte­grat­ed license ful­fill­ment process and its own logo will real­ly make sense. This post also con­tributes some­thing to this top­ic.

  1. But even in 4:3 for­mat (1200:800) the prob­lem out­lined here would arise. [↩]
  2. thumb­nail: 150x150, medi­um: <300x<300 und large: <1024x<1024 [↩]
  3. bootScore offers many vari­ants. [↩]
  4. which I learned of course from the net: see stack­over­flow 3454337 [↩]
To top