Návod jak nakonfigurovat moduly Colorbox a Insert pro Drupal 8

Rozchodit vkládání obrázků do těla článku pomocí modulu Insert, a zobrazit je pomocí modulu Colorbox, je v Drupalu 8 docela oříšek. Následující návod by mohl pomoci trochu ulehčit situaci a ukázat, jak vše správně nastavit.

Když jsem zkoušel nastavit vkládání obrázků do těla článků podobným stylem, jak jsem byl zvyklý v Drupalu 7, tak jsem zjistil, že to není úplně jednoduché. V krátkosti to obnáší nainstalovat modul colorbox spolu se samotnou jquery.colorbox.js knihovnou. Tento modul je jenom image field formatter  - pro samotné načtení potřebného Javascriptu na stránce je ještě třeba modul colorbox_inline. Dále pak modul insert, a jeho sub-modul insert_colobox.

Vše to vychází z principu funkčních menších celků oproti jednomu velkému molochu. Takto lze snáz nakonfigurovat si přesně jen tu součásti, které jsou potřeba. Takže jdeme na to.

 

Colorbox

https://www.drupal.org/project/colorbox

Tady není co řešit, obvyklou cestou si nainstalujeme modul (aktuálně verze 8.x-1.4). Na stránce modulu je srozumitelně popsáno, že je třeba ještě stáhnout si samotnou knihovnu https://github.com/jackmoore/colorbox/archive/1.x.zip a nahrát ji na cestu "libraries/colorbox/jquery.colorbox-min.js". Na stránce Reports >> Status report najdeme potvrzení, že Colobox library je nainstalována.

admin/config/media/colorbox - jednoduché nastavení, asi není třeba nic měnit

nastavení Colobox

Colorbox Inline

https://www.drupal.org/project/colorbox_inline

Tenhle modul (verze 8.x-1.1) sleduje kód generované stránky, a pokud tam najde zmínku o Colorboxu (atribut data-colorbox-inline), tak načte potřebný Javascriptový kód. Není třeba nic nastavovat.

Obdobně funguje i modul colorbox_load a colorbox_simple_load.

Insert (+ sub-modul Insert Colorbox)

https://www.drupal.org/project/insert

Insert modul umožňuje vkládat soubory, obrázky, média … do těla stránky, tedy do CKEditoru. Jeho možnosti jsou docela široké. 

To ale platí až pro „dvojkovou“ verzi modulu, aktuálně tedy 8.x-2.0-beta1. Jeho součástí jsou totiž moduly insert_colorbox, insert_media a insert_responsive_image (poslední dva v experimentálním stavu).

potřebné moduly

Konfigurace #1 - modul

Možností, jak tohle všechno poskládat dohromady, je samozřejmě více. Následující nastavení vyhovuje mě, ostatním může posloužit jako inspirace.

Začneme na stránce konfigurace Insertu admin/config/content/insert

nastavení Insert

Tady je třeba vybrat si Text formáty, pro které bude Insert povolený. To je nutné, pokud máte pro dané textové formáty povolený filtr „Limit allowed HTML tags and correct faulty HTML“. Jak je tučně zvýrazněno, je třeba takový text formát následně přeuložit, aby se potřebný kód povolil.

nastavení Insert - Colobox

Na spodku stránky je pak část věnovaná Insert Colorbox. Doporučuji nastavit Image style na nějaký styl - např. „full hd“, který originální - potenciálně rozměrově velký (např. z mobilu, foťáku …) - zmenší na rozumnou velikost. Nechceme přeci uživatelům vnucovat nějaký obrázek o rozměrech 4000x3000 a velikosti souboru 8MB.

 

Konfigurace #2 - políčko

Náš content typ musím mít nějaké políčko typu obrázek. Pro něj pak můžeme v záložce „Manage form display“ konfigurovat Image widget:

Image widget

Zde si vybereme, jaké image styly chceme mít k dispozici. 

Image widget konfigurace

Moje představa je mít možnost vložit 

  • obyčejný obrázek - tedy bez Coloboxu i bez odkazu na původní soubor. K tomu je třeba nastavit „Link image to“ na hodnotu „do not link“. A taky aplikovat patch (plus clear cache) https://www.drupal.org/project/insert/issues/3079702, který právě tohle opravuje. Jinak by se tam vždy vložit i link na soubor.
  • Colorbox verzi - po kliknutí se zobrazí obrázek s image stylem definovaným globálně na stránce konfigurace Insertu (viz. předchozí text).

A to by mělo být vše, můžeme si vyzkoušet vložit obrázky k nodu.

Výsledek

Závěrem

Pomocí pár jednoduchých kroků se dá nakonfigurovat hezké zobrazování obrázků na našich stránkách. Nakonec to snad není tak složité dosáhnout požadovaného výsledku podle našich potřeb. Zajímavé by bylo rozšířit Insert pro nějaké další galerie. Třeba příště.