Tuti felhasználóbarát slideshow-galéria létrehozása - 1. rész

Aki már próbálta galériát létrehozni drupalban, az tudja, hogy ezer meg ezer módja van, de sokszor kényszerülünk kompromisszumra egy-egy ügyféligény tekintetében. Próbáljunk meg tehát összeszedni egy "tuti" galériát!

A feladat az én esetemben a következő volt: A beküldött tartalomhoz tetszőleges mennyiségben lehessen képet kapcsolni. A kapcsolt képek slideshow-ban jelenjenek meg a tartalom mellett, és ne flashként. A képeket lehessen tömegesen feltölteni, a sorrendjüket utólag is módosítani, tömegesen törölni.

Nálam alapesetben a galéria = CCK imagefield. Ennek van azonban néhány hátránya, például nem lehet külön-külön értékelni, esetleg hozzászólni + még néhány olyan gyengeség, ami már nincs eszemben, de ezt a mutatványt akadályozta.
Tehát node alapú galériát készítünk, 1 node = 1 kép. Node reference-szel kapcsoljuk hozzá ezeket a tartalomhoz. Amúgy érdekes, hogy mennyire nem emlegetik a node reference alapú galériát, pedig sok helyen láttam már hasonlót - nekem az egyik legkényelmesebben kezelhető ez volt. Tud valaki esetleg olyan okot, amiért ez nem preferálandó?

Akkor nézzük a szükséges modulokat:

CCK
FileField

ImageField
ImageFUpload (CCK)
Node Reference URL widget
Viewfield
Imagecache
Views
DragabbleViews
Views Bulk Operation
Views Slideshow
Views Slideshow SingleFrame (a views slideshow csomag része, csak be kell kapcsolni a moduloknál.)

Tartalomtípusok:

Oldal: Ehhez kapcsolunk Slideshow néven egy viewfield-et, majd a mezők beállításainál kipipáljuk az Alapértelmezés kényszerítése checkboxot, majd az általános beállítások legvégén kiválasztjuk a kepek_slideshow - Blokk elnevezésű nézetünket, ami persze most még nincs, de később majd létrehozzuk. Az argumentumokhoz írjuk be: %nid.

Megj: A viewfield akár el is hagyható, a blokknézetet bármelyik régióba felvehetjük, és sminkelhetjük. Én csak azért tettem külön mezőbe, hogy lehessen állítani a teaser megjelenést, meg csak úgy..

Kép: Adjunk hozzá egy node reference típusú mezőt - nálam Kapcsolódó tartalom címkével van - a widget pedig legyen Reference From URL. Balra találhatók a szükséges beállítások, klikk a képre a nagyításhoz!

Ezzel a következőt csináltuk: Beállítottuk hogy a full node megjelenésekor legyen "Kép hozzáadása az oldalhoz" linkünk. Az általános beállítások közül több tartalomtípust is kiválaszthatunk, amelyhez galériát akarunk kapcsolni.
Van még egy "érdekesség": A FUpload node generálási folyamata miatt a Return path beállításai irrelevánsak, tehát békén hagyhatjuk - később keresünk alternatív megoldást a probléma kezelésére.

A kép tartalomtípushoz adjunk még hozzá egy "Kép" nevű imagefield típusú mezőt. A felületi elem típusa legyen ImageFUpload. A "Tárolási mód" lesz nekünk még fontos, ez legyen "Egy kép tartalmanként". Ilyenkor a tömeges feltöltés után minden egyes képből külön node készül, tartalmazva a szükséges node reference-t arra tartalomra, amelyhez a galériát kapcsoljuk.

Ezután állítsunk be egy imagecache presetet olyan mérettel, amellyel a slideshow-nkban meg szeretnénk jelentetni a képeket. Ha nem gond, ezt most nem részletezem, remélem elég triviális dologról van szó.

Nézzük a nézetünket, amiből a slideshow lesz: Hozzunk létre egy Tartalom alapú új nézetet, nálam ezt kepek_slideshow-nak hívják.

A stílust állítsuk át Slideshow-ra. Ennek a paraméterezését rátok bízom, azzal nagyon elrontani már nem lehet. Nálam 5000ms Timer delay, és 2000ms speed-del volt jó, de ez igénytől függően változhat. Be lehet kapcsolni a Start-Stop-Léptetések gombokat, Lapozót lehet beállítani akár sorszámból, akár bélyegképekből.

Állítsunk be egy új kapcsolatot a Kép tartalomtípusunk node reference mezőjével: Tartalom: Kapcsolódó tartalom (field_kapcsolodo_tartalom)

Kell még nekünk egy argumentum, ami Tartalom: Nid mezőből áll, és a legfontosabb: Felül állítsuk be a kapcsolatot az előbb létrehozott Kapcsolódó tartalomra. Paraméterezzük fel az argumentumot, ahogy a képen látható.

Vegyünk fel egy mezőt a képünknek: Tartalom: Kép, Tiltsuk le a Címkét és állítsuk át a formátumot arra az imagecache presetre, amit neki szánunk.
Hozzunk létre belőle Blokk típusú nézetet, és mentsük el.

Ezzel gyakorlatilag kész vagyunk a feladat első felével. Van egy szép slideshownk, egyszerűen lehet felvinni a képeket, akár tömegesen is. Ja, és még valami! Miután kész van a nézetünk, ne felejtsük el beállítani az Oldal tartalomtípusunk (illetve amelyekhez galériát akarunk kapcsolni..) viewfieldjéhez kapcsolódóan az imént létrehozott views-t!

A következő részben elkészítjük a maradék usability feature-öket, amikel a kapcsolódó képeket tudjuk karbantartani.

CsatolmányMéret
uf_gallery_new-6.x-4.5-beta1.tgz_.gz6.46 KB

Hozzászólások

@feree84: Még pár perc.

@feree84: Még pár perc. :)
@1edinick: Hmm.. Azért egy képernyőmentést tudsz feltenni valahová?

@1edinick: Sajnos vannak

@1edinick: Sajnos vannak szolgáltatók, akiknél ez a modul nem működik rendesen, és mi sem tudtunk rájönni, hogy milyen beállítások okozzák.. Sajnos ilyen esetekben a tömeges feltöltést nem lehet megoldani, egyesével kell hozzáadni a oldal-hoz a képeket.

Mikor jön a második része a

Mikor jön a második része a galériakészítésnek? Érdekelne, hogy törölni hogy lehet utolag, akár tömegesen is?

üdv

Szia, Jó kis cikk, bár kissé

Szia,

Jó kis cikk, bár kissé elkevert a "Nézzük a nézetünket" :)

Viszont 23.próbálkozás után se működik. :(
van egy "ImagesClick the "Select Images" icon on the left below to begin." de balra nincs semmi, ráadásul a mentés előtt is csak "cancel all uploads" van.

Én -szolgáltatói kényszerből- 6.15-ös Drupal-t használok, és valahogy semmi nem akar menni vele.

Azért még 99.-re is nulláról mégegyszer összedobom, és reménykedek, de nem fűzök reményt hozzá. Pedig sokat segítettél eddig! :)

Nincs vmi 5leted?

@Szántó Gábor: Nagyon

@Szántó Gábor: Nagyon tetszik.
Köszi az írást!

Üdv! Nagyon profi! Sajnos

Üdv!

Nagyon profi! Sajnos nekem nem akar sikerülni, de nem adom fel... Várom a folytatást!

Szia! Jópofa galéria,

Szia!

Jópofa galéria, hasznos dolgokról írsz. Várom a folytatást...

üdv

@KZolti: aktivpassziv.hu

Tudnál egy linket adni a

Tudnál egy linket adni a működő galériáról?
Szívesen megnézném a végeredményt.

Hozzászólás

A mező tartalma nem nyilvános.
  • Internal paths in double quotes, written as "internal:node/99", for example, are replaced with the appropriate absolute URL or relative path.
  • Engedélyezett HTML elemek: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <del> <img>
  • A webcímek és email címek automatikusan linkekké alakulnak.
  • A sorokat és bekezdéseket a rendszer automatikusan felismeri.
  • Engedélyezett HTML elemek: <a> <blockquote> <br> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <li> <ol> <p> <span> <strong> <ul>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <bash>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <mysql>, <php>, <python>, <ruby>, <sql>. The supported tag styles are: <foo>, [foo].
  • Minden email cím át lesz alakítva ember által olvasható módon, vagy (ha a JavaScript engedélyezett) ki lesz cserélve kattintható, de biztonságos hivatkozásra.
Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.