VPRO frontend

2 sessies

  • Creative Coding
  • Dustin
  • VPRO Theming & configuratie
  • Magnolia: Area Of Interest

17 september

  • Player (embed, NPO, playlist,
    geo, mediamap, scenario + editor)
  • ODIService
  • Andere vpro NPM modules

24 september

Overdracht

cc sites

nb. maak gebruik van de vpro navigatie module

cc sites

nb. maak gebruik van de vpro navigatie module

https://rs.vpro.nl/v3/docs/api/#/

 

cc sites

  • voor ophalen van sheet+tabjes data
  • voor opslaan van form data

dustin

AR stofzuiger

vpro theming & config

uitleg in de wiki

vpro theming

Een 'theme' in Magnolia bestaat uit de verwijzing naar CSS (die intern weer een ./img/ map laadt) en de theme.yaml met daarin image variaties en (kleuren)lijstjes in de editor

vpro theming

Een 'theme' in Magnolia bestaat uit de verwijzing naar CSS (die intern weer eigen ../img/* laadt) en de theme.yaml met daarin image variaties en (kleuren)lijstjes in de editor

vpro theming

Een 'theme' in Magnolia bestaat uit de verwijzing naar CSS (die intern weer eigen ../img/* laadt) en de theme.yaml met daarin image variaties en (kleuren)lijstjes in de editor

vpro theming

Elke theme anders dan VPRO.nl laadt de config.scss van VPRO in, maar overschrijft variabelen met z'n eigen config

vpro theme configuratie

Los daarvan zijn er JCR properties op de root van een site om functionaliteit in FTL te configureren, want dat kan niet altijd vanuit CSS

vpro theme configuratie

Los daarvan zijn er JCR properties op de root van een site om functionaliteit in FTL te configureren

vpro theming - kleuren

Los van de Magnolia 'themes', is er de CSS configuratie voor het toepassen van de juiste tekst/icoon/link contrast kleuren op een background color.

Lichtelijk uitgelegd op de vpro bootstrap testpagina

vpro theming - kleuren

Lichtelijk, want inmiddels uitgebreid inmiddels met sub sub componenten (wil je dit?)

vpro theming - kleuren

vpro configuratie - templates

Om componenten en templates wel/niet beschikbaar te maken in kloons, gebruik de STK site definities

Area of interest

Uitgelegd in het redactie handboek

Area of interest

Area of interest

Nog niet geïmplementeerd in de header

Daarvoor moet backend toestaan dat wij bepalen wat de fallback/default focuspoint is ipv altijd center center

Eigen vragen?

Voorbeeld:

  • GTM en GA