Hat jemand ein Skript, um Bild-Tags automatisch aus einem Verzeichnis von Bildern zu generieren?

Question

Ich mache viel in Photoshop schneiden, und es ist mühsam einen <img /> Tag für jeden von ihnen von Hand schreiben - im Dateinamen zu schreiben, überprüft die Höhe und Breite, die Alt-Tags zu schreiben usw.

Ich kann verwenden Photoshop, um das HTML zu erzeugen, aber sie misten es normalerweise, indem sie XHTML nicht erzeugen, oder es in Tabellen einwickeln, und so weiter. Ich versuche mein Leben einfacher zu machen.

Also frage ich mich, ob jemand ein Skript verwendet, das automatisch img-Tags basierend auf dem Verzeichnis generiert? Oder wenn eine IDE, die ich nicht kenne, dies tut? Ich möchte nur, dass es eine Reihe von Tags wie folgt generiert:

<img src="{filename}" alt="" width="{width}" height="{height}" /> 

Answer 1

Zuerst möchte ich Ihnen empfehlen, über die Breite und Höhe Informationen in einem Bild. Es ist sehr gut, dass du das tust, jeder sollte das tun. Sie können eine Skriptsprache wie Python oder PHP verwenden, um dies mit einer Bildbibliothek wie imagemagick oder gd zu tun. Ohne zu wissen, welche Sprache oder Werkzeuge Sie verwenden, um Ihre Website zu betreiben, kann ich kein Beispiel nennen.

In Python, ein Template-System verwenden Sie könnten so etwas tun:

<div> 
    <% addImg("/images/myImage.png") %> 
</div> 

Welches den richtigen Bild-Tag erzeugen würde:

<div> 
    <img src="/images/myImage.png" alt="MyImage" width="200" height="100" /> 
</div> 

Irgendwo in Ihrem Python Sie definieren:

def addImg(imgPath): 
    #do image processing here 

Answer 2

Wenn Photoshop einen ordentlichen Job macht, kann es am einfachsten sein, nur die Ausgabe zu verarbeiten von dort, mit einer Regex oder etwas, um die Probleme darin zu beheben. Dies wäre wahrscheinlich einfacher als der Versuch, diese Funktionalität von Grund auf neu zu implementieren.

Wenn Sie ein Beispiel für Photoshop HTML-Ausgabe veröffentlichen können, kann ich eine Regex-Suche/ersetzen, die es zu dem, was Sie suchen, konvertieren.

Answer 3

Hergestellt PHP-Skript:

<?php 

$images = scandir('images'); 

$txt = ''; 

$tmpl = '<img id="{{id}}" src="images/{{name}}">'; 
foreach($images as $image) { 

    $tag = $tmpl; 
    $tag = str_replace('{{id}}', explode('.', $image)[0], $tag); 
    $tag = str_replace('{{name}}', $image, $tag); 

    $txt .= $tag . "\n"; 
} 

file_put_contents('tags.txt', $txt); 

eine PHP-Datei erstellen und ausführen:

php script.php

Php-Skript als Bilder-Ordner in demselben Verzeichnis sein muss.

Sie erhalten Ihr Image Tas in der Datei tags.txt.