![\"\"](\"https:\/\/www.lieblos.de\/wp-content\/uploads\/2020\/06\/Walsrode_WieseWald-1-1200x415.jpg\")
Workflow ist folgender:<\/strong> Titel\/Title – \u00dcberschrift f\u00fcr das Bild<\/strong> Dann Fotos nach Reihenfolge in ein Verzeichnis exportieren und „.\/picturestory_generate DEINEFOTOS* > DEINHTMLFILE.html“ aufrufen, etwas warten und fertig.<\/p>\n\n\n\n Klingt einfach? Nein? Ja, dann benutze weiter irgend ein Klickieklicktool. Mir ist das zu viel Aufwand, zu viel Eierlegendewollmilchsau. Ich habs eben wieder probiert mit einem dieser „Generier Dir ganz schnell selbst ne Webseite mit Deinen Fotos“-Tools. Lange nicht mehr so viel geflucht \u00fcber Performance, Bedienung und Ergebnis. Da mach selbst ich als alter Mann ohne Programmierkenntnisse schneller – ja, ich machs nicht sch\u00f6n, aber zweckm\u00e4\u00dfig ; -)<\/p>\n\n\n\n Ich hab mir die Farben und das Layout im Skript mit CSS eingestellt, dies kann man schnell anpassen. Das Skript geht dann mit exiftool (https:\/\/exiftool.org\/) alle Fotos durch und packt sie untereinander. Sehr breite Fotos werden \u00fcber die ganze Breite des Browsers dargestellt. Vorangestellt jeweils der Titel und die Beschreibung. Fotos mit einer kleineren Breiten\/H\u00f6henratio werden neben Titel und Beschreibung dargestellt. Abwechselnd links und rechts.<\/p>\n\n\n\n Sollte ein Foto nicht als Panorama erkannt werden, weil die Ratioerkennung dazu neigt es als „Text-Daneben“-Foto darzustellen, so kann dem Foto in den Schlagw\u00f6rter \/ Keywords einfach das Wort PANORAMA hinzugef\u00fcgt werden. Schon erscheint das Foto auf ganzer Browserbreite. Bei Videos speichert zumindest mein verwendetes Tool (Apple Fotos) keine Keywords in den Videos. Das Skript unterst\u00fctzt trotzdem selbiges f\u00fcr Videos, man kann aber dem Titel eines Videos auch ein ! hinzuf\u00fcgen. Hat den selben Effekt: Es wird \u00fcber die volle browserbreite dargestellt.<\/p>\n\n\n\n Ja, ist irgendwie insgesamt sicherlich „ich war auch mal Unixadmin“-Rotz. Aber Rotz, der mir das Leben erleichtert.<\/strong> Und neudeutsch sehr lightweight-code, der da generiert wird ; )<\/p>\n\n\n\n Bei Fragen: Fragen. Beschreibungstexte muss man \u00fcbrigens noch selber schreiben, is ja nur SEMIautomatisiert ; -)<\/p>\n\n\n\n UPDATE 8.7.2020:<\/strong> Ich hab das mal \u00fcberarbeitet, damit es auch nen Video einbinden kann. Dazu etwas aufger\u00e4umt und CSS\/Konfig in getrennte Datei, damit man diese zu den einzelnen Berichten mit ablegen\/editieren kann.<\/p>\n\n\n\n UPDATE 9.7.2020<\/strong>: Mir war die Performance nicht so recht. Mit dieser Version generiert das Skript mit ca f\u00fcnfacher Geschwindigkeit. Daf\u00fcr gibt es zur zeit die Einschr\u00e4nkung, dass keine Anf\u00fchrungszeichen mehr in Titel und beschreibung verwendet werden k\u00f6nnen. Des weiteren ist „lazy loading“ aktiviert. bei modernen Browsern werden die vielen Daten nun nacheinander geladen. Sollte angenehmer f\u00fcr den Betrachter sein.<\/p>\n\n\n\n .\/picturestory_generate.sh:<\/p>\n\n\n\n Und hier die Configdatei .\/picturestory.config f\u00fcr meinen Bericht aus Walsrode, die kann dann angepasst werden:<\/p>\n\n\n\n … wollte ich hier nen Tourbericht von meiner Junitour mit der Gr\u00fcnenWelle niederschreiben, doch irgendwie passte mir das alles nicht, wie das so aussah, was f\u00fcr ein Aufwand das war, und sowieso. So ist es nun die Vorstellung eines kleinen Skriptes um solch Berichte semiautomatisiert herzustellen. Bei uns im B\u00fcro w\u00fcrde sowas 10tausende von Euro … \u201eEigentlich …\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,13,5],"tags":[],"class_list":["post-3769","post","type-post","status-publish","format-standard","hentry","category-lieblos","category-radfahren","category-techno"],"_links":{"self":[{"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/posts\/3769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3769"}],"version-history":[{"count":5,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/posts\/3769\/revisions"}],"predecessor-version":[{"id":3784,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/posts\/3769\/revisions\/3784"}],"wp:attachment":[{"href":"https:\/\/www.lieblos.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Fotos erstellen – nach hause bringen – rauf auf den Rechner – mit beliebiegem Fototool bearbeiten in gew\u00fcnschte Reihenfolge bringen und folgende Exif\/IPTC Felder f\u00fcllen:<\/p>\n\n\n\n
Beschreibung \/ Description – Beschreibung zum Bild<\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/www.lieblos.de\/wp-content\/uploads\/2020\/07\/picturestory-1176x1200.png\")
<\/figure>\n\n\n\n# .\/picturestory_generate.sh\n#\n# Generiert aus einer Liste von Fotos\/Videos eine Webseite, die auch IPTC Titel und Beschreibung einfuegt.\n# Alles andere an Tools war mir zu komplex um mal eben einen Radfahrbericht zu erstellen.\n#\n# 6.7.2020\tv1 Nur Fotos\n# 8.7.2020\tv2 Inkl Video und CSS dediziert, aufgeraeumt\n# 8.7.2020\tv2.1 Performanceoptimierung um das 5fache (exiftool nur 1x pro Datei, Pipe in Datei und Vars einsourcen)\n#\n# Benoetigt exiftool https:\/\/exiftool.org\/\n# und .\/picturestory_css\n# Datein muessen in Reihenfolge alphabetisch vorliegen: bild01.jpg bild02.jpg bild03.m4v bild05.jpg ...\n#\n# .\/picturestory_generate SOT_Walsrode* > SOT_Walsrode.html\n\n# Ohne Angabe von Datein gibt es Info ueber Benutzung und keine Ausfuehrung\nif [ $# -ge 1 ]; then\n\n# Config und CSS\n. .\/picturestory.config\n\n# Wir generieren mal den Anfang vom HTML ....\necho \"<!DOCTYPE html><html><head><meta http-equiv=content-type content=text\/html; charset=utf-8><title> $TITEL <\/title><style>\"\necho $CSSFORMAT\necho \"<\/style><\/head>\"\n\n# Wir (wer is eigentlich Wir?) generieren mal nen Block fuer Titel und Anreisser\necho \"<h1> $TITEL <\/h1>\"\necho \"<h4>\"\necho \"<i><b>$ANREISSER<\/i><\/b>\"\necho \"<\/h4>\"\n\n# Fuer jede angegebene Datei generieren wir ...\nfor bild in \"$@\"; do\n\nexiftool -Title -Description -ImageHeight -ImageWidth -Keywords \"$bild\" | awk -F \": \" '{ print \"IPTC\"NR\"=\\\"\"$2\"\\\";\" };' > \/tmp\/iptc.tmp\n. \/tmp\/iptc.tmp\n\nTITLE=$IPTC1\nDESCRIPTION=$IPTC2\nHOEHE=$IPTC3\nBREITE=$IPTC4\nKEYWOERTER=$IPTC5\n\n#DESCRIPTION=`exiftool -Description \"$bild\" | awk -F \" : \" '{ print $2 };'`\n#TITLE=`exiftool -Title \"$bild\" | awk -F \" : \" '{ print $2 };'`\n#HOEHE=`exiftool -ImageHeight \"$bild\" | awk -F \": \" '{ print $2 };'`\n#BREITE=`exiftool -ImageWidth \"$bild\" | awk -F \": \" '{ print $2 };'`\n#KEYWOERTER=`exiftool -Keywords \"$bild\"`\nRATIO=`echo $((BREITE \/ HOEHE))`\n\n# Wenn jpg dann 0 ansonsten 1 (Videoeinbettung)\necho $bild | grep \".jpg\" >\/dev\/null 2>&1\nif [ $? -eq 0 ]; then \n DATEITYP=0\nelse\n DATEITYP=1\nfi\n\n# Panoramacheck nach Ratio oder overruled durch Definition PANORAMA in Keywords oder ! in Titel (Apple Fotos packt keine Keywords in Video)\nif [ $RATIO -lt 2 ]; then\n PANO=0\nelse\nPANO=1\nfi\necho $KEYWOERTER | grep \"PANORAMA\" >\/dev\/null 2>&1\nif [ $? -eq 0 ]; then \n PANO=1\nfi\necho $TITLE | grep \"!\" >\/dev\/null 2>&1\nif [ $? -eq 0 ]; then \n PANO=1\nfi\n\necho \" \"\necho \" \"\n\n# Wenn Foto ...\nif [ $DATEITYP -eq 0 ]; then\n\n# ... und kein Panorama ...\nif [ $PANO -eq 0 ]; then\n\n# ... dann jeweils rechts\/links in Tabellenform darstellen\nif [ $RECHTSLINKS -eq 0 ]; then\n\necho \"<table><tr><td width=30%><h2 style=padding-left:60px; padding-right:0px> $TITLE <\/H2>\"\necho \"<p style=padding-left:60px; padding-right:0px> $DESCRIPTION <\/p> <\/td><td width=70%>\"\necho \"<img align=right src='$bild' loading=lazy width=70%><\/td><\/tr><\/table>\"\nRECHTSLINKS=1\n\nelse\necho \"<div><table><tr><td width=70%><img align=left src='$bild' loading=lazy width=70%>\"\necho \"<\/td><td><h2 style=padding-left:0px; padding-right:0px> $TITLE <\/H2>\"\necho \"<p style=padding-left:00px; padding-right:0px> $DESCRIPTION <\/p><\/td><\/tr><\/table><\/div>\"\nRECHTSLINKS=0\n\nfi \n# von rechtslinks\n\n# Oder in voller Breite\nelse\necho \"<h2> $TITLE <\/H2><p padding-right: 30%;> $DESCRIPTION <\/p><div><img src='$bild' loading=lazy width=100%><\/div>\"\n\nfi\n# von Ratiowert\n\n# else von Dateityp - Es folgt Video\nelse\necho \"<h2> $TITLE <\/H2><p padding-right: 30%;> $DESCRIPTION <\/p><center><video src=$bild\"\nif [ $PANO -eq 0 ]; then\necho \" width=50% controls>\"\nelse\necho \" width=100% controls>\"\nfi\necho \"Ihr Browser kann dieses Video nicht wiedergeben.<br\/>Sie k\u00f6nnen es unter <a href=\"#\">$bild<\/a> abrufen.\"\necho \"<\/video><\/center>\"\n\nfi\n# von Dateityp\n\ndone\n# schleife jede Datei\n\n# Wir generierend das Ende von HTML...\necho \"<h3>Diese kleine FotoLoveStory wurde generiert mit 'picturestory_generate'. Ein klitzekleines Skript von Sven.<br>\"\necho \"Siehe <a href=https:\/\/www.lieblos.de\/?p=3769>https:\/\/www.lieblos.de<\/A>, \"\necho `date`\necho \"<\/h3><\/body><\/html>\"\n\n# Benutzungshinweis\nelse\necho \".\/picturestory_generate PICTUREFILES \"\necho \"\"\necho \"Beispiel: .\/generate_picturestory SOT_Walsrode* > SOT_Walsrode.html\"\necho \"\"\necho \"Fotos muessen als *.jpg in alphabetischer Reihenfolge abgelegt sein.\"\necho \"Known-Bug: Anfuehrungszeichen in Titel und Beschreibung funktionieren nicht, daf\u00fcr nun 5x schneller!\"\necho \"Fuer jeden Bericht kann ein eigenes picturestory.config verwendet werden.\"\n\nfi \n# Overall\n\nrm \/tmp\/iptc.tmp\n<\/code><\/pre>\n\n\n\n#!\/bin\/bash\n# Inlay fuer picturestory_generate\n\n# EINSTELLUNGEN\n\nTITEL=\"Im Juni 2020 mit der Gr\u00fcnenWelle rund um Walsrode.\"\nANREISSER=\"SOT - Sven on Tour, 6 Tage, 750km\"\n\nRECHTSLINKS=0\n\n# CSS FORMATIERUNG\nCSSFORMAT=\"\nbody {\nbackground-color: #424242;\ncolor: white;\nmargin-left: 50px;\nmargin-right: 50px;\n}\n\nh1 {\nfont-size: 400%;\ncolor: #088A29;\ncolor: #31B404;\npadding-left: 50px;\npadding-top: 20px;\npadding-bottom: 0px;\n}\n\nh2 {\ncolor: white;\nfont-size: 200%;\ntext-align: left;\n}\n\np {\ncolor: #E6E6E6;\nfont-size: 150%;\npadding-right: 30%;\n}\n\ndiv {\npadding-bottom: 50px;\n}\n\nimg {\nborder:solid #2E2E2E 1px;\n}\n\nvideo {\npadding-bottom: 50px;\n}\n\nh3 {\ncolor: #6E6E6E;\nfont-size: 90%;\n}\n\nh4 {\npadding-top: 20px;\ncolor: #5E5E5E;\nfont-size: 150%;\npadding-left: 100px;\n}\n\na:link {\ncolor: #6E6E6E;\nfont-size: 90%;\n}\na:hover {\ncolor: #6E6E6E;\nfont-size: 90%;\n}\na:visited {\ncolor: #6E6E6E;\nfont-size: 90%;\n}\na:active {\ncolor: #6E6E6E;\nfont-size: 90%;\n}\n\"\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"