Obrázky v Drupalu jsou zdánlivě nevyčerpatelné téma. Na stránkách tohoto webu jsem se jim věnoval již několikrát. Pokud jste neviděli předchozí videa (a nejenom ta o Drupalu), doporučuji kouknout do sekce s videonávody. Videa pro Drupal se snažím připravovat tak, aby se objevilo minimálně alespoň jedno za měsíc.
V dnešním videonávodu se podíváme na tvorbu jednoduchých webových galerií vytvářených pomocí modulu Image. Jeho výhodou je snadné vkládání obrázků na web, kdy je každý z obrázků vložen coby samostatný node – článek. Díky tomu můžete s obrázky různě pracovat pomocí Views, CCK a Contemplate, třídit je do kategorií a měnit vzhled jejich zobrazení.
Díky vlastnostem modulu Image však můžete obrázky třídit i do speciálních webových galerií, nebo je přikládat k článkům.
3D galerie v Drupalu s využitím PicLens/Cooliris
Všechna minulá videa pro Drupal jsem věnoval kombinacím několika různých modulů, které dohromady tvoří určité řešení. Modul Image sám o sobě pro tvorbu galerií stačí. Abych vás neochudil o případnou zajímavost, doplnil jsem do videa ukázku nastavení a provázanosti galerií s nástrojem PicLens (neboli Cooliris, jak zní jeho nový název).
Ve videu jsou zmiňovány také některé webové stránky. Zde jsou patřičné odkazy spolu s adresami, odkud si stáhnete zmiňované moduly. Tentokrát se nemusíte bát, žádné patchování jako u TinyMCE a IMCE vás nečeká:
- Image (modul pro Drupal)
- PicLens (modul pro Drupal)
- Cooliris (doplněk pro IE a Firefox)
- prezentace.maxiorel.cz (prosím, okopírujte si adresu do prohlížeče)
- www.bakalka.cz (ukázka modulu Image a PicLens v praxi, další Inko v článku
Slíbené video je zde, doufám, že se vám bude líbit, a především, že vám poslouží pro vytvoření zajímavějších webů.
Video bylo odstraněno
Pro pořádek a pro nové čtenáře ještě připomínám starší videonávody pro Drupal:
- Drupal video: TinyMCE, IMCE, Lightbox. Obrázky v Drupalu podruhé
- Drupal 6, Views 2 a uživatelské profily (video)
- Video: obrázky v Drupalu pomocí modulů Inline, Imagecache a Lightbox
Do příštího videonávodu se rozhoduji mezi ukázkou vkládání videa do stránek, nebo pokračováním o obrázcích, konkrétně o uživatelsky přívětivém propojování obrázků z modulu Image přímo do těla stránky pomocí vizuálního editoru.
Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development 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
Krásné video, díky.
Jen jsem nějak nepřišel na to, jak aktivovat řádek s tagy, protože já ho nějak při tvorbě stránky s obrázkem nemám :-(
Jednoduše. Vytvořte si novou kategorii, u které si nastavíte, že se bude používat pro typ obsahu Image a aktivujete u ní volbu Tagy.
Dobrý den, děkuji za výborné video. Velmi mi pomohlo.
Ještě bych se chtěl zeptat, jaký modul použít pro listování v galerii jen pomocí odkazů <<První <Předchozí [galerie] Další> Poslední>>, jako tomu je na zmíněných stránkách bakalka.cz např. v galerii http://www.bakalka.cz/galerie/2008/pod-hvezdnou-oblohou-0. Předem děkuji za odpověď.
Zdravím, je potřeba doplnit nějaké kód do souboru template.php ve vašem tématu vzhledu a něco do node.tpl.php. Použil se tam postup odsud: http://drupal.org/node/134124
K uvedenému jsme zkusili nějaké úpravy. Konkrétně tam používáme modul Contemplate, takže vypisování odkazů řešíme bez podmínky a v souboru node-image.tpl.php, který se aplikuje jen pro obrázky. Kód v template.php zůstal stejný, do místa, kde chci odkazy vypsat v *.tpl.php, jsme dali toto:
<?php // sablona pro odkazy v galerii pod obrazkem
if ($terms && arg(0) == 'node' && is_null(arg(2))) {
$next = next_prev($node->nid, 'image', 'next', 'další >', 'link'); // replace 'test' with a valid class for the link
$previous = next_prev($node->nid, 'image', 'prev', '< předchozí', 'link');
$last = next_prev($node->nid, 'image', 'last', 'poslední >>', 'link');
$first = next_prev($node->nid, 'image', 'first', '<< první', 'link');
$gallery = next_prev($node->nid, 'image', 'parent', '', 'link');
print '<p><center>';
if ($previous){ print $first .' '. $previous;}
print ' [ '. $gallery .' ] ';
if ($next){ print $next .' ' .$last;}
print '</center></p>';
}
?>
Snad to pomůže.
Dobrý den,
předně musím říci, že php vůbec nerozumím. Jen se snažím v drupalu zpříjemnit galerii obrázků. Použil jsem váš postup, ale pod obrázky se mi objeví jen toto: " link [ ] link ".
Problém je asi v tomhle "// replace 'test' with a valid class for the link" , ale jak říkám php nerozumím, tak nevím co kde a čím nahradit.
Předem díky za radu.
Zdravím. Musel bych vidět konkrétní web a co jste kam nakopíroval - není-li někde chyba. Takto je to vaření z vody.
Web je: www.sonsplzenjih.cz
Téma je lehce upravený "Bluemarine", ale upravoval jsem jen css. Mám ho nahraný v "sites/all/themes/bluemarine". U tohoto tématu nebyl soubor "template.php" tak jsem si ho vypůjčil z tématu "Garland" a doplnil do něj kód ze stránky http://drupal.org/node/134124 (nevím jestli správně).
Dále jsem udělal kopii souboru "node.tpl.php" a přejmenoval ho na "node-image.tpl.php". Do toho to jsem vložil kód, který uvádíte výše. Předtím jsem ještě nainstaloval a zapnul modul Contemplate.
Ještě jsem zapomněl, jde o Drupal 6.10.
Tak už jsem to zprovoznil. Pomocí tohoto: http://drupal.org/node/45050
Váš kód funguje taky (i když díky mé neznalosti ne tak dobře jako tento http://drupal.org). Dělal jsem to vlastně správně, potíž byla v té diakritice u "další", "poslední" atd. Když se to napíše bez háčků a čarek, tak to jde.
Jediná vada na kráse je, že při procházení galeríí pomocí další a předchozí, se obrázky řadí obráceně než jsou v náhledech. Tedy když klinu na "prvni" zobrazí se poslední.
Ještě nad tím pokoumám. Rád bych věděl jestli to je někde v template.php, nebo jen v nastavení drupalu.
Fajn. Co se diakritiky týče, musíte ty soubory ukládat v UTF-8, pak bude fungovat i diakritika. V opačném případě to zlobí.
Dobrý den,
Předpokládám, že bude chybka v nějaké maličkosti ale při nahrání obrázku nebo v správě obsahu při editaci nahraného obrázku nelze zvolit galerii, kterou jsem si vytvořil. Je k dispozici jen nabídka menu. V té ale nelze zvolit obrázkové galerie.
Díky Al3s
Koukněte, zda je máte vytvořené v admin/content/image.
Dobrý den,
v admin/content/image (Administrace/správa obsahu/Galerie) galerie vytvořeny jsou.
Přikládám screenshot:http://imgupload.cz/muj.php?obrazek=oaNL4z9NdB.JPG
Dobry den,nainstaloval jsem vse podle Vaseho navodu a pri zkousce nahrani obrazku se mi ukazala tato hlaska:
The directory to import image nodes from. Drupal will need to have write access to this directory so we can move the file.
Note: a path begining with a / indicates the path is relative to the server's root, one starting without specifies a path relative to Drupal's root. I.e. /tmp/image would be the temp directory off the root while tmp/image would be inside Drupal's directory.
Nevite,v cem by mohl byt problem? Dekuji za info..
Dobrý den. Koukněte se do admin/settings/image, jestli máte správně nastavenu cestu ke složce, kam si bude Drupal ukládat nahrané obrázky. Musí do ní mít právo zápisu.
Dobrý den,
import obrázků je super, ale při větších galeriích, lze zajistit, aby se importované obrázky neházely do složky images/temp ale třeba do images/fotogalerie/vystava_2009 ?
Hlavně jde o to, že galerií bude víc a tak jde o lepší automatické, ale řízené řazení.
Díky za odpověď
Dobrý den. S touhle úpravou to bude třídit do složek podle kategorií http://drupal.org/node/332535. Mám to odzkoušeno.
Dobrý den,
tak tato úprava nějak již nefunguje. Pokud přehraji (pokud se to tak má dělat) na ftp v modulu image právě stejný soubor, tak galerie už nenaskočí a ukazuje to fatal eror dokazující na modul views, myslím že to má souvislost s novou verzí, kde již modul image využívá views.
Takže zatím jsem nanašel přímo modul, nebo návod aby se galerie řadila jak si jí definuji třeba právě při jednotlivém importu, asi tak, jako když stahujete nějaký soubor z internetu a přímo si vyberete adresář kam se to má uložit, nebo si jej při uložení vytvoříte:-(((
Neumožňuje to třeba i nějaká jiná galerie?
Řazení do složek by měl umět také modul FileField Paths. Podporuje i Image.
Díky moc, zdá se, že toto je přesně to, co jsem hledal. Ještě vyzkoušet v praxi. Ještě dotaz ke galerii. Galerie, kterou vlastně standartně používám z Vaší knihy a videotutoriálů, je také docela omezená. Nevítě o nějaké lepší co se týká zpětné úpravy fotek v galerii? Pokud naimportuji fotky a smažu popisky, potom každá úprava vyžaduje nadpis zadat:-( Také přesouvání galerií v pořadí asi možné není, tak jako je tomu třeba v menu odkazů,nebo bloků. Kdyby taková nějaká galerie byla a věděl jste o ní, napište prosím. Koukal jsem na drupal.org na galerie, ale nejsou nikde ukázky a instalovat každou je nad mé síly :-(
Já se zatím vždy spokojil s galerií v modulu Image. Pokud bych potřeboval hromadu speciálních funkcí, aby bych zkusil toto http://drupal.org/project/gallery - akorát ale čtu, že je to nahnuté s dalším vývojem modulu provazujícího Drupal a tuto galerii.
Tak přesně tuhle jsem si nahrál a zkoušel rozběhat. Byly o ní zmínky na drupal.cz ale nepodařilo se mě to. Kdyby na ní existovala asi recenze, tak by to bylo super.
Právě na jednom webu, jsem byl nucen přeházet fotky podle přání a také galerie podle přání. Bylo to poměrně náročné, navíc galerie jak se zdá mají váhu jen -10/+10 takže to je na 20 galerií a pak to asi bude zlobit. Fotky jsem musel přejmenovávat a řadit pomocí views. Je to hrozně zdlouhavé a nepraktické. Pokud by jste zkusil udělat recenci a videotutoriál na nějakou lepší galerii, třeba právě tu gallery2 bylo by to super.
Díky za odpověď.
A ještě jedna věc. Pokud naimportuji obrázky, tak se s nima hejbat také asi nedá, abych se přesunul jejich pořadí, kromě toho, že je přejmenuji a naimportuji znovu.
Určitě musí existovat něco propracovanějšího na galerie, jak s tříděním do zvolených adrsářů, tak s možností zpětných úprav. nebo fakt nic není?:-) na drupal.org sem toho moc nenašel, protože ani neumim dost dobře anglicky.
Prosím tedy o radu a pomoc. Díky
Maxiorla jsem našel nedávno. Díky za něj. Knihu jsem si taky pořídil, ale nikde jsem nenašel (nejen na Maxiorlovi) návod na galerii (řešení) které umožňuje:
.
-fotky ukládá do separé adresářů (Třeba podle uživatelů, ať není při více přispěvatelích všechno v jednom adresáři a ať má každý uživatel přístup jen k sobě.)
-fotky např. do typu "článek" i "obrázek" se nahrávají podle uživatele - viz. výše
-obrázky se nemusí předem nahrávat na FTP (účet FTP mám jen jeden a další jsou měsíčně zpoplatněné nemalou částkou)
-zobrazení galerie a obrázků z článků v nějakém pěkném rozhraní - třeba Lightbox2.
.
Tady popisovaná řešení ukládají fotky pro "obrázek" jinam, než třeba IMCE, které to umí jak chci. Ale jak donutit přispěvatele ať "obrázek" nepoužívají a dělají jenom články? Nechci psát do diskuzí hned když mi něco nejde, ale zkoušel jsem zpojízdnit asi 20 galerií z drupal.org a asi jsem manták. Zabralo mi to už tolik času, že začínám mít Drupal skoro nerad ;).
Nemohl by mi někdo prosím poradit řešení? Když to pochopím a pujde to, pošlu klidně flašku dobré moravské slivovice!! Dík.
To jsem rád. Snad Vám informace na Maxiorlovi a v knize k něčemu budou.
Co se týče galerie, já bych to neviděl tak bledě.
Modul Image umožní po této drobné úpravě třídit fotky do podadresářů podle zvoleného nastavení. Zobrazit to můžete třeba pomocí PicLens, které funguje jak v JavaScriptu, tak s doplňkem pro IE a Firefox. Viz článek tento článek.
V praxi mám třídění do složek použito na www.screenshots-archive.com, pokud vím, tak to funguje i na www.bakalka.cz.
Ještě co se týče toho, aby uživatelé nevytvářeli nový obsah typu Obrázek. Nastavení by mělo být v Uživatelé|Oprávnění pod názvem Vytvářet obrázky.
Zdravím,
zkusil jsem tu drobnou úpravu - přehrál jsem originální modul (v adresáři sites/all/modules/image), ale žádnou změnu nevidím. Nikde není možnost zadat nějaké nastavení, nějaké parametry - adresáře uživatelům. Mohu-li poprosit ještě o nějaké nasměrování....
Děkuji ZZ
Omlouvám se. Ta odkazovaná úprava třídí obrázky v galerii do složek podle čísla kategorie. Co se týče uživatelů, pak je úprava tu http://drupal.org/node/103793
Celkově však musím říct, že je to všechno velmi otevřené a kód se různě mění. Já sám si to vždycky omylem přepíšu aktuální vývojovou nebo stabilní verzí modulu a pak vše pracně hledám. Nevím, jestli je to vhodné řešení pro začátečníka.
Možná byste mohl zkusit i jiná řešení pro galerie, viz http://drupal.org/project/modules?text=gallery
Po nějaké čase opět pracuji na Drupalu a všiml jsem si, že při použití obrázkové Galerie s použitím Piclens se mi zobrazí v prohlížeči kde je jen Java náhled galerie se 6 obrázky. nepřišel jsem na to kde by se to mohlo změnit. V prohlížeči, kde je 3D zobrazení Piclens, tak vidím všechny obrázky.
Můžete mi prosím poradit? Je to vidět na webu www.pas-zabreh.cz
Dobrý den,
video návod je zajímavý.Zatím Drupal nepoužívám, ale právě se rozhoduji o jeho instalaci.
Pro redaktory, kteří nechtějí pracovat s kódem, chci v redakčním systému nastavit níže uvedené možnosti:
1) Předpokládám, že lze na jedné stránce nastavit možnost přiložit obrázek a text do předem definovaných míst. Popř. lze nastavit pevně souřadnice levého dolního rohu obrázku a souřadnice levého dolního rohu pro začátek textu? Souřadnice obrázku a textu (nápis "Panoramata") jsou na současné vzorové stránce odlišné. Viz.: http://www.testujme.ic.cz/test-4.php
2) Jak přidávat obrázky přes redakční rozhraní přímo do seznamu přehrávače (momentálně Lightbox ) bez manipulace s HTML kódem, aby se na stránce zobrazil jen jeden (např. první) obrázek a ten po rozkliknutí spustil prohlížeč galerie? Zatím řešeno přidáním seznamu pro Lightbox do kódu HTML: http://www.testujme.ic.cz/test-4.php - ale tento způsob je pro ostatní přispívající neakceptovatelný.
3) Lze obrázky po importu upravit např. na maximální rozměr 500px-šířka a 376px-výška?
4) Lze jen přes redakční rozhraní (bez manipulace s kódem) vytvořit novou stránku s přednastaveným pozadím a dalšími grafickými prvky, které jsou shodné s předchozí (vzorovou) stránkou ?Zachovat tlačítka pro posun vpřed, zpět návrat do menu a zavřít: http://www.testujme.ic.cz/fotogalerie-panoramata-2.php
Děkuji předem za odpověd.
Dobrý den.
1 - obrázek jednoduše vložíte přes editor do textu na definované místo. Pozice na pixel přesně je dána částečně také použitými kaskádovými styly.
2 - pomocí kombinace CCK a Colorboxu
3 - ano, pomocí ImageCache v Drupaku 6 nebo pomocí Média -> Syly obrázku v Drupalu 7.
4 - ano, v editoru lze využívat systém šablon.
Děkuji za odpověd.
Vyzkouším Vámi doporučenou kombinaci.
Díky za další video, které je pro mně začátečníka s drupalem (a doufám že nejen pro mně) inspirací a návodem jak na galerie v drupalu. Info o tom, že se nebude konat "patchování" je povzbuzující ;-). 3D efekty jsou opravdu super (tuším že už jste o tomto doplňku na maxiorlovi psal). Galerii ještě na na stránkách nemáme (ale připravených obrázků spoustu). Podle videa vypadá vytvoření galerie jednoduše, tak doufám, že se mi to v praxi "nevymkne".
S pozdravem
Michal