Samuel Brynolf

WordPress plugin: Make it Srcset

WordPress använder redan srcset för all bildhantering. Men för att utnyttja srcset-attributet fullt ut behöver man anpassa det i större utsträckning än vad som är inbyggt out-of-the-box. ‘Make it Srcset’ gör detta och lägger till andra features som lightbox, lazyloading, egna bildstorlekar och settings-sida.

Extern källa: Ladda ned Make it Srcset hos Wordpress

Documentation is currently in swedish but I’ll make time for a translation to english. For now, please use Google Translate and / or questions in the comments. Thank you for your patience!

Funktionalitet:

  • Stor flexibilitet för sizes-attributet
  • Generera scset för bilder som behöver användas utanför WordPress egna bildhantering (thumbnail + wysiwyg-bilder) — endast bildens ID krävs
  • Reducerat antal http-requests för dina bilder—src används inte alls
  • Möjlighet att lazyloada dina srcset-bilder (valbart)
  • Lightbox-funktionalitet
  • Skapa unika bildstorlekar som används av Make it Srcset för att matcha din layouts mediaqueries
  • Autogenerera shortcodes rakt ur mediauppladdaren
  • Settings-sida för att hantera default bildstorlekar, sizes-attributet, polyfill, shortcodes mm.

Genererad markup:

Använd temafilsfunktionen eller shortcodes för att generera följande markup:

<!-- Div eller Figure beroende på om figcaption är satt som parent container -->
<div class="mis_container mis_div">
  <img class="mis_img" alt="Bestäm alt i inlägget eller media-biblioteket"
srcset="
  <!-- Array med bilder du själv bestämt storlekarna på. Antalet urls varierar beroende på hur originalfilens storlek matchar de storlekar du satt upp på settings-sidan. -->
  <a href="http://exempel.se/wp-content/uploads/bild-900.png">http://exempel.se/wp-content/uploads/bild-900.png</a> 900w,
  <a href="http://exempel.se/wp-content/uploads/bild-650.png">http://exempel.se/wp-content/uploads/bild-650.png</a> 650w,
  <a href="http://exempel.se/wp-content/uploads/bild-500.png">http://exempel.se/wp-content/uploads/bild-500.png</a> 500w,
  <a href="http://exempel.se/wp-content/uploads/bild-320.png">http://exempel.se/wp-content/uploads/bild-320.png</a> 320w,
  <a href="http://exempel.se/wp-content/uploads/bild-160.png">http://exempel.se/wp-content/uploads/bild-160.png</a> 160w"

  sizes="
  <!-- Array med sizes som matchar de mediaqueries du själv bestämt på settings-sidan -->
  (min-width: 1041px) 53vw,
  (min-width: 1041px) 64vw,
  (min-width: 900px) 77vw,
  (min-width: 650px) 89vw,
  90vw">
  <noscript class="mis_noscript">
    <img class="mis_img mis_nojs" src="<a href="http://exempel.se/wp-content/uploads/bild-650.png" alt="bestäm alt för bilden i inlägget eller media-biblioteket">
  </noscript>
</div>

Både temafils-funktionen och shortcode har möjligheten att skriva över de default-värden som du sätter i settings. Hela poängen med srcset är ju att aldrig servera för stora bilder. För att utnyttja attributet ska sizes användas ihop med din layouts mediaqueries (unikt för varje ny template-postition).

Visa srcset-bilder med temafils-funktion: makeitSrcset();

makeitSrcset() genererar alltså

  • en bild med srcset– och sizes– attribut — utan src-attribut
  • en noscript-tagg som innehåller fallback bild med src-attribut
  • ett parent-element (en <figure> om figcaption används, annars <div>) som innesluter bild- och noscript-elementen.

makeitSrcset() kräver bara ett argument för att fungera — attachment-ID för bilden som ska visas (Hårdkodat eller genererat dynamiskt).

Användning

makeitSrcset($mis_attachment_id, $mis_srcsetSize_noMq, $mis_srcsetSize_firstMq, $mis_srcsetSize_secondMq, $mis_srcsetSize_thirdMq, $mis_srcsetSize_fourthMq, $mis_parent_css_class, $mis_figcaption, $mis_enablepopup);

Parametrar

$mis_attachment_id
Attachment-ID för den bild som ska visas (integer). Måste anges.

$mis_srcsetSize_noMq
Bildbredd angivet i vw, när bilden ej påverkas av någon mediaquery (integer/null). Om inget värde anges / null sätts, används de värden som satts på settings-sidan.

$mis_srcsetSize_firstMq
Bildbredd angivet i enheten vw, när bilden befinner sig i den första min-width mediaquery (integer/null). Om inget värde anges / null sätts, används de värden som satts på settings-sidan.

$mis_srcsetSize_secondMq
Bildbredd angivet i enheten vw, när bilden befinner sig i den andra min-width mediaquery (integer/null). Om inget värde anges / null sätts, används de värden som satts på settings-sidan.

$mis_srcsetSize_thirdMq
Bildbredd angivet i enheten vw, när bilden befinner sig i den tredje min-width mediaquery (integer/null). Om inget värde anges / null sätts, används de värden som satts på settings-sidan.

$mis_srcsetSize_fourthMq
Bildbredd angivet i enheten vw, när bilden befinner sig i den fjärde min-width mediaquery (integer/null). Om inget värde anges / null sätts, används de värden som satts på settings-sidan.

$mis_parent_css_class
Addera en eller flera egna css-klasser på container-elementet (Sträng/null)

$mis_figcaption
Sätt en figcaption för bilden (Sträng/null)

$mis_enablepopup
Aktivera lightbox-funktionalitet för bilden (Sträng/null)

Exempel

Enkelt användande:

  • Visa den bild som har 1337 som attachment-ID
  • Använd värden från settings-sidan för srcset-/sizes-attribut
if (function_exists( 'makeitSrcset' )) 
{ 
  makeitSrcset('1337'); 
}

Avancerat användande:

  • Visa den bild som har 1337 som attachment-ID
  • Använd värden från settings-sidan för srcset-/sizes-attribut
  • Sätt ett eget sizes-värde än vad som anges på settings-sidan, för fjärde min-width mediaquery: 75vw
  • Sätt två egna klasser på bildens container: .custom-class-1, .another-class-2
  • Sätt en figcaption för bilden. Kitten figcaption naaaaw…
if ( function_exists('makeitSrcset'))
{ 
  makeitSrcset('1337', null, null, null, null, '75vw', 'custom-class-1 another-class-2', 'Kitten figcaption naaaaw…'); 
}

Ersätt the_post_thumbnail();

// Loop start 
if ( function_exists('makeitSrcset') && has_post_thumbnail()) {
  makeitSrcset(get_post_thumbnail_id($post->ID)); 
} elseif (has_post_thumbnail()){ 
  the_post_thumbnail(); 
} 
// Loop end

Använd Advanced Custom Fields tillsammans med Make it Srcset

if(function_exists'‘makeitSrcset') && get_field('your_acf') )
{ 
  makeitSrcset(the_field( 'your_acf')); 
}

Visa srcset-bilder med shortcode i wysiwyg-editor

Argumenten för makeitSrcset-shortcode ser likadana ut som för temafunktionen makeitSrcset(). Den genererar samma markup och kräver också endast ett argument för att fungera: bildens attachment-ID. (Du kan autogenerera shortcodes när du lägger in bilden via wysiwyg-editorn, och slipper då leta bild-ID. Aktivera det under settings ruta 3.2.2).

Användning

Parametrar

image_id
Attachment-ID för den bild som ska visas (integer). Måste anges.

srcsetSize_noMq
Bildbredd angivet i vw, när bilden ej påverkas av någon mediaquery (integer/empty). Om inget värde anges / null sätts, används de värden som satts på settings-sidan.

srcsetSize_firstMq
Bildbredd angivet i enheten vw, när bilden befinner sig i den första min-width mediaquery (integer/empty). Om inget värde anges / null sätts, används de värden som satts på settings-sidan.

srcsetSize_secondMq
Bildbredd angivet i enheten vw, när bilden befinner sig i den andra min-width mediaquery (integer/empty). Om inget värde anges / null sätts, används de värden som satts på settings-sidan.

srcsetSize_thirdMq
Bildbredd angivet i enheten vw, när bilden befinner sig i den tredje min-width mediaquery (integer/empty). Om inget värde anges / null sätts, används de värden som satts på settings-sidan.

srcsetSize_fourthMq
Bildbredd angivet i enheten vw, när bilden befinner sig i den fjärde min-width mediaquery (integer/empty). Om inget värde anges / null sätts, används de värden som satts på settings-sidan.

parent_css_class
Addera en eller flera egna css-klasser på parent-elementet. Om du genererar din shortcode via mediabiblioteket kommer alignment-klassen (left, right, none) att hamna här, redo att stylas. (Sträng/empty)

figcaption
Sätt en figcaption för bilden (Sträng/empty)

Popup
Aktivera lightbox-funktionalitet för bilden (True/Sträng/empty)

Exempel

Enkel användande:

  • Visa den bild som har 1337 som attachment-ID
  • Använd värden från settings-sidan för srcset-/sizes-attribut

Avancerat användande:

  • Visa den bild som har 1337 som attachment-ID
  • Använd värden från settings-sidan för srcset-/sizes-attribut
  • Sätt ett eget sizes-värde än vad som anges på settings-sidan, för fjärde min-width mediaquery: 75vw
  • Sätt två egna klasser på bildens container: .custom-class-1, .another-class-2
  • Sätt en figcaption för bilden. Kitten figcaption naaaaw…

Konfigurera Make it Srcset

Settings-sidan hittas under wp-admin > tillägg > Make it Srcset

1. Screen ranges

Sektionen besvarar frågan: Vilka är de minsta och största skärmbredder som är värt att optimera för, som din webbplats besöks med?

  • 1.1.1 Hur bred är den minsta skärmen som besöker din sida?
  • 1.1.2 Hur breda är bilderna för att visas skarpa i en retina-/hi-res-skärm — när visningsbredden är som i 1.1.1?
  • 1.2 Hur bred är den största skärmen som används för din sida?

Ett råd är att låta 1.1.1 vara större än 160px. Make It Srcset säkerställer i sig självt att det säkert finns verkligt små bilder representerade som tillval.

2.1 Srcset sizes — breakpoints

I (srcset-)sizes-attributet ingår mediaqueries. Make it Srcset utgår från en mobile-first approach. Därför används min-widths för dessa mediaqueries. Make it Srcset skapar fyra mediaqueries och lämnar därmed fyra breakpoints för dig att justera.

För egen del vill jag att srcset-mediaqueries ska sammanfalla med övrig (css-) layout för sidan, så jag för helt enkelt in de layout-breakpoints som min gridlayout redan äger. Om fyra breakpoints är för många mot vad jag använt i min css-grid, använder jag populära fabriks-skärmbredder för dessa breakpoints istället.

2.2 Srcset sizes — image widths

Bestäm hur breda dina bilder ska vara i proportion mot visningsbredd — per mediaquery definierad i 2.1.

Det fält som sticker ut är det första (2.2.0) och gäller alltså de bilder som inte innefattas av någon mediaquery / de bilder som är mobile first / de bilder som är för dina minsta skärmar.

3. Shortcodes

Aktivera shortcodes (3.2.1)

Gör så att Make it Srcset shortcode fungerar.

Generera shortcodes via “Lägg till media”-knappen (3.2.2)

Istället för bild läggs en förpopulerad shortcode in i wysiwyg-editorn när du använder “Lägg till media”-knappen för att lägga in bilder. Attributen är utskrivna för att kunna laddas med innehåll — om du vill. Lämnar du dem tomma används de defaultvärden du redan konfigurerat.

3.2.2 Handlar om att göra arbetet med bilder enklare för redaktören. Observera att du fortfarande behöver kryssa i 3.2.1 för att aktivera shortcodes.

4. Javascript: Picturefill & Lazyload

  • 4.1.1 Aktivera Picturefill för att få stöd hos fler browsers än Chrome.
  • 4.2.1 Aktivera Lazysizes för att lazyloada srcset-bilder.

Dessa script utvecklas av tredjepart. För att ladda in senare versioner av scripten finns fält avsedda för att ersätta befintliga script. Fyll helt enkelt i sökvägen till dina egna uppdaterade scripts (4.1.2 & 4.2.2).

5. Bugfixer

Instruktionerna på setttings-sidan förklarar vad 5 rör sig om. Dock är du kanske mer intresserad av att sätta denna css-fix i dina egna stylesheets än att lägga css inline i ditt head-element? Låt isåfall checkboxen vara, och kopiera följande till din css:

.no-js .mis_container > .mis_img{display: none}

Observera att klassen no-js förväntas vara dynamisk och sitta på html- eller body-taggen.

Css: Vilka klasser genereras som är bra att styla på?

Make it Srcset skickar inte med någon css, men applicerar olika klasser på bilden och dess container för styling. Klassnamnen som läggs på bilden kan du inte påverka. Däremot kan du addera klasser till container-klasserna via argument i shortcode eller temafilsfunktionen. (Se avsnitten Visa srcset-bilder med shortcode i wysiwyg-editor och Visa srcset-bilder med temafils-funktion: makeitSrcset();)

Bild-klasser

/* Alla bilder som Make it Srcset har genererat: */
.mis_img{}

/* Bilderna som ligger i noscript-tagg: */
.mis_img.mis_nojs{}

/* Bilder som har lightbox funktionalitet */
.mis_popup{}

Container-klasser

Trots extra markup har jag valt att innesluta bilderna i en container. Anledningen är att ge möjligheter för styling av en hel figure där relationen mellan figure och figcaption kan utnyttjas. Dessutom möjliggör en container att förebygga “rendering reflows” av browsern, beskrivet här: Responsive images – how to prevent reflow.

En bild som genererats med temafunktionen makeitSrcset() eller

  1. … ligger alltid i en container. (Om bilden har en figcaption är container en figure, annars div).
  2. …får ett noscript-element med fallback-bild — inom samma container.
/* Alla containers, exklusive fallback-container (<noscript>): */ 
.mis_container{}

/* Figure som container: */ 
.mis_figure{} 

/*Div som container:*/
 .mis_div{}

/*Non-javascript-fallback-container (också child till .mis_container): */ 
.mis_noscript{}

Övriga klasser

/* Figcaption-texten: */
.mis_figcaption{}

Bra att veta

  • Alt-taggen sätter filnamnet som fallback, när den alternerande texten inte är satt (via mediaarkivet i wp-admin). Observera att alt-texten blir särskilt viktig för seo, när src-attributet utelämnas i markup genererad av shortcodes eller temafunktion.
  • Uppladdade bildoriginal vara minst så breda som du identifierat den största skärmbredden till på settings-sidan fält 1.2. Observera att sizes är det attribut som minst av allt kan sättas i allmänna värden, eftersom bilder troligen förekommer överallt i din layout och därmed har olika behov. Både shortcodes och temafilsfunktionen makeitSrcset() är gjorda för att föra in undantag i just sizes via argument.
  • Gör dina inställningar på settings-sidan innan du börjar ladda upp bilder för användande. Behövda storlekar genereras som alltid vid uppladdningen, och måtten bestäms ju via settings.
  • Imagify är en bra wp-plugin för att komprimera själva bildfilerna, apropå snabbladdade bilder.

Vad händer med bilder som laddats upp innan Make it Srcset aktiverades?

Grundproblemet: WordPress beskär alltid bildstorlekar ur ett original, när detta laddas upp. När Make it Srcset aktiveras för första gången så kommer tidigare uppladdade bilder att sakna vissa storlekar som behövs för att skapa ett rikt srcset-attribut.

Dessa bilder kommer att få WordPress standardstorlekar (full, large, medium, thumbnail) som fallback-srcset. Hur effektivt srcset kommer att fungera i de här specifika fallen, varierar därför med hur väl nuvarande layout passar mot gamla genererade bildstorlekar. Eftersom dina egna bildstorlekar är satta för att fungera för befintlig webbplats, ska det mkt till för att effekten av srcset ska utebli — även när dessa fallbackbilder används.

First things last: Vad är Srcset? Varför använda Srcset?

Srcset är en metod för att välja rätt bildkälla för responsiva bilder med målet att aldrig läsa in för stora filer. Då responsiv design i övrigt är rätt straight forward, har bildhantering och framförallt att enas kring “best practice” för bildhantering varit en käpphäst. Srcset är nu ett attribut som accepterats i W3C HTML-spec och får därmed ses som en av de lyckade metoder som lyfts till ett mer vanligt sätt att hantera responsiva bilder.

Srcset handlar enbart om att ladda in rätt bildstorlek. Oavsett skärmupplösning och visningsbredd ska bilden vara skarp utan att vara för tung. Srcset handlar inte om layout eller bildformat (Är du intresserad av att också ändra bildformat ska du använda picture istället.).

Du kommer att använda CSS som vanligt för att få bilderna att hamna och falla ut som du vill. Men du kan vara trygg med att den bild som du stylat inte är större än vad besökaren behöver. Lättare sidor är snabbare sidor.

I ett nötskal

  • Du vet en rad saker som inte browsern vet om: Din layout, hur du vill ha bilderna i denna layout och i vilka mediabreakpoints du behöver ändra dem.
  • Browsern vet en rad saker om besökarens browser som inte du vet något om: Browserfönstrets bredd, liggande vs stående på handhållna enheter, skärmupplösning med mera.
  • Tillsammans är du och browsern the perfect match för att välja bildstorlek — det vill säga sätta bildmotivets url. I srcset anges en rad urlar till samma bildmotiv men med olika storlekar (hur många du vill). Du anger också hur breda bilderna ska vara i förhållande till visningsbredd i respektive mediaquery. Srcset använder browserns information för att plocka rätt bildstorlek av dem som du angett.

Exempel: En utfallande bild i mobilen kan ju mkt väl vara layoutad för att ligga i en av två spalter för större skärmar. Kanske behövs inte en stor bild läsas in för desktop överhuvudtaget, utan kanske till och med en mindre storlek än vad som behövs för en handhållen retina-skärm? Det vet varken du eller jag. Srcset to the rescue.

Så långt allmänt om vad srcset är. Lite grundförståelse kommer att göra det enklare att konfigurera attributet sizes.