Drupal video: TinyMCE, IMCE, Lightbox. Obrázky v Drupalu podruhé

Další video pro redakční systém Drupal je na světě. V tomto pokračování se opět vrátíme ke snad nikdy nevyčerpatelnému tématu Drupal a obrázky. Podíváme se na vkládání obrázků do textu pomocí editoru TinyMCE, správce obrázků IMCE a na propojení obrázků do Lightboxového náhledu. V rychlosti koukneme i na Plugin Manager.

V prvním videu, kterým jsem odstartoval sérii věnovanou systému Drupal, jsem vám ukázal, jak lze do textu efektivně vkládat obrázky nahrané jako přílohu článku. V kombinaci modulů File Upload Path, ImageCache, Inline a Lightbox jsme vytvořili automaticky zmenšované obrázky a jejich propojení do Lightboxové galerie s minimem námahy. Video najdete v článku Video: obrázky v Drupalu pomocí modulů Inline, Imagecache a Lightbox2.

Ne vždy lze takové řešení použít, někteří z vás dávají přednost vkládání obrázku přímo do textu, místo pomocí značky inline. Ve fóru jste několikrát prosili o podrobnější návod k modulům TinyMCE a IMCE, resp. k jejich propojení. Zdá se tedy, že tento vizuální editor a správce obrázků znáte, jen vás trápí jejich nastavení. Ve videu najdete vše potřebné, věnovat se budu i způsobu, jakým lze ručně vložený obrázek zmenšit a navázat jej na Lightbox, kde se zobrazí původní velikost.

Nedávno jsem zmiňoval modul Plugin Manager, který nabízí poloautomatickou instalaci modulů pro Drupal. Na začátku videa se v rychlosti podíváme, jak tento modul funguje v praxi.

Moduly a editory zmíněné ve videu

Pro Drupal existují dva moduly, které implementují vizuální editor TinyMCE. Protože stejnojmenný modul bude v brzké době nahrazen univerzálním WYSIWYG API, budu se věnovat jemu. Nabízí trošku pohodlnější nastavení, ukážu vám, jak jej propojit s TinyMCE editorem. Pokud však používáte přímo modul TinyMCE nebo dáváte přednost FCKeditoru, bude pro vás video také užitečné. (Doufám.)

Nastavení TinyMCE a IMCE

Ještě předtím, než si přehrajete video, budete možná potřebovat drobnou úpravu, která zajistí bezproblémové propojení editoru TinyMCE a správce obrázků IMCE. V této kombinaci se totiž občas stane (stejně jako u FCKeditoru), že po zobrazení dialogu pro vkládání obrázků, chybí tlačítko Procházet, kterým byste nastartovali IMCE. Řešení je několik, vybral jsem dvě funkční:

Pokud stále používáte modul TinyMCE, pak navštivte adresu drupal.org/node/241753, kde v bodu #2 najdete kód pro vložení do souboru template.php ve vašem tématu. Nezapomeňte odstranit značky <?php ?>, pokud už soubor existuje. Poté vyčistěte kešovaná data (v Drupalu 6 Administrace, Nastavení webu, Výkon, Vyčistit cache), ujistěte se, že máte správně nastaveno Oprávnění k použití IMCE, vyčistěte keš prohlížeče a zkuste TinyMCE pustit. Při vkládání obrázku už by procházecí tlačítko mělo být zobrazeno.

Druhé řešení je určeno pro kombinace IMCE a WYSIWYG API. Nejprve si stáhněte aktuální verzi IMCE, na kterou aplikujte patch #38 odtud drupal.org/node/287025#comment-1142770. Poté si v nastavení WYSIWYG API zapněte tlačítka Advanced Image a IMCE, podrobněji viz video. Poslední úpravou, která umožní provázanost na Lightbox, je úprava souboru \modules\wysiwyg\editors\tinymce.inc, viz kód v bodu #2 zde drupal.org/node/348317.

Předchozí body samozřejmě můžete vynechat, pokud máte pocit, že vám TinyMCE i IMCE funguje zcela v pořádku a chcete jen vědět, jak s nimi správně pracovat. Nyní byste tedy měli být připraveni k práci s obrázky, kterou vám ukážu na následujícím videu.

Video bylo odstraněno

Jako obvykle platí, že v případě jakýchkoli dotazů k tématu můžete psát přímo do komentářů pod článkem, další dotazy k Drupalu pište do fóra. Uvítám také zpětnou vazbu na toto video a náměty na další.

Doplněno: Článek vznikal v době, kdy ještě nebyl modul IMCE Wysiwyg API Bridge (https://www.drupal.org/project/imce_wysiwyg). Díky němu se již obejdete bez patchování. Navíc pro aktuální verzi modulu IMCE musíte použít jinou verzi patche, než na který článek odkazuje. Holt, vývoj je hodně rychlý, co platilo včera, už je dnes jinak.

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

Dobrý den,
na tohle video jsem hodně čekal (viz info ve fóru) a pomohlo mi na 100% vyřešit můj problém s obrázky v původní velikosti. Po shlédnutí videa hodně přemýšlím o nasazení Lightbox2 (zobrazení vypadá daleko lépe než jen zobrazení v původní velikosti).
Děkuji

návštěvník

Dobrý den,
rozhodl jsem se předělat "část webu"(zatím jen zkušebně na lokálu tak jak je ve videu...tedy wysiwyg..atd.)
Píšete, že je třeba aplikovat patch. Já ale bohužel nevím jak na to. Mohl byste mi naťuknout jak na aplikování patche?(na lokálu windows a vertrigoserv).
Děkuji
Michal

návštěvník

Nastavenie webu podľa týchto videonávodov je pre mňa asi zakliate - viď diskusia k prvému videu a problémy s ImageCache.
Skúsil som si nastaviť moduly podľa tohoto článku - presne podľa postupu, len patch som aplikoval ručne - ručne som nahradil časti zdrojového kódu v patchovaných súborch.
Všetko vyzerá OK, grafický editor vrátane nahrania a resize obrázku OK, v editačnom režime sa všetko tvári tak ako by to malo byť. Akurát keď dám obraziť článok, fotografiu tam nevidím. Po dôladnejšom skúmaní zdrojového kódu vidím, že systém nevložil do textu článku html tag img, keď mám fotografiu s odkazom, tak odkaz tam vidím, ale img nie.
Čím to môže byť? Mohol som urobiť chybu v ručnom patchovaní?

Profile picture for user Jan Polzer

Čili po zavření dialogu na vkládání obrázku se nevloží značka IMG? V tom případě asi bude chybě někde u patchování.

návštěvník

Ďakujem za tip, musím skontrolovať patch. Medzitým som dospel do ďalšieho štádia bádania. Skontroloval som logy, našiel som tam chybovú hlášku typu "Page not found", nenašlo súbor sites/all/modules/wysiwyg/tinymce/jscripts/tiny_mce/plugins/imce/editor_plugin.js
Pozrel som si cez ftp subory, zložka imce sa tam vôbec nenachádza, nenachádza sa ani v inštalačnom súbore TinyMCe, takže nie je to chyba pri kopírovaní/inštalácii TinyMCE.
Táto hláška sa objaví napr. vtedy, keď si zobrazím článok (ktorý nezobrazí vložený obrázok) a prekliknem na záložku Upraviť, t.j. v momente prechodu do editačného režimu článku, v ktorom sa vložený obrázok zobrazí.

návštěvník

dobrý den, mohl by jste sem dat nejaky navodik jak ten patch nahrat vubec netusim jak na to......
dekuji

návštěvník

Dobrý den,
postupoval jsem podle článku o patchování (i podle nápovědy z mailu), ale stále se mi nedaří aplikování patche provést. Zkoušel nškdo ten patch aplikovat a povedlo se mu to?

Profile picture for user Jan Polzer

Co Vám to píše za chybu? Aplikujete patch na verzi modulu, pro kterou je ptach určen?

návštěvník

dobrý den, tak uz mam tiny zprovoznene ale nejde mi ukazat imce v tlacitkach abych ho povolila v tiny......aplikovala jsem patch a hodila mi to tuto hlasku

patching file imce.module
patch: **** malformed patch at line 29: $dirname !=3D '' && =

doufam ze to proslo v poradku...ale stejne imce jenom vidim ale ne v tiny tudiz mi vlastne ani nelze vlozit obrazek....
patch jsem aplikovala pro verzi 1.1 tudis spravne a pote jsem zkusila nainstalovat verzi 1.2 a take nic predem dekuji za odpoved
jana šírková

Profile picture for user Jan Polzer

Patch by měl fungovat s verzí IMCE 1.1 v pohodě. Kdyžtak, tady je odaz na opatchovaný IMCE 6.x-1.1. Není to aktuální verze, jede však bez problémů.

Ještě je k dispozici patch na aktuální verzi, jeho funkčnost jsem zatím nezkoušel. Viz http://drupal.org/node/380944.

návštěvník

dobry den, taak to maka na jednicku dekuji vam....
mela bych jeste otazku vite o nejakem modulu na fotogalerii?
takovou kteram ma takove ty thumbnails a jeden po druhem si muzu vybirat obrazky? zatim sem zkusila album photos a brilliant gallery ale ani jedny nefunguji spravne na te sestce.....
dekuji

návštěvník

no nevim galerie sem si pomoci tohohle modulu vytvorila jen nevim jak tam nahrat do nich obrazky protoze image import funguje krasne ale nabizi mi jen acidfree alba vubec mi to nenapidne galerie vytvorene pomoci image ........

návštěvník

dobrý den, galerie jede pres modul image neslo ji videt protoze sem si to cele rozhodila acidfree albem ktere je nastavene defaulte a image galleries tutiz prebije....deuji

návštěvník

Dobrý den,
pošlu screeny mailem.

návštěvník

Pokouším se využít uploadu integrovaného u nové verze nicEditoru.Povedlo se mi přinutit nicEdit uploadovat obrazky na vlasni server(default uploaduje na imageshack) ale pri vkladani a editaci vidim obrazek v tele,pri preview ani pri nahledu ne... Nevite co s tim??

návštěvník

Tak se omlouvam,prave sem to vyresil.

Profile picture for user Jan Polzer

To jsem rád :) nicEdit neznám, nepoužívám. Ale kdybyste našel chvilku a ještě napsal, kde byl problém, třeba to ocení ostatní. Díky.

návštěvník

Jistě. NicEdit používá noc pěkný přímý upload obrázku. Omezuje ho prakticky na 2 kliky. Problém který sem popsal níže byl ve filtru html tagu. stačilo povolit img tag a vše funguje jak má.

návštěvník

Dobrý den, pane Polzere stáhla jsem si veškeré moduly co jste zde uváděl. Nechci však používat TinyMCE, měla jsem s ním problémy (entity místo čes. znaků, buttony se nezalomily a vedly někam mimo monitor, vložit-upravit obrázek: se mi u formuláře pro vložení foto objevily podivné znaky a {} tyto závorky. Taky jsem tu četla viz. výše, že raději použít Wisiwig API. Dobře stáhla jsem si tento modul a ejhle. V nastavení wisiwig nemám na výběr žádný editor. Jak to tedy mám zařídit? Proč wisiwig nepoužívá sám sebe? IMCE Wysiwyg API Bridge a přesto nemám. Je tedy wisiwig API editor? Jak se v sobé má nastavit jako editor? Já tomu nerozumím, prosím Vás můžete mi pomoc?
Mám tyto moduly:
WYSIWYG API
IMCE
Lightbox 2
Děkuji. l.lenek

Profile picture for user Jan Polzer

WYSIWYG API je rozhraní, které podporuje různé editory. Ty mu musíte nakopírovat do jeho složky a on vám nabídne jejich zapnutí.

Mimochodem. Ty {} znamenají, že jste u TinyMCE neměla nakopírovaný český překlad. Takže jej buď doplňte nebo používejte angličtinu.

Zalomení tlačítek - bohužel častý problém, funguje to v pohodě ve Firefoxu.

Entity - to lze upravit v nastavení nebo konfiguračním souboru, podobně je to nutné u FCKeditoru.

návštěvník

Dobrý den, pane Polzere, děkuji Vám za odpověď. Češtinu jsem si už nakopírovala a je to v pořádku. Bohužel se trápím s těmi entitami. Nevím, kde mám nastavovat, co nastavovat jsem tady na webu našla (aspoň doufám), ale taky se tam nepíše kde to nastavit.
entities : "160,nbsp",
entity_encoding : "named"
je to lepší než entity_encoding : "raw",
protože to to vyplňuje prázdný tagy tvrdou mezerou.

Budu hledat na webu dál. Pokud byste to někdo věděl budu moc vděčná, když někdo k tomu "A" dopíšete "B". Děkuji. l.lenek

návštěvník

Pane Polzere, prosím Vás moc o pomoc s těmi entitami. Prohledala jsem web, ptala se v Drupalu.cz (anglicky neumím, tak jsem odkázaná na češtinu) a dopadlo to tak že mi bylo sděleno, že TinyMCE dělaj začátečníci a že mi s tím zřejmě nikdo nepomůže. A vy s tímto programem děláte. Prosím Vás Do čeho a kde to najdu mám vložit entity_encoding : "raw", když mám Tiny nahraný do wisiwing Api a přes nastavení v adminu do Tiny nemůžu. Jak se jmenuje ten soubor a v jaké složce ho pls najdu? Prosím V8s pokorně o pomoc. Děkuji l.lenek

Profile picture for user Jan Polzer

:) Klasika. Neumím-li někomu poradit, svedu to na neschopnost vývojářů...

Najděte soubor sites/all/modules/wysiwyg/editors/tinymce.inc a vyhledejte v něm funkci wysiwyg_tinymce_settings. V ní pak do $init = array doplňte toto:

'entity_encoding' => 'raw',

Vyčistěte cache v prohlížeči a zkuste.

návštěvník

TO JE ONO!!! PANE POLZERE, VY JSTE PROSTĚ MACHR. DĚKUJI, DĚKUJI. Co jsem se s tím natrápila, progooglovala a nic. Dobrou noc. l.lenek

návštěvník

V drupalu se mi ikony ve fckeditoru zobrazuji pouze v jednom radku.Muzete poradit cimto?

Profile picture for user Jan Polzer

Bohužel, jsou na to desítky léků a žádný stoprocentní. Já používám nejjednodušší možnost - Firefox, kde je vše OK.

návštěvník

Dobrý den,
zkoušel jsem IE7 a Firefox a je to skutečně tak jak píšete. Ve Firefoxu jsou skutečně ikonky(buttonky) pěkně pod sebou. V IE7 v jedné dlouhé řadě vedoucí až někam "mimo monitor" jak tady už také bylo psáno. Nevíte o nějakém léku, který by měl úspěšnost nějblíže 100%? Mám problém stím, aby kolegové vůbec tvořili obsah intranetu(samozřejmě na drupalu) a ještě jim "nadělit" druhý prohlížeč, aby měli ikonky rozumně pod sebou... no to asi skončím jako jediný tvůrce obsahu ( a to nestíhám protože bojuji s patchováním a dalšími vychytávkami a nastavováními drupalu).
Díky předem za info

návštěvník

Dobry den,
tak presne toto som hľadal :-), potreboval som do článkov vkladať obrázky a prezerať ich pomocou lightboxu. Som sa s tým trápil pár večerov. Po pozretí Vášho videa som to spravil za pár minút :-)
ďakujem

návštěvník

Pane Polzer předem chci poděkovat za Vaši práci a instruktážní videa které uvádíte. Jsou to skvělé návody. Mám však jeden problém a prosím o radu. Zatím používám Drupal ve verzi 5.7. Vyskytl se mi problém, že jakmile zapnu modul Lightbox tak se mi bohužel zablokují další nastavení. Například když si v administraci modulů dám dle modulů a tam třeba zmíněný Lightbox tak až po položku "Video count text:" je vše v pořádku. Další položka "Image resize settings" je rozbalovací menu, ale to mi nejde rozbalit a ani nikde jinde v modulech, které používají rozbalovací menu. pokud vypnu modul Lightbox tak rozbalovací menu začnou fungovat. Je to asi prkotina, ale mě se nedaří najít co mám kde špatně nastaveno, že se to takto chová. Moc děkuji za radu.

Přeji hezký den Marek Klásek

návštěvník

Hmm tak ten tam mám právě taky a stejně to nejede.

návštěvník

Tak jsem se k tomu zase po dlouhé době dostal. Ne JavaScript Aggregator nepoužívám.

návštěvník

Ahoj,

hele, když já kliknu na modul Plugin Manager, který mám nahraný na drupalu, tak se mi zobrazí "Plugin Manager
The repository is out of date. Update it by clicking here.

This allows users to install new modules and themes much more easily. To use this module, use the search box below to look for modules and themes. Alternatively, you can just select a category to view. Add any found modules and themes to the queue. Finally, click on the Install tab to continue with fetching and installing the modules."

Když kliknu na to "The repository is out of date. Update it by clicking here", tak se mi zobrazí "Reload Repository".

Vůbec mi to tak neodpovídá tvému videu...

Můžeš poradit prosím, v čem mám problém?

Díky předem!

Profile picture for user Jan Polzer

To je správně. Po reloadu se zobrazí info The repository was updated successfully a nadpis Reload Repository. Mají to jen trochu nesmyslně udělaný. Poté se stačí vrátit zpátky na admin/plugin_manager a pokračovat, jako na videu.

návštěvník

Já když v Drupalu kliknu v administraci na Wysiwyg, tak se mi nezobrazí takovej ten výběr, jak Vám ve videu, jak tam nastavujete i jazyk a jiné ale mně se zobrazí "Wysiwyg

A Wysiwyg profile can be associated to an input format. A Wysiwyg profile defines which client-side editor is loaded, what buttons or themes are enabled for the editor, how the editor is displayed, and a few other editor-specific functions.
Installation instructions
There are no editor libraries installed currently. The following list contains a list of currently supported editors:
FCKeditor (Download) Not installed.
Extract the archive and copy its contents into a new folder in the following location:
modules/wysiwyg/fckeditor
jWYSIWYG (Download) Not installed.
Extract the archive and copy its contents into a new folder in the following location:
modules/wysiwyg/jwysiwyg
markItUp (Download) Not installed.
Extract the archive and copy its contents into a new folder in the following location:
modules/wysiwyg/markitup
NicEdit (Download) Not installed.
Extract the archive and copy its contents into a new folder in the following location:
modules/wysiwyg/nicedit
TinyMCE (Download) Not installed.
Extract the archive and copy its contents into a new folder in the following location:
modules/wysiwyg/tinymce
Whizzywig (Download) Not installed.
Extract the archive and copy its contents into a new folder in the following location:
modules/wysiwyg/whizzywig
YUI (Download) Not installed.
Extract the archive and copy its contents into a new folder in the following location:
modules/wysiwyg/yui".

To je jako v pořádku?

PS: Jinak ty videa tvořte dál, jsou super jako pomůcka!

návštěvník

Aha..A jak prosím?

návštěvník

Jéé, už jsem na to přišla ale děkuji!:-)

návštěvník

Můžete mi prosím podrobněji vysvětlit, jak zařídit, abych když kliknu na vložit obrázek do textu, jak se zobrazí takové to okénko na pravé straně má bejt čtvereček, pomocí kterého si vyberu fotky z PC... Já ho tam nemám, jak mám prosím zařídit, aby jsem ho tam měla? Nad videeem to vysvětlujete ale moje hlava to ještě moc nebere...

Předem děkuji za odpověď!

Profile picture for user Jan Polzer

Bohužel. Musíte si najít patch pro použitou verzi modulu a ten pak aplikovat. Více, než jsem napsal v článku a komentářích už to asi nevysvětlím. Návod na patchování tu na Maxiorlovi také je.

návštěvník

Dobrý den,

zjistila jsem, že jsem si asi někde něco zaškrtla blbě při nějakém tom modulu pro obrázky, protože teď se nemůžu dostat k formuláři...Když jdu do administrace a pak v prvkách webu kliknu na formulář, tak se mi začne otvírat okénku, jako kdybych otvírala nějakou fotografii a pak se hned stratí a začne se stránka jen pořád načítat anačítat a formulář se mi nezobrazí...

nevíte, v čem je chyba?

Profile picture for user Jan Polzer

Asi nějaký problém v JavaScriptu. Těžko takto na dálku říct. Zkuste kouknout, zda nemáte agregovány JavaScripty, případně vypněte vizuální editor, jestli to pomůže.

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Nové diskuze
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru