Web

Larger Picture Squares — A Remedy For Blurred bootScore Images?

/ by Karsten Reincke | Leave a comment

blurred lights

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 pic­tures, 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. But we still need larg­er pic­ture squares:

[ en | de ]

Solution

  • 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’)

Background

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: In a respon­sive design, the size of the screen show­ing a page deter­mines how much space there actu­al­ly is from col­umn 4 to col­umn 6. So, the brows­er of anoth­er machine most­ly must con­vert an image that by default fits into the space defined by the size of the first.

Ren­der­ing a pic­ture down pre­serves the sharp­ness. Only some details become invis­i­ble. But ren­der­ing a pic­ture up blurs it: Nei­ther Word­Press nor the brows­er knows, 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. This enforces Word­Press to start on a high­er lev­el of 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.

And how does this …

… 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. How­ev­er, pic­tures bring col­ors to read­ing. So they should be inte­grat­ed into a cus­tomized col­or con­cept. This post also con­tributes some­thing to this top­ic.

  1. on php lev­el [↩]
To top