Uppdraget var att tillföra en liten ikon på inläggens ”utvalda bilder”. En baggis kan man tycka, men ikonen skulle inte vara med på alla utvalda bilder och det var inga vanliga inlägg.
Den webbplats Xponent producerat för Dataföreningen använder ”custom post type-inlägg” för deras evenemangshantering. Vi har tidigare beskrivit hur vi skapade detta med WordPress Creation Kit, där alla uppgifter om evenemanget hanteras av redaktörerna med ett formulär i admin. Nu ville Dataföreningen bygga ut formuläret med några knappar och fält till. Syftet var att kunna ange vilka evenemang som visas i videostream för de som inte kan närvara. Förutom det utökade formuläret ville de att en ikon skulle visas på bilden, som i illustrationen nedan.
Den första tanken var att det här blir enkelt. Men eftersom WCK som vi använde för att skapa evenemangshanteringen inte går att använda för programmering var vi tvingade att hitta en lösning annan lösning. Valet föll på att kombinera WCK och CSS.
Kan man programmera med CSS?
Svaret är definitivt nej, men man kan använda det kreativt. När man använder WCK så skapar man s.k. custom post types, dessa visas på webbplatsen via mallar. Mallarnas uppgift är att formatera/designa innehållet med HTML och CSS. Den färdiga mallen i vårt projekt försågs med Font Awesome-ikonen för video-kamera
<i class=”fa fa-video-camera” aria-hidden=”true”></i>
Formuläret i admin försågs med ett fält där redaktören kan välja att slå på ikonen för bilden. Värdet sparas i ett s.k. ”custom field” {{evenemangsfakta-streaming-ikon}}.
<span id="{{evenemangsfakta-streaming-ikon}}">
<i class="fa fa-video-camera" aria-hidden="true">
</i>
</span>
{{{featured_image_utvald-bild}}}</div>
Ovanför visas den del av mallen som visar den utvalda bilden och ikonen. Denna mall används alltid, vilket innebär att ikonen alltid finns på plats i html-koden för alla inlägg och om ikonen skall visas eller ej styrs därför av temats css-fil. I de fall där ikonen ej skall visas styr följande css-kod detta där värdet kommer från {{evenemangsfakta-streaming-ikon}} som är satt med radioknappen i illustrationen ovan.
#visa_ej {display: none;}