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.
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.
Podobné články
Komentáře k článku
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š
Dobrý den. Jaký panel? Vizuální editor TinyMCE? Zkuste v nastavení vypnout tlačítko pro vkládání Flashe.
Kde prosím zjistím, jestli mám, nebo nemám agregované JavaScripty?
Díky předem
Nastavení webu|Výkon (admin/settings/performance).
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.
Co jsem našel, že se má někam napsat tinyMCE.init({
...
entity_encoding : "raw"
});
ale kam netuším.
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,
);
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ů.
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č.
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.
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.
Díky za tip.
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.
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.
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ě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!
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 ...
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í.
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
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.
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.
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.
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.
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.
Děkuji za rady, poperu se s tím.
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ěď.
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.
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.
:) 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.
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.
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??
No pokud vím, tak TinyMCE tam dopisuje rel="lightbox". Proč potřebujete lighthouse?
Je hloupy preklep, samozrejme ze by tam melo byt rel="lightbox" nicmene to tam stale neni :-/
Hm.... Používáte k implementaci TinyMCE modul TinyMCE nebo modul WYSIWYG? V tom WYSIWYG by to mělo fungovat určitě.
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.
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
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.
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 !!!
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
Aha..A jak to mám prosím udělat? Jak mám v Drupalu jít?
Děukuji.