UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

bd0 · 07. März 2012 00:23

hallo allerseits,

ich habe ein kleines UDT das grosse bilder automatisch quadratisch schneidet, verkleinert(350x350) und gleichzeitig eine grössere bildversion (zb.800px) erzeugt. das kleine bild wird mit dem entsprechenden html ins layout gepackt und das grosse dann bei klick über eine lightbox angezeigt. das funktioniert sehr gut und relativ einfach.
ein aufruf sieht derzeit so aus.
{clickable_imageslider file="dateiname.jpg" titel="der titel für das bild"}

bislang hatte ich die bildeinbindung über:
{content_image block='Galeriebild' dir='images/galerie' height='357px'} im template ermöglicht.
im dropdown musste man nur das gewünschte bild wählen und fertig. soweit recht komfortabel. leider muss dafür das bild schon vor dem bildupload quadratisch geschnitten werden.

nun würde ich gerne die vorteile beider methoden kombinieren, also
1. einfache auswahl mit dropdownmenu und
2. automatische skalierung/cropping, erzeugung der grossen bildvariante mit link auf lightbox per UDT

das soll jetzt über das udt geschehen. beim udt muss man im moment den dateinamen von hand eintragen. schöner wäre es wenn es über eine auswahlliste ginge. der dateiname sollte dann im UDT {clickable_imageslider file="hier der dateiname" titel="der titel für das bild"} eingetragen werden. wie lässt sich das bewerkstelligen? im prinzip könnte man die standart "bildeinfügen" funktion von tinyMCE dahingehend verändern dass anstelle von <img src=""> {clickable_imageslider file=""} ausgegeben wird, aber vielleicht gehts ja auch anders einfacher oder besser.

ich hoffe jemand kann weiterhelfen.

bd0 · 08. März 2012 20:17

hat keiner ne idee? ich habe mich gefragt ob ich das udt für das verkleinern und beschneiden nicht einfach in das plugin "content_image" einbauen kann. kann mir jemand hilfestellung leisten, wo denn dafür die geeignete stelle im code wäre. habs schon probiert aber hat nicht so funktioniert, gab diverse fehlermeldungen.
hat jemand ne idee wie und wo es am geschicktesten geht. habe leider kaum programmier erfahrung...

NaN · 08. März 2012 21:02

Du könntest Deinen UDT auch einfach etwas abändern sodass er auch mit Hilfe der Ereignisverwaltung funktioniert. Z.B. beim Speichern von Inhalten bzw. im Frontend beim Anzeigen der Seite einfach nach den Bildern suchen und dann, falls nötig, neu berechnen.
Ähnlich wie das Autolightbox UDT.

bd0 · 08. März 2012 22:01

aha, das klingt interessant. ich schau mal. danke für den hinweis!

nockenfell · 09. März 2012 06:21

Eine Anleitung zu Autolightbox findest du hier:
http://www.blattertech.ch/blog/23/Autolightbox.htm

Beim durchlesen deiner Beschreibung habe ich allerdings an folgendes gedacht:

GBFilepicker zur Auswahl der Datei im Backend:

Hier klicken, um den Code zum Kopieren zu markieren

{content_module  block="headimage" label="Headerbild"  module="GBFilePicker" no_collapse=true  dir='images/headimages' }

Im Template kannst du das Bild mittels CGSmartImage auf die gewünschte Grösse zuschneiden. Die Lightbox könntest du auch direkt im Template steuern. So im sinne:

Hier klicken, um den Code zum Kopieren zu markieren

{content_module  block="headimage" label="Headerbild"  module="GBFilePicker" no_collapse=true  dir='images/headimages' }

{if $headimage|trim != ""}
<a href="{CGContentImage .....}">}{CGContentImage ....}</a>
{/if}

bd0 · 09. März 2012 22:10

hallo nockenfell,

ich würde es gerne mal mit GBFilePicker und CGSmartImage probieren, irgendwo muss man ja anfangen...

das croppen und klein skalieren funktionierte mit CGSmartImage gut.

Hier klicken, um den Code zum Kopieren zu markieren

{CGSmartImage src='uploads/images/test/picture.jpg' filter_croptofit="357,357"}

zumindest wenn ich den link zum bild im template festgelegt habe. wie kann ich aber erreichen dass GBFilePicker den dateipfad an CGSmartImage übergibt? im moment erscheint beim einsatz des filepickers nur der dateipfad im inhalt der seite, z.b.: images/galerie/1100506.jpg

wenn diese ausgabe an der richtigen stelle im {CGSmartImage} landet wäre das ja schon die lösung für die verkleinerte version der datei...
der filepicker ist im moment so

Hier klicken, um den Code zum Kopieren zu markieren

{content_module block="filepicker_block" module="GBFilePicker" dir="/images/galerie" mode="dropdown" mediatype="images" show_subdirs=true upload=true delete=true }

eingebunden.

welche funktion hat {CGContentImage .....} in deinem codebeispiel?

NaN · 09. März 2012 22:18

Du musst die Ausgabe des {content_module} Tags einer Variablen zuweisen. Dann kannst Du diese Variable als src-Parameter beim {CGSmartImage} Modul verwenden.
Bsp.:

Hier klicken, um den Code zum Kopieren zu markieren

{content_module block="filepicker_block" module="GBFilePicker" dir="/images/galerie" mode="dropdown" mediatype="images" show_subdirs=true upload=true delete=true assign="dir"}
{CGSmartImage src='uploads/'|cat:$dir filter_croptofit="357,357"}

bd0 · 10. März 2012 23:18

danke NaN das hat schon sehr weiter geholfen. bin leider absoluter smartylai. habe mich gefragt wie man das anstellt die ausgabe in eine variable zu packen. nun funktioniert es. leider hab ich noch ein weiteres problem mit der syntax.

eigentlich wollte ich im link noch die grosse variante verknüpfen, später dann per lightbox öffnen lassen.

Hier klicken, um den Code zum Kopieren zu markieren

{content_module block="filepicker_block" module="GBFilePicker" dir="/images/galerie" mode="dropdown" mediatype="images" show_subdirs=true upload=true delete=true assign="dir"}
{CGSmartImage src='uploads/'|cat:$dir filter_croptofit='800,800' assign="big"}
<a href="{$big}">{CGSmartImage src='uploads/'|cat:$dir filter_croptofit='357,357'}</a>

klappt so natürlich nicht, da $big das komplette <img> tag mit dem zielpfad enthält, woher bekomme ich nur den pfad des erstellten grossen bildes ohne <img src=""/> ?

tut mir echt leid wenn ich eure nerven strapaziere...

Beitrag geändert von bd0 (10. März 2012 23:20)

NaN · 10. März 2012 23:22

Da bin ich gerade übrfragt. Aber schau doch mal in die Hilfe des CGSmartImage Moduls. Da gibt es bestimmt einen Parameter dafür.

bd0 · 10. März 2012 23:25

da hab ich schon geschaut, aber ich such nochmal intensiver! dachte es gäbe evtl. nen allgemeinen smarty "filter" oder sowas. danke für die hilfe soweit, bin ja schon fast am ziel...
zumindest kann ich nun eine kleine version erzeugen und auf die orginale unbeschnittene datei verlinken. das ist auch schon nicht schlecht smile

uniqu3 · 10. März 2012 08:41

Pfad ohne <img> tag kannst Du mit notag='1' ausgeben.

bd0 · 10. März 2012 14:29

hallo nochmals,

habe es schon mit notag="1" versucht. nur wenn ich es benutze wird garnichts mehr ausgegeben.
andere parameter funktionieren auch nicht, zb noauto="" damit zb alt-tag, width etc nicht automatisch eingetragen werden. auch ein paar andere funktionen von CGSmartImage funktionieren nicht ich habe dann versucht über

Hier klicken, um den Code zum Kopieren zu markieren

{CGSmartImage src='uploads/'|cat:$dir filter_croptofit='450,450' alt="gross" assign="big"}
{$big|strip_tags:true}

die html-tags loszuwerden , aber so gibt es wieder garkeine ausgabe von irgendwas.

ich arbeite lokal mit einer xampp installation (win7), kann es sein das es irgendwie an der konfiguration des servers liegt? habe nichts am standart setup verändert...

danke für die hilfe soweit. der weg ist nun klar und abgesehen vom nicht funktionierenden notag="" ist alles prima!

1000 dank für die geduld und unterstützung.

Forum für CMS/made simple

#1 07. März 2012 00:23

UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

#2 08. März 2012 20:17

Re: UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

#3 08. März 2012 21:02

Re: UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

#4 08. März 2012 22:01

Re: UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

#5 09. März 2012 06:21

Re: UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

#6 09. März 2012 22:10

Re: UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

#7 09. März 2012 22:18

Re: UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

#8 10. März 2012 23:18

Re: UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

#9 10. März 2012 23:22

Re: UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

#10 10. März 2012 23:25

Re: UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

#11 10. März 2012 08:41

Re: UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

#12 10. März 2012 14:29

Re: UDT (supersizer ähnlich) und dropdown bildauswahl verschmelzen

Fußzeile des Forums