(gelöst) Fixe Bildbreite festlegen

dylan · 18. Mai 2011 08:35

Ich bin nicht sicher "wohin" mit meiner Frage.

Ich habe in einer Website einen DIV indem per {content block="foto"} über TinyMCE Fotos hinzugeladen werden sollen. Das DIV hat eine fixe Breite von 200px. Da ich weiß das mein Kunde am PC nicht wirklich begeistert ist habe ich dem DIV ein overflow: hidden hinzugefügt, da ansonsten das Layout zerstört wäre.
Jetzt werden 5MB Bilder in das DIV hochgeladen, die das Layout in der Höhe wegputzen. Ich will jetzt nicht alles auflisten, was ich versucht habe, ihm beizubringen wie man Bilder verkleinert, - es funktioniert nicht.

Gibt es eine Möglichkeit, den Upload eines Bildes für einen content block vorab zu bestimmen. Wenn nicht, gibt es vielleicht eine CSS Möglichkeit, images in einem DIV eine fixe Bildbreite (Höhe proportional) aufzuzwingen? Wobei das auch nur eine halbherzige Lösung wäre, einem 5MB image eine width von 200px aufzuzwingen. Vielleicht ein zweites image-Upload Feld mit eben genau diesen Eigenschaften für besagten content block?

Edit:
Habe es gerade per CSS fürs Aussehen gelöst:
img {border: none; width: 200px !important; height: auto !important;}

Wäre aber nach wie vor für eine echte Lösung dankbar.

Beitrag geändert von dylan (18. Mai 2011 11:30)

nockenfell · 18. Mai 2011 09:00

Ein paar Stichworte:
- SuperSizer Plugin (das wird jedoch bei 5MB Bildern unter Umständen in die Knie gehen)
- GBFilepicker als Alternative (ich weiss zwar nicht ob dieser die Bilder auch verkleinert)
- Allenfalls Autolightbox (http://www.cmsmadesimple.de/forum/viewtopic.php?id=296)

Wie gibt der Kunde die Bilder genau an? Lädt er sie in ein Contentfeld und kann nebenbei noch weiteres gestalten?

dylan · 18. Mai 2011 09:14

nockenfell schrieb:

Wie gibt der Kunde die Bilder genau an? Lädt er sie in ein Contentfeld und kann nebenbei noch weiteres gestalten?

Die Bilder werden vorab mit der Bildverwaltung hochgeladen. Im Seiteneditor besteht für den content block ein zweites Tiny Textarea, in das per klick auf den image-Button dann ein Bild ausgewählt werden kann. Hier bestehen die gleichen Möglichkeiten wie beim {content} Tag, weitere Gestaltungen wären durchaus möglich.

nockenfell · 18. Mai 2011 09:18

Wenn der Kunde eine bestimmte Anzahl Bilder wählt, wäre der GBFilePicker einfacher um danach die Bilder weiterverarbeiten zu können.

uniqu3 · 18. Mai 2011 09:24

Wie nockenfell schon erwähnte, GBFilePicker+Supersizer kombiniert wären deine Lösung.
GBFilepicker kann Bilder verkleinern, ich kombiniere es meistens noch mit Supersizer wegen crop und fill_attr parameter.

Sollen es mehr Bilder sein könntest Du dafür auch Gallery Modul nehmen und Gallery Template dementsprechend erstellen.

Edit: übrigens kommt Supersizer in der letzten Version auch mit riesen Bilder zurecht http://www.corbensproducts.com/blog/exp … uto_memory

Beitrag geändert von uniqu3 (18. Mai 2011 09:29)

dylan · 18. Mai 2011 09:32

uniqu3 schrieb:

Wie nockenfell schon erwähnte, GBFilePicker+Supersizer kombiniert wären deine Lösung.
GBFilepicker kann Bilder verkleinern, ich kombiniere es meistens noch mit Supersizer wegen crop und fill_attr parameter.

Wie füge ich GBFilepicker im Editor dem besagten content block hinzu, und nur diesem? Beim hinzufügen eines content block im Template wird automatisch ein TinyMCE Editorfenster hinzugefügt, wie lässt sich das durch den GBFilepicker ersetzen?

uniqu3 · 18. Mai 2011 09:42

In der Hilfe steht geschrieben:

For designers: You can use this module in conjunction with the {content_module} tag of the CMSms core. Just place this in your template to get an additional content block that shows a filepicker in backend when editing the page: {content_module block="filepicker_block" module="GBFilePicker"}

Also in deinem Template content block mit content module ersetzen, somit wird im backend statt Editor das GBFilePicker Feld sichtbar, weitere GBFilePicker Parameter und Möglichkeiten findest Du in der Modul Hilfe.

nockenfell · 18. Mai 2011 09:43

uniqu3 schrieb:

Edit: übrigens kommt Supersizer in der letzten Version auch mit riesen Bilder zurecht http://www.corbensproducts.com/blog/exp … uto_memory

Hab's gestern gesehen. Allerdings kommt es hier wohl auf den Webserver an. Nicht jeder Webserver erlaubt hier Änderungen.

Andynium · 18. Mai 2011 09:52

dylan schrieb:

Die Bilder werden vorab mit der Bildverwaltung hochgeladen. Im Seiteneditor besteht für den content block ein zweites Tiny Textarea, in das per klick auf den image-Button dann ein Bild ausgewählt werden kann. Hier bestehen die gleichen Möglichkeiten wie beim {content} Tag, weitere Gestaltungen wären durchaus möglich.

Schau dir mal das Backend des TinyMCE genauer an - da gibts eine Option Eine sofortige Größenänderungen der hochgeladenen Bilddateien erlauben: und die Größe kannst du auch festlegen.

dylan · 18. Mai 2011 10:52

uniqu3 schrieb:

In der Hilfe steht geschrieben:
For designers: You can use this module in conjunction with the {content_module} tag of the CMSms core. Just place this in your template to get an additional content block that shows a filepicker in backend when editing the page: {content_module block="filepicker_block" module="GBFilePicker"}
Also in deinem Template content block mit content module ersetzen, somit wird im backend statt Editor das GBFilePicker Feld sichtbar, weitere GBFilePicker Parameter und Möglichkeiten findest Du in der Modul Hilfe.

Das ersetzen funktioniert. Die Anzeige eines hochgeladenen Bildes funktioniert nicht, es wird der Dateiname angezeigt: img7273.jpg. Daher habe ich im GBFilePicker:
{content_module block="foto" module="GBFilePicker" dir="uploads/images/foto/" media_type="image" show_subdirs="true"}
den Pfad angegeben, einmal mit 'uploads/', einmal ohne.

Mit uploads/ sieht es so aus:
Upload: Das Verzeichnis '/…/uploads/uploads/images/foto/' wurde nicht gefunden!

Ohne Angabe von uploads/ sieht es so aus:
Datei-Browser wird angezeigt, das Bild kann hochgeladen werden. Das oder die Bilder werden nicht angezeigt. Ich klicke auf das Auswahlfeld, es klappt eine Liste mit den hochgeladenen Dateien auf: img7273.jpg. Ich wähle die Datei und speichere das ganze.

In der Website siehts dann so aus: <div id="foto">images/foto/img7273.jpg</div>
Das <img src…> fehlt komplett.

CMS Version: 1.9.4.1, GBFilePicker Version: 1.3

NaN · 18. Mai 2011 11:02

Der FilePicker sucht nur relativ zum uploads-Verzeichnis.
Sonst könnte man damit den gesamten Webspace durchsuchen.
Und das sollte aus Sicherheitsgründen nicht sein.

Das <img src="..."/> musst Du selber ins Template schreiben.
Der Filepicker speichert nur den Pfad zum Bild.
Und der {content_module} Tag gibt nur aus, was gespeichert wurde.
D.h. im Template folgendes einfügen:

Hier klicken, um den Code zum Kopieren zu markieren

{content_module block="foto" module="GBFilePicker" dir="images/foto" media_type="image" show_subdirs="true" assign="foto"}
{if $foto|strip != ''}
<div id="foto">
    <img src="{uploads_url}/{$foto|strip}" />
</div>
{/if}

Du könntest hier auch schon die Größe des Bildes festlegen auf die es skaliert wird, wenn es hochgeladen wird und gleichzeitig, falls das Bild über anderem Wege auf den Webspace gelangt ist, mit Supersizer arbeiten:

Hier klicken, um den Code zum Kopieren zu markieren

{content_module block="foto" module="GBFilePicker" dir="images/foto" media_type="image" show_subdirs="true" force_scaling=true scaling_width=200 assign="foto"}
{if $foto|strip != ''}
<div id="foto">
    {supersizer path="uploads/$foto" overwrite=true width=200 height="auto" quality=100 no_output=true}
    <img src="{uploads_url}/{$foto}" />
</div>
{/if}

Somit kann man eigentlich fast nichts mehr falsch machen.

dylan · 18. Mai 2011 11:29

NaN schrieb:

Der FilePicker sucht nur relativ zum uploads-Verzeichnis.
Sonst könnte man damit den gesamten Webspace durchsuchen.
Und das sollte aus Sicherheitsgründen nicht sein.
Das <img src="..."/> musst Du selber ins Template schreiben.
Der Filepicker speichert nur den Pfad zum Bild.
Und der {content_module} Tag gibt nur aus, was gespeichert wurde.
D.h. im Template folgendes einfügen:
Hier klicken, um den Code zum Kopieren zu markieren
{content_module block="foto" module="GBFilePicker" dir="images/foto/" media_type="image" show_subdirs="true" assign="foto"}
{if $foto|strip != ''}
<div id="foto">
    <img src="{uploads_url}/{$foto|strip}" />
</div>
{/if}

Jetzt funktioniert es. So ist es wirklich perfekt, es kann auch fast nichts mehr schief gehen lol

Dank an alle!

Forum für CMS/made simple

#1 18. Mai 2011 08:35

(gelöst) Fixe Bildbreite festlegen

#2 18. Mai 2011 09:00

Re: (gelöst) Fixe Bildbreite festlegen

#3 18. Mai 2011 09:14

Re: (gelöst) Fixe Bildbreite festlegen

#4 18. Mai 2011 09:18

Re: (gelöst) Fixe Bildbreite festlegen

#5 18. Mai 2011 09:24

Re: (gelöst) Fixe Bildbreite festlegen

#6 18. Mai 2011 09:32

Re: (gelöst) Fixe Bildbreite festlegen

#7 18. Mai 2011 09:42

Re: (gelöst) Fixe Bildbreite festlegen

#8 18. Mai 2011 09:43

Re: (gelöst) Fixe Bildbreite festlegen

#9 18. Mai 2011 09:52

Re: (gelöst) Fixe Bildbreite festlegen

#10 18. Mai 2011 10:52

Re: (gelöst) Fixe Bildbreite festlegen

#11 18. Mai 2011 11:02

Re: (gelöst) Fixe Bildbreite festlegen

#12 18. Mai 2011 11:29

Re: (gelöst) Fixe Bildbreite festlegen

Fußzeile des Forums