Drupal 8 development: non-content | Deel 3/3: afbeeldingen beheren middels ‘managed files’

04 May 2017

Joris Snoek - Business Dev
+31 (0)20 - 261 14 99

In voorgaande delen van deze blog-serie beschreef ik wat in onze ogen non-content is en hoe we dat gebruikersvriendelijk beheerbaar maken voor content managers.

Delen in deze blog serie:

  1. Bouw van het Drupal 8 backend configuratie formulier en definiëren van een Twig template file.
  2. Implementatie van een Drupal 8 Block, waarin ingevoerde teksten uit het configuratie formulier opgehaald worden; ge-rendered in een custom Twig template file.
  3. Het beheerbaar maken van de achtergrond afbeelding, via het backend configuratie formulier.

In dit deel 3:

In deel 1 en 2 heb ik uitgelegd hoe je de teksten in onderstaand block beheerbaar kunt maken voor content managers (1 t/m 4). In dit laatste deel 3 laat ik zien hoe je de achtergrond afbeelding beheerbaar kunt maken (5):

Die hard development

Hier gaan we meer diepte in dan vorige blogs, omdat de benodigde code niet door Drupal Console gegenereerd kan worden voor zover wij konden zien. So: fasten your seat belt! :)

1. Toevoegen van ‘managed file’ field in backend formulier

  1. Ik voeg een nieuw form item toe van het type managed_file. Deze wordt omschreven als: ‘Provides an AJAX/progress aware widget for uploading and saving a file’ op de Drupal Form API pagina Form and render elements.
  2. Binnen dit form element moet ik aangeven wat de ‘destination’ is. Gezien dit te configureren is in het backend van Drupal, zul je die configuratie moeten ophalen (2) -en toepassen (3). In die configuratie staat opgeslagen: waar alle files terecht moeten komen en of je een public of private file system wilt. De file settings zijn te vinden onder /admin/config/media/file-system in je Drupal 8 installatie.

Als ik nu mijn Drupal caches leeg dan zul je zien dat het managed image field verschijnt in het backend formulier:

2. Het opslaan van de afbeelding

So far so good, maar als je nu een afbeelding upload en het formulier saved dan zul je zien dat hij niet opgeslagen wordt: hij is weer verdwenen nadat de pagina herladen is. En dat is niet raar: hij wordt nog niet als permanent gekenmerkt én hij wordt nog nergens opgeslagen in de database.

Dit realiseren we met behulp van volgende code in de functie submitForm:

1. file uitlezen en permanent maken

Hier wordt de geüploade file (de afbeelding) uit het formulier ingelezen. Binnen Drupal wordt een file upload via het AJAX formulier eerst als temporary gekenmerkt. Zodra je het formulier opslaat en de file valideert, dan pas wordt ie permanent gekenmerkt. Die validatie en als permanent kenmerkten, dat moet je zelf programmeren.

Als je er niet voor zorgt dat de file permanent wordt gemaakt, dan zal hij met eerstvolgende cron run door Drupal worden verwijderd. Je wilt namelijk de files die geüpload zijn pas definitief maken zodra je het formulier daadwerkelijk opslaat, niet direct al als je hem via het AJAX formulier upload.

2. Opslaan in de database

Middels deze toevoeging aan de query zal de file daadwerkelijk opgeslagen worden in de database.

3. Het ophalen van de afbeelding

Ik voeg volgende code toe in de eerder ontwikkelde FrontpageHeader.php:

  1. Haal de file id op uit het opgeslagen configuratie formulier.
  2. Laad de file en produceer benodigde image link.
  3. Geef de link naar de afbeelding door middels een Twig template variable.

4. Plaatsen van de afbeelding in de HTML

In de reeds ontwikkeld HTML stond de afbeelding opgenomen in een CSS file, om het onszelf makkelijk te maken plaatsen we deze als background-image, zodat hij eenvoudig dynamisch te maken is in de template file, zie (1):

Ter optimalisatie kan je er nog een image style functie tussen zetten, zodat de afbeelding automatisch optimaal op maat gesneden wordt. Maar dat is stof voor wellicht een toekomstig blog :)

En zo is het Drupal 8 configuratie formulier voor content managers compleet:

Wrap up

Alrighty, that’s it voor dit deel 3 én deze blog serie. Ik lichte toe hoe we een backend configuratie formulier maakte met Drupal Console, hoe we een custom block ontwikkelde om die configuratie in het frontend te renderen en hoe we omgaan met managed files in deze context. Vragen? Let me know!

Credits header image

Comments

Nóg meer
kennis nodig?

Check ons ons blog archief >