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.

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
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer (Drupal 7) a Site Builder (Drupal 8 & 9) a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

návštěvník

Aha..A jak to mám prosím udělat? Jak mám v Drupalu jít?

Děukuji.

Profile picture for user Jan Polzer

Jak vypnout modul? Omlouvám se, nemůžu teď radit úplně polopaticky, musím dělat taky nějaké placené věci. Ale třeba pomohou ostatní.

návštěvník

A kde prosím zjistím, jestli mám, nebo nemám agregované JavaScripty?

Díky předem

návštěvník

Dobrý den, po naistalování potřebných modulů a nastavení podle vašeho videa se mi při zapnutí panelu ve článku tento panel nezobrazí (potřebná tlačítka tohoto panelu mám zaškrtnutá)
Děkuji za radu Aleš

Profile picture for user Jan Polzer

Dobrý den. Jaký panel? Vizuální editor TinyMCE? Zkuste v nastavení vypnout tlačítko pro vkládání Flashe.

návštěvník

Děkuji za rychlou odpoved. Bylo to ono. Aleš

návštěvník

Podobny problem, ale mam verziu 3.2.7 a tam tlacitko Flash nie je, a taktiez po kliku na Enable rich-text sa mi nezobrazi nic :(

návštěvník

P. Polzer poradil a vyriesil.
Bolo to v zapnuti slovenskeho prekladu TinyMCE.
Vdaka

návštěvník

Kde prosím zjistím, jestli mám, nebo nemám agregované JavaScripty?

Díky předem

návštěvník

Nevíte jak vypnu to, aby mi to po zapnutí editoru nezničilo diakritiku? Pokud zase editor vypnu místo diakritiky mám nějaké entity.

návštěvník

Co jsem našel, že se má někam napsat tinyMCE.init({
...
entity_encoding : "raw"
});
ale kam netuším.

Profile picture for user Jan Polzer

sites/all/modules/wysiwyg/editors/tinymce.inc. Najděte funkci function wysiwyg_tinymce_settings($editor, $config, $theme). Na začátku by mělo být toto:
$init = array(
'button_tile_map' => TRUE, // @todo Add a setting for this.
'document_base_url' => base_path(),
'entity_encoding' => 'raw',
'mode' => 'none',
'plugins' => array(),
'relative_urls' => FALSE,
'theme' => $theme,
'width' => '100%',
'height' => '700',
'keep_styles' => TRUE,
'inline_styles' => TRUE,
);

návštěvník

Děkuji, funguje. Myslím, že by to stálo za to doplnit toto do vašeho článku. Na internetu jsem na to našel spoustu dotazů.

návštěvník

ješte snad jedna výtka. Jde to nastavit tak, aby to při zapnutí neodstranilo mezery? U většiny článků TinyMCE člověk nepotřebuje takže píše článek a pak zjistí, že potřebuje něco z editovat zapne ho a hups text se slije a mezery jsou fuč.

Profile picture for user Jan Polzer

Proč výtka?

Najdete to v Nastavení webu, WYSIWYG, Upravit, sekce Cleanup and output. Prohlédněte si nabízená nastavení, každé z nich je popsáno. Nevím sice, co konkrétně máte na mysli, ale tipuju, že budete chtít vypnout volbu Remove linebreaks.

návštěvník

Ve videu se říká, že FCKeditor nepodporuje rozhraní pro automatické propojení odkazu na obrázek do Lighboxu, že je nutné ručně do kódu připsat rel="lightbox". Není to tak zcela pravda. Jak na to? Nejdříve v nastavení Lighboxu v Automatic Image Handling/ Custom glass images pojmenujte svůj trigger class. Čili do pole Custom image trigger classes napište např. "lightbox". Tento název pak v IMCE editoru vepište do pole Třída stylu na kartě Rozšířené ve Vlastnostech obrázku. Je tak sice nutné pojmenování trigger classu napsat, ale odpadá přepínání do zdrojového kódu a vepisování do něj. Pokládám to za metodu docela rychlou, se kterou jsem spokojený. FCKeditor mi tak vyhovuje a nepotřebuji mít nainstalovaný žádný další WYSIWYG editor.

návštěvník

Dobrý den,
mám prosbu,stále se peru s IMCE. Nevím proč, ale pokud chci vložit obr. do článku, vyberu si obr. přes IMCE v galerii, tak nevidím jednak tlačítko Resize, Smazat, Thumbmails. Ač v nastavení IMCE mám tytomožnosti pro roota zaškrtnuta.

Profile picture for user Jan Polzer

Dobrý den. Už jsem to jednou s někým řešil, ale teď to nemohu najít. Mám dojem, že to bylo chybějícím print $closure v page.tpl.php v kombinaci s použitím nějaké vývojové verze trojkové řady modulu Admin menu.

návštěvník

ufff, to vypadá moc složitě, na jiném webu mi to frčí v pohodě sakriš, no nevadí, jdu se školit :) Děkuju za odpoveď a radu

návštěvník

Nějak se mi to nezdá, není nakonec přece jen chyba ve špatně nastaveném IMCE. Máš opravdu v nastavení IMCE vytvořený profil pro svou roli? Vidíš ten profil v "Role-profile assignments"? Jsi opravdu členem této role? Já bych to všechno ještě aspoň čtyřikrát zkontroloval. Člověk někdy nevidí brýle na nose!

návštěvník

Prisel jsem na to, ze to nefunguje s timto thematkem co mam = wilderness, pokud aktivuji "origo" co jsou v zakladni instalaci, IMCE frci uplne normalne ...

Profile picture for user Jan Polzer

Jak píšu o něco výše, podívejte se do souboru page.tpl.php v daném tématu, jestli je na jeho konci, čili před značkami </body></html> uvedeno print $closure.

Profile picture for user Jan Polzer

Složité to není, jen se podívejte, zda nepoužíváte náhodou vývojové verze modulů místo stabilních, případně znovu zkontrolujte nastavení.

návštěvník

Mám prosbu. Někde píšete, nebo ve videu říkáte, že si Lightbox načte všechny obrázky např. z článku a ukáže dole šipky a mezi obrázky je možné listovat. Napsal jsem článeček a v něm to tak nefunguje.

V nastavení Lightboxu v "automatic image handling" mám u všech typů zadáno "Lightbox grouped".

Netušíte kde je chyba? Děkuji ZZ

Profile picture for user Jan Polzer

Dobrý den. To je bohužel jiný postup, a sice z článku Video: obrázky v Drupalu pomocí modulů Inline, Imagecache a Lightbox2

Když na to koukám, zdá se, že jste obrázky vložil přes TinyMCE. Čili máte tam správně rel="lightbox", ovšem aby to bylo v kupě, pak to musí být ve tvaru rel=”lightbox[group]”. Slovo group nahradíte ve vašem případě třeba slovem vývoj. Lightbox pak bude procházet všechny obrázky, které mají uvedenu tuto skupinu.

Je to pracné, takže pokud byste to chtěl nechat na automatice, postupujte podle uvedeného návodu na kombinaci s modulem inline.

návštěvník

Dobrý den,
našel jsem na Vašem webu spoustu dobrých rad a prosím Vás o jednu konkrétní.
Nainstaloval jsem galerii Acidfree, vše je OK, ale potřeboval bych v zobrazení náhledu na galerii změnit barvu podkladu, která je světlá a písmo nastaveného vzhledu na ní není dobře vidět. Lze to a případně jak ? Je to věc tématu vzhledu nebo nastavení vzhledu Acidfree ?
Dokážete mi, prosím, poradit ?
Děkuji
M.P.

Profile picture for user Jan Polzer

Zdravím, to jsem rád.

Já Acidfree nepoužívám, ale myslím si, že to půjde ovlivnit ve style.css přímo v šabloně vzhledu. Pošlete sem URL stránky, koukneme se.

návštěvník

Děkuji - je to www.phototrip.cz a když kouknete na menu Fotogalerie-Ptáci v pravé části, tak se Vám zobrazí podgalerie na bílém pozadí, což se žlutým písmem není úplně ono...
No a když už jsem Vás dostal až k sobě, tak bych se rád zeptal ještě na způsob, jak roztáhnout menu Fotogalerie vpravo do šířky (aby názvy ptáků byly na jednom řádku) nebo jak přinutit menu nedělat tak velké odskoky (se stejným důsledkem - dostat celé jméno na jeden řádek v menu Fotogalerie).
Zdraví
Martin P.

Profile picture for user Jan Polzer

Stačí opravdu upravit style.css v šabloně vzhledu. Doplňte tam

div.acidfree-cell div.acidfree-folder {
  background-color: #666;
}

Čímž nastavíte barvu pozadí těch rámečků na tmavě šedou. Případně si to upravte podle sebe.

Šířku bočního panelu roztáhnete u #templatemo_right_section, ovšem to vám už pak rozháže celý layout. Nastudujte si, jak se pracuje s CSS a zkuste si s tím trochu pohrát.

návštěvník

Děkuji za rady, poperu se s tím.

návštěvník

Dobrý den, vše jsem dělal podle návodu a vše funguje tak jak má. Jenom mě zajímá, jak jste dosáhl toho, že když vložíte obrázek a kliknete na něj, objeví se na jeho okrajích funkce pro manipulaci s obrázkem (zvětšení, roztáhnutí, postunutí, ...) ? Děkuji za odpověď.

Profile picture for user Jan Polzer

Dobrý den. Jsem rád, že Vám to jede. Rámečku pro manipulaci s obrázkem jsem se nijak záměrně dosáhnout nesnažil, editor TinyMCE ho tam dává automaticky.

návštěvník

Dobrý den,
Návod dobrý vše se zdá že bdue fungovat, ale ...
když něco napíši přes TimyMCE třeba jen tučné písmo, tak ve finále po uložení mi vznikne text [b]tohle je tučně[/b] místo toho aby to bylo v normální HTML značce. To samé mi to samozřejmě dělá i s

Profile picture for user Jan Polzer

Na tomto webu už na podobný dotaz odpovídám po sto páté :-) V nastavení editoru vypněte "tlačítko", v tomto případě spíše funkci, BBcode.

návštěvník

:) moc děkuji, že jste se po stopaté obtěžoval. Možná to bude tím, že jsem chtěl mít vše přesně podle návodu, takže jsem zašrtal také všechny položky co máte zaškrtány ve videu, tzn. i BBcode.
Už mi to jede až snad na jedinou poslední věc což je, že se mi vložené obrázky na webu potom nezobrazí, ani když napíšu přesnou cestu url do prohlížeče, na ftp jsou ale podivat se na ně nejde, nejspíš to bude problém rolí, profilů a práv. Je tam toho opradu dost. no snad na to nějak dojdu i kdybych to měl natvrdo povolit přes ftp.

Profile picture for user Jan Polzer

Taky častá otázka, většinou se stejným řešením. Ve složce se soubory (files nebo sites/default/files) najděte soubor .htaccess (pozor, v FTP si musíte zobrazit skryté soubory). V .htaccess jsou tři řádky, které zakomentujte tím, že na jejich začátek dáte znak #. Uložte a zkuste to znovu.

návštěvník

Moc díky za rady. Už jsem si říkal jak se mi to krásně povede bez dotazů a nakonec to nevyšlo. Nyní to vše jede. :)

návštěvník

Ja se asi zblaznim, jsem nesika :-( Tiny, Imce i Lightbox2 mam nainstalovane, ale to odeslani obrazku do Lightbou nejde. Zjistil jsem ze Tiny proste nezapise do kodu rel="lighthouse". Kdyz Tiny vypnu a dopisu to tam rucne tak se obrazek do lightboxu posle a zobrazi se v nem, ale jakmile otevru editaci stranky a zapnu Tiny tak prvni co udela ze to zase odmaze :-(
Nevite nekdo co s tim? Co mam spatne??

Profile picture for user Jan Polzer

No pokud vím, tak TinyMCE tam dopisuje rel="lightbox". Proč potřebujete lighthouse?

návštěvník

Je hloupy preklep, samozrejme ze by tam melo byt rel="lightbox" nicmene to tam stale neni :-/

Profile picture for user Jan Polzer

Hm.... Používáte k implementaci TinyMCE modul TinyMCE nebo modul WYSIWYG? V tom WYSIWYG by to mělo fungovat určitě.

návštěvník

Mel jsem tam rozjety modul Tiny Tiny MCE protoze jsem ho pouzival driv a pri pokusu o prechod na modul Wysiwyg to neprobehlo korektne a spravne.(http://drupal.org/project/tinytinymce).
Provedl jsem tedy novou, certsvou instalaci Drupalu a rozjel WYSIWYG modul a nyni to jed jak ma. Dekuji Vam velice.

návštěvník

Ahoj,
měl bych dotaz, jaký Path používáte v IMCE, aby to řadilo podle typu obsahu, roku, ... zkrátka jak to máte Vy. Já vyzkoušel [type]/[yyyy]/[mm] a vytvořili se mi složky přesně s těmi to jmeny misto clanek/2009/10.
A ještě jeden dotaz ohledně Imagecache, zkouším to ale stále se zobrazuje pouze odkaz, obrazek se tam nenahraje(špatný chmod), když použiji stejný chmod jako na složku files, napíše neoprávněný přístup přes filezillu i totalcommander, jaký je tedy správný?
Díky za odpovědi

Profile picture for user Jan Polzer

Path v IMCE? Mám obrázky automaticky tříděné z Uploadu do pictures/clanky/[yyyy]/[mm][month]/[nid].

Chmod 777 nejde? Zřejmě bude problém s nastavením serveru.

návštěvník

Díky. Sice mi to dalo než jsem se tím prokousal, jelikož znám Drupal 14 dní a po 10 letech dělám znovu stránky.

Moc mi to pomohlo.

Více takového materiálu pro začátečníky !!!

návštěvník

Pokaždé když chci nalistovat obrázek tak si musím upravit velikost okna a oblastí TinyMCE, nedá se to nastavit v nějakém configu?

Děkuji za odpověď.

JK

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

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

reklama
Novinka listopad 2020

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
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.

Co píší na Interval.cz
@maxiorel na Twitteru

Maxiorel na Twitteru