bootScore and the Blurred Featured Images I

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. That’s the way how bootScore inte­grates boot­strap per­fect­ly: it leaves the unfin­ished look to the pro­gram­ming web design­ers.

Unfin­ished — for exam­ple — is bootScore’s han­dling of the pri­ma­ry post images (= ‘fea­tured images’): Such an image is explic­it­ly assigned to a post and — on the sin­gle page — dis­played above the text as it has been uploaded into the media library. bootScore man­ages this quite well. Usu­al­ly, there is also a big list in a theme con­tain­ing the first sen­tences (excerpts/teasers) of all posts, each sup­ple­ment­ed by the respec­tive ‘fea­tured image’. bootScore does that, too. How­ev­er, here the dis­played images are blurred and dis­tort­ed — although they look per­fect in the sin­gle view.

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

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’) are uploaded in 16:9 for­mat, e.g. in the sizes 1200x628 or 1280x768.¹ Word­Press already cal­cu­lates in advance — when upload­ing — small­er ver­sions.² 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 offers devel­op­ers the option to ask for and include the most appro­pri­ate image file for a designed 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: In this case, the large image above the post in the sin­gle view would have been dis­tort­ed or blurred.

How­ev­er, I want­ed to repro­gram or exchange the bootScore tem­plates only in case of an emer­gency.³ 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.⁴

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 [↩]