Archiv verlassen und diese Seite im Standarddesign anzeigen : HTML Editoren - Bildeigenschaften automatisch in Code übernehmen
Diane,
ich habe da mal eine HTML-Frage.
Mal angenommen, Ihr müsst sehr oft ein HTML-Dokument mit einer ausgiebigen Tabellenstruktur anlegen. Mehrere Tabellen untereinander genauer gesagt. Diese sind mit Bildern gefüllt...sehr viele Bilder. Man kommt problemloas auf 7000-8000 Pixel Höhe und verwendet bestimmt 100-150 Bilder.
Weil ihr das schon so oft gebaut habt, habt Ihr Euch ein Template zurechtgelegt...da ist ein Entwurf der "Grundtabelle" schon wasserdicht drin. Ihr könnt also, nachdem ihr ein zugehöriges Photoshop-Dokument geslicet habt, die tabellen fast "blind" aufsetzen und seid Euch sicher, dass alles stimmt. Wenn Ihr das Layout testet, dann ist aber noch alles "zerschossen", denn in dem Template habt ihr nur ein "Standard-Bild" drinne, die Bilder sind zwar immer gleich angeordnet, variieren aber natürlich schon jedesmal in Höhe und Breite.
Jetzt kommt die große Frage: Wie aktualisiert ihr die Eigenschaften aller 150 Bilder?
Oder anders: Gibt es in einem Editor (Vorhanden sind Ultraedit / Dreamweaver) eine Möglichkeit die Eigenschaften aller Bilder auf einmal neu auslesen zu lassen und im Code zu ersetzen?
Dreamweaver kann im "Eigenschaften" Fenster zwar zeigen, dass die Größe nicht stimmt und mit einem Klick ist das Bild dann aktualisiert, aber bei 150 Bildern ist das sehr lästig und zudem arbeitet Dreamweaver dann auch noch mt einer ziemlichen Verzögerung...das saugt.
Muss ich eine "Site" anlegen? Um dann die Elemente der Site anzeigen zu können...der Prozess erschließt sich mir jedenfalls an der Stelle nicht. Könnte ich mir aber noch zusammengooglen, wenn denn damit zu erledigen ist, ansosnten spar ich mir den Stress.
Effekt wäre, dass ich ein Dokument sehr viel schneller "fertig" gelayoutet hätte...und Zeit ist bekanntlich Geld...
Danke schon mal für alle tollen Ideen...
Liebe Grüße
MOS2000
Mmmhh, ich bin nicht sicher ob ich Dich richtig verstanden habe... :komisch:
Du willst Bilder verschiedener Größe in einer vorgegebene Tabelle unterbringen und sie dort z.B. immer in der gleichen Breite / Höhe anzeigen lassen?
Dies ginge z.B. über StyleSheets. Definiere in der *.css eine Klasse Image
z.B.
p.image { width: 80px;
height: 90px;
overflow: hidden;}
und entsprechend packst Du die ImageTags in die StyleSheet Tags der Klasse:
<p class='image'><img src=".$imagePath.$image." border=0></p>
Oder so ähnlich ...hab das mel eben schnell aus dem Kopf zusammengezimmert. :unschuldig:
..ob ich Dich richtig verstanden habe...Bilder verschiedener Größe in einer vorgegebene Tabelle unterbringen und sie dort z.B. immer in der gleichen Breite / Höhe anzeigen lassen...
Nein, leider genau nicht...das wäre ja easy, könnte man sogar mit nem relativ simplen suchen und ersetzen lösen :)
Ich habe eine Tabelle (CSS geht nicht, weil es sich um einen HTML-Newsletter handelt) in der jetzt 150 verschiedene Bilder stehen, aber alle haben die gleiche Größenangabe. Ich will jetzt, dass irgendein Tool / Skript mir die Bilder "analysiert" und die Width / Height Angaben bei allen Bildern Korrekt setzt. Dreamweaver kann das standardmäßig, aber eben immer nur Bild für Bild...heißt: ich muss alle 150 Bilder anklicken und aktualiiseren == sinnlose Zeitverschwendung.
Liebe Grüße
MOS2000
Warum sollte CSS nicht gehen? Das muss nicht extern eingebunden werden...
Gruß,
Quentin
Das ist nicht die Frage und het auch nichts mit der Problemlösung zu tun...bitte beim Thema bleiben.
Wenn die Antwort heißt "geht nicht" ist mir das auch recht, dann klick ichs halt weiter von Hand durch :)
Liebe Grüße
MOS2000
Sasquatch
27.01.2012, 20:35
In welcher Größe sollen sie denn angezeigt werden? Immer in der Originalen, also auf 100%?
Ich verstehe auch net wo das Problem sein soll, genau dafür ist doch CSS da. Mit Tabellen macht
man sowas schon lange nicht mehr, weil man sich da genau die Probleme einhandelt, die du gerade hast.
Pscht, wir sollen die Klappe halten, weil wir nicht bei seinem Thema sind.
Gruß,
Quentin
Sasquatch
28.01.2012, 08:51
Hahaha, ich und Klappe halten? Wäre nicht das erste Mal, daß ich deswegen auf's Maul kriege ;)
Ey Mos, gib uns doch mal den Code, oder wenigstens einen kleinen Abschnitt davon ohne und mit Bilders drinne.
*stöhnichhabsgewusst*
Ohne Technik Beserwisserei gehts mal wieder nicht... :) ;)
Also...CSS geht in HTML-Mails nicht, weil die Angabe im Header-Bereich der HTML steht und viele Mail-Clients ändern selbsttätig den kompletten Mail-Header == Die Mail ist komplett zerschossen. Sauber funktionieren nur Inline-Style Definitionen die bei den entsprechenden Elementen direkt dran stehen. Mehr Code-Aufwand, aber sehr sauber.
HTML-Mails die Client-Übergreifend (und Plattform übergreifend - ich rede hier von einer Teststrecke über Outlook 2003 - 2010, Win XP bis 7 und Mac, Browser IE 6 bis aktuell, FF in den letzten Versionen, Safari, Chrome, Opera... + 10 der gängigsten Freemailer für ein Mailing das mehrmals im Jahr in einer Auflage von fast 3.000.000 verschickt wird) funktionieren sollen baut man _sehr wohl_ noch mit Tables, weil man sich mit allem was in einem _Browser_ vielleicht Up-To-Date ist nämlich Probleme einhandelt...mit dem versendeten Code passiert dank vieler beteiligter Clients und Server ziemlich "viel" was man nicht möchte.
Aber wie gesagt...wir haben das über lange Zeit entwickelt und getestet...und das hat nichts mit der Frage zu tun. Und was "andere" vielleicht machen und tun und damit "bisher nie Probleme hatten" interessiert mich auch nicht. Ich kann einen funktionierenden Erstellungs-Prozess nicht dank eines bizarren Spezialwissens eines Einzelnen hier (von dem er aber höchstwahrscheinlich nicht weiß, ob er _garantieren_ kann, dass das überall funktioniert, weil er dann nämlich erst mal eine Woche lang testen müsste) umwerfen!
Eigentlich geht es nur um eine simple "Suchen und Ersetzen" Sache.
Ich versuche es nochmal:
Ich habe einen Table den ich immer verwende (gleiche grundlegende Struktur). Den habe ich mir als Template schon fertig abgelegt, auch schon mit "Blindbildern" (als Beispiel immer ein Bild xxxxx.jpg mit width="100" und "height="100"). Das einzige was ich immer noch variieren muss ist die Anzahl der TDs und die Bildnamen, weil das pro NL unterschiedlich sein kann.
Ich baue also meine Struktur auf, von der ich weiß dass sie wasserdicht ist, habe jetzt aber immer das Bild dort drin mit den 100er Höhen und Breiten-Angaben.
Jedem Bild einen Style zu geben wäre in der Tat unpraktikabel (für korrekte Darstellung werden eigentlich nur Texte mit Styles versehen, sofern sie denn gecodet sind und nicht sowieso als Bild realisiert sind), und damit die Tabelle überall sauber läuft, _muss_ ich die korrekten Höhen und Weite Angaben drin haben.
Hier mal ganz "stilisiert", die korrekte Schreibweise ist unrelevant, weil es nur um die Größenangabe beim Bild geht.
table
tr
td
img src =bild1.jpg width="100" heigt="100"
/td
td
img src =bild2.jpg width="100" heigt="100"
/td
td
img src =bild3.jpg width="100" heigt="100"
/td
/tr
/table
So.
Momentan muss ich dann Dreamweaver aufmachen (ich verwende den für nichts anderes als diese Funktion... :D), in der Entwurfsansicht das bild1 anklicken und sagen "Größe aktualisieren"...peng...in den Code wird automatisch die richtige Bildgröße geschrieben, weil Dreamweaver die Abmessungen des Bildes "kennt".
Habe ich das bei allen drei Bildern des NLs gemacht, dann sieht der Code hinterher so aus (NL ist 600 Pixel breit und diese Tabelle eben 133 Pixel hoch):
table
tr
td
img src =bild1.jpg width="200" heigt="133"
/td
td
img src =bild2.jpg width="200" heigt="133"
/td
td
img src =bild3.jpg width="200" heigt="133"
/td
/tr
/table
Das einzige was ich jetzt eigentlich möchte, mit Dreamweaver oder irgendeinem anderen Tool...ich möchte alle drei Bilder _gleichzeitig_ in der Größe aktualisieren, so dass ich nicht jedes Bild anklicken muss (der NL kann aus 100 - 200 Bildern bestehen - das kostet mich Zeit die ich einfach sparen will...mit 2-3 Klicks statt 200). > grob ca. 30 Minuten Zeitersparnis bei den jeweiligen Mailings. Klingt wenig, wäre mir aber eine große Hilfe.
Einzige Lösung bislang:
Eine PHP-Datei geht den Code durch und schreibt die Größen, dann gibt sie mir den Code wieder aus.
Da müßte einer unserer Entwickler ran, weil ich selbst kein PHP kann. > Zeit und Geld
Ich will eigentlich wissen, ob einer der Editoren das kann...UltraEdit oder eben Dreamweaver...von mir aus auch jeder andere.
Jetzt klarer? Und bitte keine Hinweise wie ich den Code "moderner, toller, flexibler und mehr HTML5 like" machen kann, das ist weder der Wunsch des Kunden noch unserer. ;) Es geht nur darum: Wie ersetze ich die Bildgrößen in einem Rutsch?
Liebe Grüße
MOS2000
Die Tabellen haben immer sie selbe Struktur ? Sind die Bilder immer jpgs ? sind da EXIF Infos drin ?
nen bissel Kommandozeile und das Tool jhead (http://www.sentex.net/~mwandel/jhead/) sollte dir den passenden HTML Code generieren :
htmlgen.sh
#!/bin/sh
filename=`jhead $1 | grep name | cut -d " " -f7`
resx=`jhead $1 | grep Resolution | cut -d " " -f5`
resy=`jhead $1 | grep Resolution | cut -d " " -f7`
echo "td"
echo 'img src='$filename' width="'$resx'" height="'$resy'"'
echo "/td"
Aufruf im Bilderordner :
jhead -q -nofinfo -exonly -cmd "htmlgen.sh &i" *.jpg
ergibt hier z.B.
td
img src=IMG_20110904_164752.jpg width="1920" height="2560"
/td
td
img src=IMG_20110904_164805.jpg width="1920" height="2560"
/td
td
img src=IMG_20110904_164811.jpg width="1920" height="2560"
/td
td
img src=IMG_20110904_164818.jpg width="1920" height="2560"
/td
td
img src=IMG_20110904_164822.jpg width="1920" height="2560"
/td
td
img src=IMG_20110904_164828.jpg width="1920" height="2560"
/td
td
img src=IMG_20110904_164835.jpg width="2560" height="1920"
/td
td
img src=IMG_20110904_164855.jpg width="2560" height="1920"
/td
Ok, ist jetzt Linux. Aber grep und cut sollte es auch kompiliert für Windows geben....
Marc
Sasquatch
28.01.2012, 14:27
OK, you win und wir Klappe halt.
Sind alle Bilder einer Mail immer gleich groß? D.h. würde ein einfaches Search & Replace genügen?
Soll die Darstellungsgröße immer der nativen Größe des Bildes entsprechen? Dann könntest du die Sizetags ja ganz weglassen.
...immer sie selbe Struktur ? Sind die Bilder immer jpgs ? sind da EXIF Infos drin ?...
Struktur ja, jpgs nicht immer, keine Exifs...
Der NL wird immer aus einem Photoshop-Design heraus geslicet...es könnten auch mal drei Bilder untereinander stehen pro TD.
Aber die Dinge die Du beschreibst schaue ich mir trotzdem mal an. Vielleicht hilfts ja. :) Daher schon mal danke.
...Sind alle Bilder einer Mail immer gleich groß? ....einfaches Search & Replace genügen?
Soll die Darstellungsgröße immer der nativen Größe des Bildes entsprechen? Dann könntest du die Sizetags ja ganz weglassen.
Die Bilder können immer unterschiedlich groß sein, das ist ja eben das Problem. Mit Suchen & Ersetzen geht's daher nicht, das wäre ja supereinfach. die Bilder sollen aber immer genau so groß sein wie sie tatsächlöich sind. Was das weglassen der Größenangaben angeht...da bin ich mir nicht 100% sicher ob das überall kompatibel ist. Das wäre natürlich toll, weil es je dann den Code auch noch entschlackt, da kann ich vielleicht mal einen Test fahren. Bislang galt immer die Prämisse dass die Größenangaben drin sein müssen.
Danke schon mal für die weiteren Anregungen.
Liebe Grüße
MOS2000
Sasquatch
28.01.2012, 19:09
Alte Browser hatten die Angewohnheit die Bilder dann auf 100% des Schirms aufzuziehen, ja. Aber evtl. ist das heutzutage wirklich hinfällig. Der Tag ist jedenfalls kein MUSS.
Der Weg von bnh scheint mir der vielversprechendste. Du brauchst ein Konstrukt, das
(1) dein Template nach img-Tags parst
(2) im Filesystem die Grafiken liest und deren Dimensionen analysiert
(3) width and height neu abfüllt und
(4) die Ausgabe in ein neues File umleitet bzw. direkt in die Quelldatei einsetzt
Für (2) würde ich im gegensatz zu bnh imagemagick verwenden, weil das ohne Metadaten funktioniert und mit unendlich vielen Bildformaten klarkommt. (1) ist mit Regulären Ausdrücken erschlagen, perl, grep und konsorten sind das Mittel der Wahl. Vielleicht kann man ein Ultraedit Makro basteln, das externe Tools aufruft und im Logfenster das neue Markup abgreifen, aber die Kommandozeile kommt mir hier geeigneter vor.
Powered by vBulletin® Version 4.2.5 Copyright ©2024 Adduco Digital e.K. und vBulletin Solutions, Inc. Alle Rechte vorbehalten.