Articles Anywhere

Articles Anywhere
Presentatie door Anja de Crom
Presentatie Articles Anywhere - Anja de Crom - 2018

Wat is het
Articles Anywhere is een plugin, ontwikkeld
door Regular Labs

Wat doet het
De naam zegt het al: met Articles Anywhere kun
je overal in je website artikelen laten zien.

Waarom is dat handig
Je kunt een website zo inrichten dat de
contentbeheerder alleen content hoeft aan te passen.
Artikelen dus.

Kan dat niet met de core?
Deels wel, maar:
Articles Anywhere kan meer en geeft je veel
meer flexibiliteit

Hier komen de voorbeelden!

Eén los artikel laten zien in
een custom html module
Voorbeeld 1

Wat je wilt:
Custom html module die alleen op home getoond wordt
Tekst altijd gecentreerd
Link is knop naar menu-item

Drie artikelen
Elke teaser is een eigen artikel
De ID’s van deze artikelen zijn 9, 8 en 7
Teaser “Ontwikkeling” heeft ID 7

Artikel toevoegen aan je module
Articles Anywhere voegt een knop toe aan je editor.
Overal waar je die knop ziet staan, kun je artikelen invoegen.
Dat wil niet zeggen dat het alléén daar kan – maar daarover later meer.

Van dichtbij
Articles Anywhere voegt een knop toe aan je editor.
Overal waar je die knop ziet staan, kun je artikelen invoegen.
Dat wil niet zeggen dat het alléén daar kan – maar daarover later meer.

Popup: artikel & opties kiezen

De module Ontwikkeling
Heb je je artikel ingevoegd, dan zal het er in je module zo uitzien.
(Onder de Articles Anywhere code staat hier een plaatje met een link
naar het menu-item)

Van dichtbij
Syntax staat tussen {accolades}; onderdelen die we willen tonen tussen [blokhaken].
Op basis van het artikel ID wordt hier de tekst opgehaald
Het geheel wordt gecentreerd
Knop is een plaatje dat linkt naar menu-item

Welke onderdelen kun je tonen
Een complete lijst van de items die je kunt tonen staat in de tutorial van Articles
Anywhere.
Een paar voorbeelden:
• [article] het complete artikel
• [title] de titel
• [text], [introtext], [fulltext] complete tekst, introtekst, tekst na introtekst
• [created], [publish_up], [modified] aanmaak-, publicatie-, aanpassingsdatum
• [author-id], [author-name], [author-username] id, naam, gebruikersnaam van
de auteur
• [image-intro] intro afbeelding ingesteld bij het artikel
• [image-fulltext] volledige tekst afbeelding ingesteld bij het artikel

Voorbeeld 2

Twee artikelen
Elk blok is een eigen artikel
De ID’s van deze artikelen zijn 1 en 2
Het artikel waar we naar gaan kijken heeft ID 1

Module Schrijven & redigeren
Van artikel 1 tonen we de intro image en de tekst
Link hebben we handmatig toegevoegd, gaat naar menu-item

Van dichtbij
Van artikel 1 tonen we de intro image en de tekst
Link gaat naar menu-item

En de code
We hebben de link een class meegegeven en daar met css een styling
aan gekoppeld

Voorbeeld 3

Wat je wilt:
Titel tonen, ondertitel (custom field) tonen, tekst tonen
Link is scrollpijl naar volgende item op de pagina

Het artikel
Gewone artikeltekst
En een custom field waarin Mariëlle de ondertitel typt

De module
Aangepaste html module

Van dichtbij
Van artikel 342 tonen we de titel, de ondertitel (ons custom field) en de
tekst.

Huh?
Maar waar is dat pijltje dan?

In de code!
Die pijl staat in de code van de module.
Met css (flexbox) zorgen we dat-ie op de bodem komt

Je kunt zo veel losse artikelen
laten zien als je wilt.

Meerdere losse artikelen in
één module laten zien

De artikelen

De artikelen
Oké, met die afspraak knop zijn we misschien
een beetje te ver doorgeslagen.

Module nr 1, onderaan

Module nr 2, bovenin

Uiteraard is ook de slogan een apart artikel.
En… hier is de afspraak knop 

Ergens anders één artikel
laten zien
In een formulier

In een formulier

In een 3d party extensie

Van dichtbij

Het is een kwestie van
uitproberen waar het wel en
niet werkt.

Verder automatiseren:
meerdere artikelen uit een of
meer categorieën

Hiervoor heb je
Articles Anywhere Pro
nodig

De module

Eén blokje van dichtbij
Artikelen uit de categorieën 13 en 12; één artikel; meest recente eerst.
Getoond wordt de titel en de introtekst.
Daaronder het plaatje dat bij de categorie hoort, de categorienaam, de
intro-afbeelding en de auteursnaam.
Daaronder de leesmeer knop.

En hoe zit het dan in de code?
Daar zijn nog wat extra classes toegevoegd. De bloginfo blogwrapper zorgt
ervoor dat het met css grid gelayout wordt.
De classes cat-img-small en blog-img-small regelen de styling van de plaatjes.

Van dichtbij
In deze module tonen we eerst de tekst van artikel 413.
Daarna artikelen uit categorie 11, drie stuks, in willekeurige volgorde,
verdeeld over drie blokjes.
Eerst de intro-afbeelding, dan de titel en dan de tekst. Gecentreerd.

We kijken naar dit blokje

Van dichtbij
Deze module toont artikelen uit de categorie Portfolio;
met de tag “portfolio-tekst-1”;
één artikel, willekeurig

De hoofdmodule
Deze module toont vier modules
(met de ook al zo handige extensie Modules Anywhere)
Elke module is 3 kolommen breed en bevat twee artikelen

Wat wordt hier getoond
Het nieuwste
artikel uit de
categorie
Blog
Het nieuwste
artikel uit de
categorie
Artikel
Het tweede-
nieuwste
artikel uit de
categorie
Artikel
Het vierde-
nieuwste
artikel uit de
categorie
Blog
Het nieuwste
artikel uit de
categorie
Publicatie
Het tweede-
nieuwste
artikel uit de
categorie
Blog
Het derde-
nieuwste
artikel uit de
categorie
Blog
Het tweede-
nieuwste
artikel uit de
categorie
Publicatie

Laten we eens kijken
naar de module in de
derde kolom
Hier wordt getoond:
Het tweede-nieuwste artikel uit de categorie
Artikel
Het derde-nieuwste artikel uit de categorie Blog
Elk blokje heeft zijn eigen styling.

Het eerste blok van dichtbij
Artikelen uit categorie 16; het tweede artikel; volgorde publicatiedatum.
De div heeft een class gekregen, namelijk artikel-border.
Onderdelen: intro-afbeelding, categorietitel, artikeltitel (gelinkt),
custom field ondertitel.
De tekst is beperkt tot 1 alinea, en er is een leesmeerlink met een class toegevoegd.

En nog wat extra in de code
Naast wat we al gezien hebben, heeft ook de hele overkoepelende div een class
gekregen, namelijk “artikel”
En de categorietitel heeft een class cat-tag-artikel gekregen.
Die classes hebben we met css styling gegeven. Dus ziet een blog er in deze
module anders uit dan een gewoon artikel of een publicatie.

Nog een leuke combi
Met Regular Labs Sliders

Artikelen in categorie

De titel is de vraag, de tekst is het antwoord.

Van dichtbij
Artikelen uit categorie 62. De vraag is de titel, het antwoord de tekst.
Slider dicht: de titel wordt getoond.
Slider open: de artikeltekst wordt getoond.

De contentbeheerder hoeft alleen maar artikelen in de juiste
categorie te zetten.
Geen maximum aantal artikelen, geen gedoe met tags of zelf sliders
vullen: gewoon content beheren.

Vragen?

Wat kost het
Gratis versie (losse artikelen tonen): € 0
Pro versie (meer mogelijkheden): € 39,= per jaar

Meer informatie & tutorial
https://www.regularlabs.com/extensions/articlesanywhere

Presentatie terugzien
https://weblab42.nl/presentaties

Articles Anywhere

Recommended

Recommended

More Related Content

Featured

Featured (20)

Articles Anywhere