Lichess content toevoegen

 Lichess content

In navolging van het toevoegen van content uit You Tube kanalen en Chess.com , in een eerder artikel, is het de beurt aan de lichess opties om content in te voegen op een website.

In lichess kan je kiezen uit verschillende parameters wat uw bordset en achtergrond betreft.

• Themes : stelt het bord voor
• pieceSet : stelt de stukkenset voor
• bg          : stelt debackground of achtergrond voor
   

Lichess Overall Parameters voor theme,pieceSet and background

theme: brown, wood, wood2, wood wood4, maple, maple2, horsey, leather, blue, blue2, blue3, canvas, blue-marble, ic, green, marble, green-plastic, olive, grey, metal, newspaper, purple, purple-diag, pink

pieceSet: cburnett, merida, alpha, pirouetti, chessnut, chess7, reillycraig, companion, riohacha, kosal, leipzig, fantasy, spatial, celtic, california, caliente, pixel, maestro, fresca, cardinal, gioco, tatiana, staunty, cooke, monarchy, governor, dubrovny, icpieces, mpchess, kiwen-suwi, horsey, anarcandy, shapes, letter, disguised

bg: light, dark, system

 

Dus deze parameters kan je substitueren in onderstaande Embed code voorbeelden (invoeg code). Weg dus de aftandse  American Style groen/witte velden en basic figuren, opschoon je die in de "Embed" tab op de chess.com/analysis kan tunen , zie afbeelding hieronder.

Bij lichess is dat slightly anders en moet je die manueel in de code aanpassen, dat is minder handig want je moet toch iets meer van de API kennen, en errorprone. Vandaar dat ik de parameter keuze opties (theme,bg,pieceSet) hierboven opname.

Ik publish de code die me het beste resultaat geeft op google Blogger, maar het kan altijd beter . Dus als iemand de representatie nog kan verbeteren , dan hoor ik het graag in een reactie.

1. Lichess puzzle of the day

Om de "puzzle of the day" toe te voegen , voeg je de volgende code in , in de html-weergave. Dat doe je door de pencil in de linker bovenhoek van je blog, te openen.

De embed code

<iframe src="https://lichess.org/training/frame?theme=brown&bg=dark" style="width: 400px; aspect-ratio: 10/11;" allowtransparency="true" frameborder="0"></iframe>

Wat stat er in de embed code ?

• theme : oftewel bord worden bruin/witte velden
• bg : oftewel de achtergrond buiten het bord en/of eventueel notatie gedeelte
• pieceSet=<keuzeoptie ze boven> kan je voor andere stukken opteren.

Hoe weet je nu welke "value" je voor "parameter" moet kiezen ?

Welnu klik of je gebruikersprofiel in lichess en bekijk de bord en stukkeuze opties (=values). Om de naam te kennen van de schaakstukken set hover je over het stuk naar keuze. In dit geval staat mijn pijl boven de stukkenset "leipzig" genaamd (zie onderstaande afbeelding) . De "parameter"  is "pieceSet", de "Value" is hier dus "leipzig"

<iframe src="https://lichess.org/training/frame?theme=brown&bg=dark&pieceSet=chess7" style="width: 400px; aspect-ratio: 10/11;" allowtransparency="true" frameborder="1"></iframe>

 In het code deel hierboven is de pieceSet=chess7

Kopieer bovenstaande Embed Code in je HTML weergave. En dat heeft volgende onderstaande weergave

 

  2. Het invoegen van een ganse studie (in zijn geheel) of één hoofdstuk (1 diagram) 

Druk onderaan op de "Delen/Share" Button

 

Dan krijg je de volgende opties

1.  Studie url om de ganse studie in te voegen
2. Huidig hoofdstuk URL. Selecteer vooraf je game in dat chapter alvorens op delen te drukken !
3. Ingeal je een positie wil tonen, kopieer dan de Fen
   

 Nemen we huidige hoofdstuk URL

https://lichess.org/study/embed/qm7htDtc/mMgSFk7W#0

 En voegen we dit als volgt in, in de HTML weergave

<iframe width="600" height="371" src="https://lichess.org/study/embed/qm7htDtc/mMgSFk7W#0" frameborder=1></iframe>

As per Lichess API documentatie geeft dit , onderstaand resultaat.

  

Persoonlijk vind ik het niet OK, 

1. want via de elipsis (drie verticale dots) in het midden word je naar de ganse studie geforward
2.  het kader oogt niet, er is een blanco zone waar  de zetten zouden moeten staan.  

 Na een aantal aanpassingen merkte ik op dat in vergelijking met de puzzle of the day. Het notatiegedeelte enkel zal verschijnen bij een minimale pixel breedte. Om de juist de fit met het werkblad te hebben heb ik dit aangepast naar 584px (pixel) . De aspect ratio moet ook 10/11 blijven anders heb je kader half zo hoog en krijg je een scrollbar wat niet handig is. Op die manier krijg de controle buttons  <<  <  > >> en het bord alsook de notatie samen in een dynamische 'image insert' zonder daarbij een scrollbar nodig te hebben.

De door mij meest optimale code ziet er dan als volgt uit. Op te merken valt dat de pieceSet die ik opnam helaas geen uitwerking heeft. Als iemand weet waarom hoor ik het graag.

De door mij aangepaste Embed Code :

 <iframe src="https://lichess.org/study/embed/qm7htDtc/mMgSFk7W#0?theme=brown&bg=dark&pieceSet=chess7" style="width: 584px; aspect-ratio: 11/11;" allowtransparency="true" frameborder="5"></iframe>

  

Het resultaat, hieronder