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.

Reklama

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.

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 (http://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: 

slevové kupony

Reklama

Komentáře

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

To jsem rád :)

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

Článek o aplikaci patchů jsem připravil na zítra. Vyjde o půlnoci.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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í?

Č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í.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Ď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í.

Stejnou chybu mám taky, ale IMCE funguje v pohodě :-)

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

Určitě. Tu je o tom celý článek: http://www.maxiorel.cz/jak-patchovat-moduly-pro-drupal

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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?

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

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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á

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

Galerie, která je součástí modulu Image, nestačí?

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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 ........

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

Dobrý den,
pošlu screeny mailem.

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??

Tak se omlouvam,prave sem to vyresil.

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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á.

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

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

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

:) 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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

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

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

Dobrý den, nějaké úpravy jsou popsány tady http://drupal.org/node/331089, ale já bych spíš šel do TinyMCE. FCKeditor jsem dříve preferoval, ale s TinyMCE je méně práce. :-)

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

Fajn, jsem rád, že to pomohlo.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

Jo, Lightbox má s tímto problém. Zkuste jQuery Update.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

Nepoužíváte JavaScript Aggregator?

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

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!

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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!

V pořádku to není, musíte tam nakopírovat některý z editorů.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Aha..A jak prosím?

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

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ěď!

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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?

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Stránky

Přidat komentář