Open-Source Webdesign

Neue Größen gegen verwischte Bilder in bootScore

/ von Karsten Reincke | Kommentar schreiben

unscharfe Lichter

Ver­zerr­te pri­mä­re Bei­trags­bil­der zu ver­mei­den, ist in Gren­zen mög­lich. Das haben wir schon gezeigt. Opti­mal ist unse­re Metho­de aber nicht. Wir ver­lie­ren den Anschluss an das, was üblich ist, wenn wir auch die mit­tel­gro­ßen Thumb­nails beim Hoch­la­den qua­dra­tisch zuschnei­den las­sen. Viel­leicht erwar­ten ande­re Plug­ins die ‘medium’-Thumbnails ja im ori­gi­na­len Sei­ten­ver­hält­nis. Bes­ser wäre es also, wenn wir die gän­gi­gen Thumb­nail-For­ma­te unbe­rührt lie­ßen und — zusätz­lich — neue Grö­ßen gegen ver­wisch­te Bil­der ins Spiel brin­gen:

[ de | en ]

Lösung

  • Tra­ge die fol­gen­den Zei­len in Dei­ne functions.php ein:
// let WordPress also derive this square version from the uploaded images
add_image_size( 'bsTeaser', 600, 600, true );

Erset­ze in den kürz­lich hin­zu­ge­füg­ten Zei­len, mit denen wir auch das Zuschnei­den der mitt­le­ren Grö­ße akti­viert hat­ten, das true bzw. 1 durch false bzw. 0:

//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");
};
  • Kopie­re bootscore-main/index.php nach bootscore-child/home.php
  • Erset­ze in der Datei home.php an bei­den Stel­len den Text get_the_post_thumbnail(null, 'medium') durch get_the_post_thumbnail(null, 'bsTeaser')

Hintergrund

Gehen wir die Schrit­te der Rei­he nach durch. Das erklärt die Idee:

Mit der Anwei­sung add_i­mage-size las­sen wir Word­Press — wenn es ein Bild in die Medi­en­bi­blio­thek lädt — außer den klei­ne­ren Ver­sio­nen, die unter Settings/Media kon­fi­gu­riert sind — auch neu­en 600x600-Thumb­nails erzeu­gen. Mit dem Namen bsTeaser kön­nen wir den Pfad zu die­sem neu­en Bild bei Word­Press erfra­gen und es dar­über auf php-Ebe­ne in einen Bei­trag ein­bin­den. Der Para­me­ter true sorgt dabei dafür, dass unser Ori­gi­nal genau auf die­se Maße — also qua­dra­tisch — zuge­schnit­ten wird.

War­um 600x600-Qua­dra­te und nicht 300x300- oder 400x400-Bil­der? Das ist bootS­core bedingt! Boot­strap — und also bootS­core — arbei­ten nicht mit abso­lu­ten Grö­ßen. Viel­mehr tei­len sie den vor­han­de­nen Platz in 12 gleich brei­te Spal­ten. Und Grö­ßen wer­den dann rela­tiv zu den Spal­ten­brei­ten spe­zi­fi­ziert.

Aller­dings bestimmt die Brei­te des Bild­schirms dann die Brei­te des Berei­ches von z.B. ‘Spal­te 4 bis 6’ wird.((Das ist ja auch der Sinn des­sen, was wir als Respon­si­ve Design bezeich­nen.)) Ein Bild, das in einen sol­chen Platz ein­ge­passt wird, muss also meis­tens umge­rech­net wer­den. Wird es her­un­ter­ge­rech­net, bleibt es scharf, auch wenn weni­ger Details zu sehen sind. Wird es hoch­ge­rech­net, wird es jedoch unscharf. Denn wie soll Word­Press auch wis­sen, was in den hin­zu­füg­ten Platz eigent­lich hin­ein­ge­hört?

Wenn wir also Bil­der in Boot­strap-Berei­che so ein­fü­gen wol­len, dass sie auch auf gro­ßen Bild­schir­men gut aus­se­hen, müs­sen wir die Wahr­schein­lich­keit erhö­hen, dass die Bil­der her­un­ter- und nicht hoch­ge­rech­net wer­den. Die bes­te Metho­de dazu wäre, nur die Ori­gi­na­le ein­zu­bin­den und vom Cli­ent-Rech­ner vor Ort her­un­ter­rech­nen zu las­sen. Das aber ver­lang­samt ja die Aus­lie­fe­rung einer Sei­te: Grö­ße­re Bil­der übers Netz zu über­tra­gen, kos­tet mehr Zeit, als klei­ne­re. Und grö­ße­re her­un­ter­zu­rech­nen, ist zeit­auf­wen­di­ger, als klei­ne­re. So ver­su­chen wir hier eine empi­risch gute Lösung zu fin­den, für bei­de Anfor­de­run­gen. Und da scheint uns vor­der­hand das 600x600-Bild­qua­drat für bootS­core bes­ser zu pas­sen.

Schließ­lich hat­ten wir in unse­rem vor­he­ri­gen Post Word­Press ange­hal­ten, auch die mitt­le­re Grö­ße zurecht­zu­schnei­den. Das müs­sen wir rück­gän­gig machen. Die ent­spre­chen­den Zei­len aus der functions.php ein­fach nur zu löschen, reicht aber nicht. Word­Press hat sich unse­re frü­he­ren Ein­stel­lun­gen gemerkt. Wir müs­sen sie jetzt also über­schrei­ben.

Schließ­lich kopie­ren wir uns die Datei index.php aus dem bootS­core-Haupt-The­me unter dem Namen home.php in unse­ren Child-The­me-Ord­ner. Wir bie­ten Word­Press damit eine in sei­ner Tem­p­la­te-Hier­ar­chie höhe­re Start­da­tei an, berau­ben uns also nicht der Fall­back­lö­sung.

Blie­be unse­rer Lese­rin noch zu erläu­tern, war­um wir die vor­he­ri­ge Lösung nicht ins­ge­samt durch die­se ‘bes­se­re’ ersetzt haben? Nun, manch­mal ist das Gute schon gut genug. Das Bes­se­re wür­de nur mehr Arbeit machen. Wer also sicher ist, dass sie die medi­um-Datei­en im ori­gi­na­len Sei­ten­ver­hält­nis nicht braucht und wer meint, dass ihre Site eher auf klei­nen Gerä­ten betrach­tet wird, kann gut bei unse­rem ers­ten Ansatz blei­ben.

Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun, ein­mal ange­fan­gen mit Ver­bes­se­run­gen der Bild­be­hand­lung, wer­den der Web-Desi­gne­rin auch die ver­wisch­ten ‘pri­mä­ren Bei­trags­gil­der’ auf­fal­len. Sie wird Lösun­gen aus­pro­bie­ren und ver­fei­nern. Und sie wird sie u.U. auch mit neu­en HTML‑5 Tech­ni­ken ange­hen. Denn damit wird eine aus­ge­fal­le­ne­re Bild­stra­te­gie samt inte­grier­ter Lizenz­er­fül­lung und das eige­ne Logo erst rich­tig sinn­voll. Wie auch immer: Bil­der brin­gen Far­be ins Lese­le­ben. Zuletzt soll­te all das also auch in ein eige­nes Farb­kon­zept ein­ge­bun­den sein. Zu die­ser The­ma­tik trägt auch die­ser Post etwas bei.

Im Übri­gen: Män­ner sind mit­ge­meint.

To top