Drupal – komfortní vkládání obsahu

V předchozím článku jsme zprovoznili plně funkční osobní weblog, který však v uživatelském komfortu přeci jen trochu zaostával za specializovanými systémy typu WordPress nebo Nucleus. Tentokrát se podíváme, jak pomocí speciálních formátovačů či WYSIWYG editorů zpříjemnit psaní obsahu a dostane se také na podporu snadného vkládání obrázků.

Pohodlnější psaní článků

Text článků lze v principu zadávat třemi způsoby:

1. přímo pomocí XHTML
2. pomocí speciální syntaxe, která je na XHTML převoditelná (Textile, Texy!, Markdown a podobně)
3. pomocí WYSIWYG editoru

Ačkoli je první metoda nejpracnější a nejméně uživatelsky přívětivá, Drupal ji ve své základní instalaci podporuje jako jedinou. Podíváme se proto, jak si jakožto autoři můžete ulehčit život.

Využití speciálních formátovačů

Speciální syntaxe mají několik výhod:

• zápis je kratší než v případě XHTML
• zápis je přehledný, čitelný a přirozený (například se místo <ol> a <li> jednoduše píší čísla)
• formátovač obvykle základním způsobem zajišťuje validitu výsledného kódu
• formátovač pomáhá s typografií

V Drupalu existují pro nejrozšířenější syntaxe odpovídající moduly:

• modul pro Textile
• modul pro Texy!
• modul pro Markdown

Pokud chcete používat nějaký exotický formátovač, pro který neseženete modul, nezoufejte. Pokud se aspoň trochu vyznáte v PHP, podívejte se na zdrojový kód ukázkového formátovacího modulu, podle kterého byste měli snadno zvládnout vytvořit modul vlastní. Jedná se o práci na několik desítek minut.

Používání formátovacích modulů je velmi přímočaré:

1. Modul tradičním způsobem nainstalujte.
2. Vytvořte nový formát vstupu (admin/filters/add), pokud to modul při své instalaci neudělal automaticky.
3. V oblasti Filtry zaškrtněte filtr poskytovaný formátovačem. Jako u všech formátů vstupu, i zde můžete zkombinovat více filtrů dohromady, takže například není problém text nejdříve zformátovat pomocí syntaxe Textile a potom omezit XHTML elementy, které se mohou do výstupu dostat. (Některé formátovače mají tuto funkčnost integrovánu.)
4. Na stránce admin/filters můžete určit, že se má nový formát vstupu používat jako výchozí.

To je v podstatě celé, jen byste měli dát pozor na výkonnostní problémy, které může používání formátovačů přinést. Jak bylo uvedeno v článku Drupal – instalace a základní koncepty, v Drupalu se text do databáze uloží přesně tak, jak ho autor zadal, a všechny filtry se aplikují až na výstupu, když o stránku požádá webový prohlížeč (z tohoto pohledu je trochu zavádějící, že názvosloví používá termín „formáty vstupu„). Převod ze speciální syntaxe do XHTML tak probíhá při každém požadavku na stránku, což může u vytěžovaných serverů znamenat výkonnostní problém. Řešení jsou v podstatě dvě:

1. Zapnout cachování v celém Drupalu (admin/settings, oblast Nastavení cache).
2. Používat cachování na úrovni formátovače. To již vyžaduje trochu programování, ale třeba Texy! ve své distribuci obsahuje srozumitelný příklad, jak cachování zprovoznit.

Milovaná a nenáviděná – WYSIWYG editace

Poslední metodou příjemnějšího vkládání obsahu je WYSIWYG editace (z anglického What You See Is What You Get). Je uživatelsky nejpřívětivější a ocení ji především netechnicky orientovaní uživatelé.

WYSIWYG editory mají svou hlasitou skupinu odpůrců a cílem tohoto článku není vyvolávat nějakou polemiku. Webové WYSIWYG editory mají jak své výhody (výsledný vzhled se zobrazuje okamžitě, odpadá nutnost učit se speciální syntaxi a podobně) tak i nevýhody (editory často obsahují mnoho chyb, problematická je rovněž čistota generovaného XHTML a podobně), přesto se pro mnoho webů jedná o důležitou součást interakce s uživatelem a považuji za užitečné ukázat, jak WYSIWYG podporu do Drupalu přidat.

Z principu není problém používat libovolný WYSIWYG editor a existují i moduly třeba pro FCKeditor nebo HTMLArea, v tomto článku se ale zaměřím na kvalitní a stabilní editor TinyMCE, pro který v Drupalu existuje díky propracovanému modulu lepší podpora než pro konkurenční editory. Podle oficiální tabulky kompatibility by měl TinyMCE bez problémů fungovat v Internet Exploreru od verze 5.0, ve Firefoxu od verze 1.0 a také v Opeře 9.0. Částečná podpora je slibována v prohlížeči Safari.

Postup zprovoznění je následující:

1. Stáhněte si zmíněný modul TinyMCE, rozbalte ho a celý adresář tinymce nahrajte do složky modules své instalace Drupalu.
2. Stáhněte si TinyMCE editor a český lokalizační balíček a oba soubory rozbalte do společného adresáře tinymce. Tento adresář potom nahrajte do adresáře modules/tinymce své instalace Drupalu. Ve výsledku by měl modul ležet na cestě modules/tinymce a editor jako takový na cestě modules/tinymce/tinymce.
3. Protože je TinyMCE cokoli jen ne „tiny“ (drobounký), bude vhodné nainstalovat „TinyMCE compressor“, který veškeré JavaScriptové knihovny komprimuje pomocí GZipu a v důsledku tak sníží objem přenášených dat o výrazných 75 %. To nejvíce potěší koncového uživatele, zvlášť pokud používá pomalejší připojení k internetu. Na hlavní stránce pro stahování si v sekci „TinyMCE compressor“ stáhněte „TinyMCE compressor PHP“ a soubor tiny_mce_gzip.php nahrajte do adresáře modules/tinymce/tinymce/jscripts/tiny_mce. Žádné další úpravy dělat nemusíte, o vše ostatní se modul postará sám.
4. Modul povolte na stránce admin/modules.
5. Na stránce oprávnění (admin/access) povolte modul TinyMCE pro uživatelské role, které mají mít k WYSIWYG editaci přístup. Pokud chcete povolit TinyMCE i pro anonymní návštěvníky, udělte roli anonymous user právo access tinymce.
6. Nakonec musíte vytvořit takzvaný profil, který určuje, na kterých stránkách bude TinyMCE dostupné, jaká tlačítka se zobrazí a pár dalších věcí. Typicky budete chtít vytvořit dva profily – jeden pro autory obsahu, kde bude TinyMCE nastoupen v plné polní, a druhý pro anonymní návštěvníky, jimž budete chtít povolit pouze několik základních formátovacích možností. Postup při vytvoření „autorského profilu“ je následující:
   1. Na stránce admin/settings/tinymce klikněte na „create a new profile“.
   2. Do pole Profile name vyplňte název podle vlastního gusta, nejspíš něco jako „autor“.
   3. V Roles allowed to use this profile zaškrtněte authenticated user.
   4. Default state i Allow users to choose default nastavte na true. Pokud chcete WYSIWYG editaci používat pouze jako alternativu a ne jako hlavní možnost, nastavte Default state na false.
   5. Show disable/enable rich text editor toggle ponechte na true. Jedná se o užitečné přepínátko, které vám kdykoli umožní přesedlat z textového režimu do WYSIWYG a naopak.
   6. Pokud jste do TinyMCE nainstalovali podporu češtiny, jako jazyk vyberte cs.
   7. V rámečku Viditelnost zadejte, na kterých stránkách se má TinyMCE zobrazovat. Pokud je vaším cílem co nejširší používání WYSIWYG editoru, doporučuji zvolit Zobrazit na každé stránce, kromě vypsaných a do textového pole vyplnit admin/*. Tím zabráníte zobrazování TinyMCE na administračních stránkách, kde nemá WYSIWYG editace žádný smysl a naopak může být škodlivá.
   8. Rámeček Buttons and plugins vám umožňuje specifikovat, která tlačítka a vlastnosti TinyMCE se mají zobrazit. Pokud nezaškrtnete nic, zobrazí se poměrně vyhovující výchozí sada tlačítek.
   9. Pokud chcete, aby WYSIWYG editor vypadal co nejpřirozeněji, změňte některé hodnoty v rámečku Editor appearance. Obvyklé je umístění tlačítek nahoře (Toolbar location → top) se zarovnáním doleva (Toolbar alignment → left). Ostatní vlastnosti nechte tak, jak jsou.
   10. V rámečku CSS můžete vybrat, jaké kaskádové styly se budou v rámci editoru používat. Pro koncového uživatele je poměrně důležité, aby měl co nejpřesnější představu o tom, jak bude jeho text ve výsledku vypadat, proto doporučuji ponechat Editor CSS nastaveno na use theme css.

   Postup vytvoření profilu pro návštěvníky toužící zanechat komentář je analogický, pouze v třetím kroku zaškrtněte anonymous user a v osmém kroku vyberte funkce a tlačítka, které chcete v tomto omezeném režimu povolit (typicky asi zobrazíte alespoň tlačítka pro tučné písmo a kurzívu a tlačítko pro vkládání odkazů).

Tím je celý postup dokončen a vy i vaši návštěvníci můžete TinyMCE vesele používat.

Tip: TinyMCE podporuje zajímavou vlastnost, a to kontrolu pravopisu pomocí AJAXu a webových služeb Googlu. Otázka praktické využitelnosti je trochu diskutabilní, ale pokud vás tato možnost zaujala, podrobnosti o jejím zprovoznění najdete v modulu v souboru INSTALL.txt.

TinyMCE v akci (plná velikost, cca 90 kB)

Vkládání obrázků

Drupal ve výchozí distribuci neobsahuje komfortní podporu pro vkládání obrázků do vytvářených článků či zápisků. Existují v zásadě tři způsoby, jak obrázky vkládat:

1. Nahrát je na server „ručně“ (třeba pomocí FTP) a do příspěvku vložit odpovídající XHTML (<img src="xy" alt="z" />). Tato možnost je nejméně komfortní, navíc není vždy zaručeno, že autor bude mít k serveru přímý přístup.
2. Každý redakční systém obvykle obsahuje způsob, jak obrázky na server nahrát pomocí webového rozhraní. Toto rozhraní také obvykle pomáhá s vkládáním odkazu na obrázek do tvořeného článku. V Drupalu tuto funkčnost zajišťuje modul Img_assist.
3. Poslední možností je využít nějakou webovou komunitní službu pro ukládání obrázků, například Flickr, a do článků vkládat odkazy na takto uložené obrázky. Pro Drupal k tomuto účelu existuje modul Flickr image snippet inserter neboli „FlickrStickr“.

Vkládání obrázků pomocí Img_assist

Ani tentokrát není instalace triviální. Postup je následující:

1. Stáhněte si moduly Img_assist a Image, rozbalte je, nahrajte do adresáře modules své instalace Drupalu a na stránce admin/modules je povolte. (Bez modulu Image nemůže Img_assist fungovat.)
2. Navštivte stránku admin/filters, vstupte do konfigurace formátu, který používáte, a v oblasti Filtry zaškrtněte Inline images. Není to zcela nezbytný krok, ale raději ho proveďte – modul Img_assist pak může do textu vkládat stručnější kód obrázku místo plného XHTML.
   Poznámka: Pokud se ve čtvrtém kroku rozhodnete pro instalaci podpory vkládání obrázků v editoru TinyMCE, věnujte pozornost několika praktickým radám na konci této podkapitoly. Pomohou vám vyhnout se některým nástrahám, které vás v této konstelaci mohou zaskočit.
3. Pokud obsah vkládá víc různých uživatelů, na stránce admin/access udělte právo access img_assist roli authenticated user (pokud obsah vkládáte sami pod superuživatelským účtem, není tento krok nutný). Dejte pozor, abyste stejná práva neudělili také anonymním uživatelům – v drtivé většině případů nebudete chtít, aby anonymní návštěvníci mohli vkládat obrázky.
4. Pokud používáte TinyMCE, zde je postup, jak do něj přidat podporu pro obrázky:
   1. V adresáři modules/img_assist najdete složku drupalimage. Přesuňte ji do adresáře modules/tinymce/tinymce/jscripts/tiny_mce/plugins.
   2. Na konec souboru modules/tinymce/plugin_reg.php před řádek obsahující return $plugins; vložte následující:

      $plugins[‚drupalimage‘] = array();
      $plugins[‚drupalimage‘][‚theme_advanced_buttons1‘] = array(‚drupalimage‘);
      $plugins[‚drupalimage‘][‚extended_valid_elements‘] =
      array(‚img[class|src|border=0|alt|title|width|height|align|name]‘);

   3. Nakonec navštivte stránku admin/settings/tinymce, vstupte do konfigurace profilu a v oblasti Buttons and plugins zaškrtněte DrupalImage.

   Poznámka: TinyMCE nabízí vlastního správce obrázků, který by bylo možno použít místo zde uvedeného postupu. Za o něco větší komfort byste však museli zaplatit, protože MCImageManager není zadarmo.

5. Na závěr navštivte stránku admin/settings/img_assist a věnujte pozornost následujícím nastavením:
   • Ve výchozím stavu se pod každým textovým polem (textarea) zobrazuje tlačítko pro vložení obrázku, pokud však budete používat TinyMCE, je toto tlačítko zbytečné (tlačítko pro vložení obrázku jsme v minulém kroku přidali přímo do panelu nástrojů TinyMCE). Textarea Image link tak můžete s klidným svědomím nastavit na Do not show a link.
   • Aby vám příliš velký obrázek nerozhodil layout stránky, upravte adekvátním způsobem pole Max inline image size allowed.
   • Pokud používáte TinyMCE, nastavte Default insert mode na HTML Code. Pokud WYSIWYG nepoužívate, nastavte toto pole na Filter Tag.

Na závěr ještě slíbená poznámka ke společnému provozování obrázků a editoru TinyMCE. Aby byl vkládaný obrázek ve WYSIWYG editoru vidět, musí se vložit jako HTML Code a nikoli Filter Tag, což jsme nastavili před chvílí. Pokud však používáte výchozí formát Filtered HTML a zobrazíte si náhled vkládaného příspěvku, žádný obrázek neuvidíte. Je to proto, že HTML filtr ve výchozím stavu nepropustí element img. Řešení jsou dvě – buďto navštivte konfiguraci formátu vstupu a nastavte ho tak, aby element img propouštěl (ve skutečnosti budete muset povolit ještě element span, který Img_assist automaticky přidává), nebo jako formát vstupu používejte Full HTML, který žádné problémy nedělá.

Tip: Modul Image vkládá obrázky ne jako soubory, ale jako samostatné nody. Pokud tedy používáte modul pathauto, v jeho nastevních (admin/settings/pathauto) silně doporučuji nastavit Pattern for all image paths na nějakou neprázdnou hodnotu, například obrazek/[title]. Vyhnete se tak tomu, aby vám vznikaly stránky typu http://example.com/manzelka-v-plavkach na nejvyšší úrovni hierarchie webu.

Spolupráce modulu Img_assist a editoru TinyMCE (plná velikost, cca 60 kB)

Vkládání obrázků pomocí modulu FlickrStickr

Zajímavou možností je ukládání obrázků do Flickru a jejich následné odkazování z vkládaného obsahu. Tuto funkčnost zajišťuje modul FlickrStickr, jehož používání je opravdu jednoduché. Instalace nevyžaduje žádné zvláštní kroky a použití modulu nejlépe uvidíte ve videocastu FlickrStickr Module Review, který shodou okolností pochází od autora modulu Img_assist. Tento videocast je tak dobrý, že by nějaký podrobnější popis modulu FlickrStickr byl pouhým plýtváním místa. Hlavním cílem této podkapitolky tak bylo především vás na tento zajímavý modul upozornit.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.