bootScore and the Blurred Featured Images II

Avoid­ing dis­tort­ed fea­tured images is pos­si­ble. We have shown that. How­ev­er, our method is not yet opti­mal: if we let Word­Press when upload­ing, also crop the medi­um-sized thumb­nails as squares, we give up what is com­mon­ly expect­ed. Maybe oth­er plu­g­ins need the ‘medi­um’ thumb­nails in the orig­i­nal aspect ratio after all. So it would be bet­ter if we left the com­mon thumb­nail for­mats untouched.

[ en | de ]


  • Enter the fol­low­ing 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 recent­ly added lines, with which we had also enabled crop­ping of the mid­dle 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, ‘bsTeas­er’)


Let’s review these steps for under­stand­ing the idea:

With the direc­tive add_im­age-size, we enforce Word­Press — when it loads an image into the media library — not only to com­pute the tra­di­tion­al small­er sizes as they are con­fig­ured in Settings/Media, but also to cre­ate a 600x600 thumb­nail. With the name bsTeas­er we can request the path to this new image from Word­Press to embed it in a post.1 And with the insert­ed val­ue true we make Word­Press crop­ping the orig­i­nal to a square.

So, why 600x600 and not 300x300 or 400x400 squares? This is due to bootScore! Boot­strap — and thus bootScore — do not work with absolute sizes. Rather, they divide the avail­able space into 12 columns of equal width. And sizes are then spec­i­fied rel­a­tive to col­umn widths. Some­thing like as wide as includ­ing col­umn 4 up to and includ­ing col­umn 6. Of course, Boot­strap says this much more ele­gant­ly and in a more ‘encap­su­lat­ed’ way. But the effect is the same: how much space there actu­al­ly is from col­umn 4 to col­umn 6 is deter­mined by the size of the screen on which the page is shown.2 So an image that is fit­ted into a space like this usu­al­ly has to be con­vert­ed. If it is ren­dered down, it will remain sharp, even if few­er details are vis­i­ble. If it is ren­dered up, it will be blurred: Word­Press can not know, how to fill the new space in accor­dance with real­i­ty. So if we want to add images to boot­strap areas in a way that they look good on large screens, we need to increase the like­li­hood that the images will be ren­dered down rather than ren­dered up. The best way to do that would be to just embed the orig­i­nal images into the pages and let the client machine decrease them. But this slows down the deliv­ery of a page: trans­fer­ring larg­er images over the net takes more time than small­er ones. And decreas­ing larg­er images needs more com­put­ing time than decreas­ing small­er ones. In fact, we are try­ing to find empir­i­cal­ly the best solu­tion. And thus — for now — 600x600 seems to us to be the best size.

After all, in our pre­vi­ous post, we had urged Word­Press to crop the medi­um size as well. We have to resolve that. Just delet­ing the cor­re­spond­ing lines from the functions.php is not enough, though. Word­Press has remem­bered our pre­vi­ous set­tings. So we have to over­write them explic­it­ly.

Final­ly, we copy the file index.php from the bootScore main theme under the name home.php into our child theme fold­er. By doing so, we pro­vide Word­Press with a start­up file high­er in its tem­plate hier­ar­chy, so we don’t deprive our­selves of the fall­back solu­tion.

Remain­ing to men­tion, why we don’t replace the pre­vi­ous solu­tion alto­geth­er with this ‘bet­ter’ one? Well, some­times good is good enough. The bet­ter one would only make more work with­out advanc­ing the result. So if you are sure that you don’t need the medi­um files in the orig­i­nal aspect ratio, you can well stay with our first approach.

  1. on php lev­el []
  2. That is, after all, the point of what we call respon­sive design. []
To top