Bilder publizieren II

Im Beitrag Bilder publizieren wurden jahrgangsweise gespeicherte Bilder über ein Auswahlmenü angezeigt. Datum und Titel eines Bildes wurden aus dem Namen des eischließenden Ordners abgeleitet. Datum und Titel eines Bildes erfuhr man, wenn man das Bild in der Großansicht betrachtet hat. Diese ursprüngliche Aufgabenstellung wird nun geändert:

Ein einzelner Ordner enthält Bilder. Der Ordnername ist der Titel für diese Bildersammlung. Jedes Bild besitzt einen „sprechenden“ Namen, und dieser Name soll bereits in der Vorschau unterhalb des Bildes angezeigt werden.

Die hier beschriebene Datei zur Anzeige von Bilderordnern heißt album.htm und wurde für die Weiterverwendung hier gespeichert:

https://iam.at/d/album.htm

Bilder verkleinern

Originalbilder von Digitalkameras sind für eine flotte Anzeige vieler Bilder viel zu groß. Daher werden alle Bilder in verschiedenen Größen gespeichert. Die anzeigende Webseite wählt dann die gewünschte Bildgröße aus.

Das PowerShell-Programm BilderVerkleinern.ps1 verkleinert in der Funktion CreateThumbnails alle Bilder eines Quellordners und speichert sie in einem Zielordner mit den Größen 100, 200, 400, 800, 1600 px. Mit Funktion CreateThumbnail kann man auch ein einzelnes Bild verkleinern.

Voraussetzungen für einen Bildnamen: Jedes Bild muss die Dateiendung .jpg haben, .JPG, .jpeg sind nicht zulässig. Jeder Bildname kann mit einem Datum in der Form yyyy-mm-dd, gefolgt von einem Abstand, beginnen.

# Dateiname: BilderVerkleinern.ps1

Clear-Host

function ResizeImage {

    param (
        [string]$SourceName,
        [string]$SourcePath,
        [string]$ThumbPath,
        [string]$ThumbSize
    )
    $SourceName = $SourceName.ToLower()
    $ThumbName = $SourceName.Replace(".jpg", "-t$ThumbSize"+".jpg")
    $Resize = "-resize " + $ThumbSize + "x" + $ThumbSize + " "
    $Expression = "convert '$SourcePath$SourceName' $Resize '$ThumbPath$ThumbName'"
    # Write-Host $Expression
    Invoke-Expression $Expression
}

function ResizeImageAllSizes {

    param (
        [string]$SourceName,
        [string]$SourcePath,
        [string]$ThumbPath
    )

    ResizeImage -SourceName $SourceName -SourcePath $SourcePath -ThumbPath $ThumbPath -ThumbSize '1600'
    ResizeImage -SourceName $SourceName -SourcePath $SourcePath -ThumbPath $ThumbPath -ThumbSize '800'
    ResizeImage -SourceName $SourceName -SourcePath $SourcePath -ThumbPath $ThumbPath -ThumbSize '400'
    ResizeImage -SourceName $SourceName -SourcePath $SourcePath -ThumbPath $ThumbPath -ThumbSize '200'
    ResizeImage -SourceName $SourceName -SourcePath $SourcePath -ThumbPath $ThumbPath -ThumbSize '100'
}

function CreateThumbnails {

    param (
        [string]$Originale,
        [string]$Thumbnails
    )

    $i=0
    $SubFolderItems = Get-ChildItem $Originale
    foreach($Item in $SubFolderItems) {
        
        if ($Item.Extension -eq ".jpg") {

            ResizeImageAllSizes -SourceName $Item.Name -SourcePath $Originale -ThumbPath $Thumbnails 

            Write-Host " $i" -NoNewline
            if ((($i+1) % 10) -eq 0) { Write-Host }
            $i++
            # if ($i -gt 20) { exit }
        }
    }
}

function CreateThumbnail {

    param (
        [string]$Image,
        [string]$Originale,
        [string]$Thumbnails
    )

    ResizeImageAllSizes -SourceName $Image -SourcePath $Originale -ThumbPath $Thumbnails 

}
# CreateThumbnails -Originale "S:\Projekte\iam.at\data\ewkil\EwkiL-Erlebnisse\Originale\" -Thumbnails "S:\Projekte\iam.at\data\ewkil\EwkiL-Erlebnisse\"
# CreateThumbnail -Originale "S:\Projekte\iam.at\data\ewkil\EwkiL-Erlebnisse\Originale\" -Thumbnails "S:\Projekte\iam.at\data\ewkil\EwkiL-Erlebnisse\" -Image "2022-12-01 Team-Treffen mit Alexander Wrabetz.jpg"
# CreateThumbnail -Originale "S:\Projekte\iam.at\data\ewkil\EwkiL-Erlebnisse\Originale\" -Thumbnails "S:\Projekte\iam.at\data\ewkil\EwkiL-Erlebnisse\" -Image "2022-12-16 EwkiL Weihnachtsfeier mit Steffen Hofmann und Helmut Mitter.jpg"
# CreateThumbnail -Originale "S:\Projekte\iam.at\data\ewkil\EwkiL-Erlebnisse\Originale\" -Thumbnails "S:\Projekte\iam.at\data\ewkil\EwkiL-Erlebnisse\" -Image "2022-06-02 Überraschungsgast Christoph Peschek.jpg"
# CreateThumbnails -Originale "S:\Projekte\@PCNEWS\d.pcnews.at\wwwroot\ins\cov\jpg\" -Thumbnails "S:\Projekte\@PCNEWS\d.pcnews.at\wwwroot\ins\cov\jpg\thumb\"
# CreateThumbnails -Originale "S:\Projekte\iam.at\data\fiala\pano\2010-10-29 Scheibbs 25\" -Thumbnails "S:\Projekte\iam.at\data\fiala\pano\2010-10-29 Scheibbs 25\thumb\"
# CreateThumbnail -Image "Panorama25_pano_Stadt.jpg" -Originale "S:\Projekte\iam.at\data\fiala\pano\2010-10-29 Scheibbs 25\" -Thumbnails "S:\Projekte\iam.at\data\fiala\pano\2010-10-29 Scheibbs 25\thumb\"

Diese Verkleinerung der Bilder erfolgt am PC, das Verzeichnis der verkleinerten Bilder wird publiziert und muss mit Ftp auf den Server kopiert werden- Damit eine Webseite auf diese Bilder zugreifen kann, muss das Bildverzeichnis am Server auf „Verzeichnis durchsuchen erlaubt“ eingestellt sein. Wäre ein solcher Zugriff nicht möglich, müsste man die Dateinamen der Bilder explizit im Darstellungsprogramm bekannt geben. Außerdem muss das virtuelle Verzeichnis der verkleinerten Dateien den Header Access-Control-Allow-Origin * enthalten.

Anzeige der Bilder

Für die Anzeige der Bilder gibt es im Beitrag schon ausreichend Vorarbeiten. Der Unterschied soll sein, dass die Bilder mit einem Untertitel versehen werden, der aus dem Namen der Bilddatei extrahiert wird.

Für die Formatierung der Bilder verwenden wir die Bibliothek Bootstrap, die Komponente zur Anzeige eines Bildes mit Bezeichnung ist „Cards“. Unter den vielen Format-Beispielen wählen wir „Grid-Cards“:

Das Grid besteht aus dem Abschnitt „row“ und aus so vielen Abschnitten „col“ als es Bilder gibt. Die Bilder inklusive Beschriftung nehmen die gleiche Höhe ein und brechen automatisch in die nächste Zeile um, wenn der Platz nicht mehr ausreicht.

<div class="col">
	<div id="img#idx#" class="image" data-bs-toggle="modal" data-bs-target="#ImageModal">
		<div class="card" style="width: #wid#px; font-size: x-small; text-align:center;">
			<img src="#src#" class="card-img-top">
			<div class="card-body">
				<p class="card-text">#txt##dat#</p>
			</div>
		</div>
	</div>
</div>

Alle Miniaturbilder werden durch diesen Code angezeigt. Alle Bilder werden durch <div class="row">...</div> eingeschlossen. Die Werte für #idx#, #wid#, #src#, #txt# und #dat# werden durch ein JavaScript-Programm beim Laden der Seite substituiert.

Seite album.htm

<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes">
	<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
	<style>
		body { background-color:#222; color:white}
		p { color: white}
		.btn-close { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fc0'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; }
		.card-body { background-color: rgb(33, 33, 33); }
		.card-body p {color: white}
		.card { border-color: rgb(33, 33, 33);}
		.slidelarge {background-color:#222;color:#eee }
	</style>
</head>
<body>
<div class="modal fade" id="ImageModal" tabindex="-1" aria-labelledby="bigimageTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header slidelarge">
        <h1 class="modal-title fs-5" id="bigimageTitle"></h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body slidelarge">
	<div class="container-fluid">
		<div class="position-relative text-center"> 
			<img id="bigimage" src="" class="img-fluid rounded">
			<div class="position-absolute top-50 start-0" style="text-align:right">
				<span class="material-icons bck" style="font-size:48pt">arrow_back_ios</span>
			</div>
			<div class="position-absolute top-50 end-0" style="text-align:right">
				<span class="material-icons fwd" style="font-size:48pt">arrow_forward_ios</span>
			</div>
		</div>
	</div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid" style="padding-left:40px;padding-right:40px;">
	<h1 id="title" title=""></h1>
	<div id="Images" class="row" class="align-items-center">
	</div>
	<hr>
	<div>
		Franz Fiala, Siccardsburggasse 4/1/22, 1100 Wien, 0664-1015070, franz@fiala.cc, http://franz.fiala.cc
	</div>
</div>
<script>
/* <!-- */
	var ImgTemplate = 
	`<div class="col">
		<div id="img#idx#" class="image" data-bs-toggle="modal" data-bs-target="#ImageModal">
			<div class="card" style="width: #wid#px; font-size: x-small; text-align:center;">
				<img src="#src#" class="card-img-top">
				<div class="card-body">
					<p class="card-text">#txt##dat#</p>
				</div>
			</div>
		</div>
	</div>`

	var UrlImageDirectory = ""
	var UrlServer = ""
	var Images = []
	var Images_Length = 0
	var ImageIndex = -1
	var size_slide = 200
	var size_preview = 1600
	const Extension = ".jpg"
	var CaptionFileName = ""
	function Image(Fil,Dat,Tit,Ext,Url) {
		this.Fil = Fil
		this.Dat = Dat
		this.Tit = Tit
		this.Ext = Ext
		this.Url = Url
	}
	function htmlDecode(input) {
		var doc = new DOMParser().parseFromString(input, "text/html");
		return doc.documentElement.textContent;
	}
	function ChangeImage() {
		$("#bigimage").attr("src",Images[ImageIndex].Url.replace(".jpg","-t"+size_preview+".jpg"))
		$("#bigimageTitle").html(Images[ImageIndex].Tit 
			+ (Images[ImageIndex].Dat == null 
			? ""
			: " <i>("+Images[ImageIndex].Dat+")</i>"))
	}
	function ShowImages() {

		$('#Images').html("")

		Images.forEach (function (Img,idx) {
			
			var ImageLinkThumb = Img.Url.replace(Extension,"-t"+size_slide+Extension)
			var ImageLinkPreview = Img.Url.replace(Extension,"-t"+size_preview+Extension)  
			var html = ImgTemplate.replace(/#img#/g,ImageLinkPreview)
			html = html.replace(/#src#/g,ImageLinkThumb)
			html = html.replace(/#txt#/g,Img.Tit)
			html = html.replace(/#wid#/g,size_slide)
			if (Img.Dat==null) {
				html = html.replace(/#dat#/g,"")
			} else {
				html = html.replace(/#dat#/g," <i>(" + Img.Dat + ")</i>")
			}
			html = html.replace(/#idx#/g,idx)
			html = html.replace(/#mod#/g,"modal-xl")
			$('#Images').append(html)
		})
		$(".image").click(function() {
			var id = this.id.replace("img","")
			$("#bigimage").attr("src",Images[id].Url.replace(".jpg","-t"+size_preview+".jpg"))
			ImageIndex = id
			ChangeImage()
		})
		$(".fwd").click(function(){
			if (ImageIndex==Images_Length-1) return
			ImageIndex++
			ChangeImage()
		})
		$(".bck").click(function(){
			if (ImageIndex==0) return
			ImageIndex--
			ChangeImage()
		})
	}
	function ReadCaption() {
		$.get(UrlImageDirectory+'caption.txt', function(data) {
			const data_parts = data.split('\n')
			for (var c=0; c<data_parts.length; c++) {
				const line = data_parts[c]
				const line_parts = line.split('#')
				if (line_parts.length>=2) {
					const ImageName = line_parts[0].toLowerCase()
					const ImageCaption = line_parts[1]
					for (var i=0; i<Images.length; i++) {
						if (Images[i].Fil==ImageName) {
							Images[i].Tit = ImageCaption
							continue
						}
					}
				}
			}
		}, 'text');		
	}
	function ReadImages() {
		while (Images.length>0) Images.pop()
		$.get(UrlImageDirectory, function (result) {
			var regexp = new RegExp(/<A[^<]+?\..+?A>/gi)
			matches_array = result.match(regexp)
			if (matches_array!=null) {
				var Length = matches_array.length
				for (var i=0; i<Length; i++) {
					var Img = matches_array[i]
					if (!Img.includes("-t100")) continue
					Img = Img.replace(/-t100/g,"")
					// var regex = new RegExp(">(.+)"+Extension, "ig")
					// var Fil = Img.match(regex)
					var Fil = Img.match(/>(.+).jpg/)[1].toLowerCase()
					var Dat = null
					var Tit = ""
					if (Fil.includes(" ")) {
						Dat = Fil.match(/([^ ]+) /)[1]
						Tit = Fil.match(/ (.+)/)[1]
					} else {
						Dat = null
						Tit = Fil.match(/(.+)/)[1]
					}
					var Ext = Extension
					var Url = UrlServer + Img.match(/HREF="(.+)"/)[1]
					//Url = htmlDecode(Url)
					Images.push(new Image(Fil,Dat,Tit,Ext,Url))
					Images.sort(function(a,b){
						if (a.Dat<b.Dat) return 1
						if (a.Dat>b.Dat) return -1
						return 0
					})
				}
				if (CaptionFileName!="") ReadCaption()
				ShowImages()
			}
		})
	}
	function GetHelp() {
		var text = `<h2>album.htm</h2>
			<p style="color:white;">Diese Datei zeigt Bilder in Webverzeichnissen an,
			sofern man diese Verzeichnisse durchsuchen kann.</p>
			<table class="table-dark">
			<tr><td>Parameter</td><td>Default</td><td>Werte</td><td>Bedeutung</td></tr>
			<tr><td>u</td><td></td><td>&lt;url&gt;</td><td>Bilderordner der verkleinerten Bilder (erforderlich)</td></tr>
			<tr><td>s</td><td>200</td><td>100,200,400</td><td>Größe des Vorschaubildes</td></tr>
			<tr><td>p</td><td>1600</td><td>400,800,1600</td><td>Größe des vergrößerten Bildes</td></tr>
			<tr><td>c</td><td></td><td>caption.txt</td><td>Beschriftungsdatei. Wenn die Datei nicht angegeben wird, werden die Bilder nur mit dem Dateinamen beschriftet.</td></tr>
			</table>
			<p>Aufruf mit http (wichtig!): <a style="color:white;" target="_blank"href="http://iam.at/d/album.htm">http://iam.at/d/album.htm</a></p>
			<h3>Beispiele</h3>
			<ul>
			<li><a style="color:white;" target="_blank" href="http://iam.at/d/album.htm?u=http://iam.at/d/fiala/pano/2010-10-29%20Scheibbs%2025/thumb/&s=400&p=1600"
			>Panorama Scheibbs</a></li>
			<li><a style="color:white;" target="_blank" href="http://iam.at/d/album.htm?u=https://iam.at/d/ewkil/EwkiL-Erlebnisse/&s=400&p=1600"
			>Treffen eines Rapid-Fanklubs</a></li>
			<li><a style="color:white;" target="_blank" href="http://iam.at/d/album.htm?u=http://d.pcnews.at/ins/cov/jpg/thumb/&s=100&p=800"
			>PCNEWS-Cover ohne Beschriftung</a></li>
			<li><a style="color:white;" target="_blank" href="http://iam.at/d/album.htm?u=http://d.pcnews.at/ins/cov/jpg/thumb/&s=100&p=800&c=caption.txt"
			>PCNEWS-Cover mit Beschriftung</a></li>
			<li><a style="color:white;" target="_blank" href="https://clubcomputer.at/2023/10/18/bilder-publizieren-ii/">Dokumentation zu album.htm</a></li>
			</ul>
			`
		$("#Images").html(text)
	}
	function GetUrl() {
		var url_string = location.href
		var url_host = location.host
		var url = new URL(url_string)
		var u = url.searchParams.get("u")
		if (u == null) {
			GetHelp()
		} else {
			UrlImageDirectory = u	
			var url1 = new URL(UrlImageDirectory)
			UrlServer = url1.protocol+"//"+url1.host
			var s = url.searchParams.get("s")
			if (s != null) {
				size_slide = s	
			}
			var p = url.searchParams.get("p")
			if (p != null) {
				switch (p) {
					default:
						break
					case "100":
						$("#ImageModal").addClass("modal-xl")
						size_preview = p
						break
					case "200":
						$("#ImageModal").addClass("modal-sm")
						size_preview = p
						break
					case "400":
						size_preview = p
						break
					case "800":
						$("#ImageModal").addClass("modal-lg")
						size_preview = p
						break
					case "1600":
						$("#ImageModal").addClass("modal-xl")
						size_preview = p
						break
				}
			}
			var c = url.searchParams.get("c")
			if (c != null) {
				CaptionFileName = c
			}
			ReadImages()
		}
	}
	/* Das Protokoll wird nicht - wie gewünscht - auf http gewechselt, man muss das händisch machen
	if (location.protocol == 'https:') {
    		location.href = "http:"+location.href.substring(location.protocol.length)
	}
	*/
    	GetUrl()
/* --> */
</script>
</body>
</html>

Der Code dieser Datei kann sich verändern, bitte die Datei von http://iam.at/d/album.htm herunterladen.

Beispiele

Treffen eines Rapid-Fanklubs

In diesem Beispiel ist der Name des Bildes auch gleichzeitig die Beschriftung bei der Anzeige.

https://iam.at/d/album.htm?u=https://iam.at/d/ewkil/EwkiL-Erlebnisse/&s=400&p=1600

Bildunterschriften

Bei den bisherigen Beispielen waren die Bildnamen auch gleichzeitig die Bildbeschriftung. Bei Beispiel „Panorama Scheibbs“ und „PCNEWS-Cover“ wurden die ursprünglichen Bildnamen nicht verändert. Bei Beispiel „Treffen eines Rapid-Fanklubs“ wurden die ursprünglichen Bildnamen durch sprechende Bezeichnungen ersetzt.

Bei vielen Bildern ist aber das Umbenennen der einzelnen Bilder unpraktisch. Hier wird die Möglichkeit vorgestellt, dass alle Bildunterschriften in einer getrennten Datei gespeichert werden. Als Beispiel werden die PCNEWS-Cover verwendet. Damit kann man die Bildbeschreibung auch gleichzeitig einer Formatierung unterziehen.

001#<b><a href='http://d.pcnews.at/_pdf/n1.pdf' target='_blank'>PCNEWS-1</a></b> <i>(1986)</i><br>Eine neue Welt
002#<b><a href='http://d.pcnews.at/_pdf/n2.pdf' target='_blank'>PCNEWS-2</a></b> <i>(1986)</i><br>Maskottchen
003#<b><a href='http://d.pcnews.at/_pdf/n3.pdf' target='_blank'>PCNEWS-3</a></b> <i>(1986)</i><br>Räuber/Beute
004#<b><a href='http://d.pcnews.at/_pdf/n4.pdf' target='_blank'>PCNEWS-4</a></b> <i>(1986)</i><br>Fraktale-1
005#<b><a href='http://d.pcnews.at/_pdf/n5.pdf' target='_blank'>PCNEWS-5</a></b> <i>(1987)</i><br>Fraktale-2
006#<b><a href='http://d.pcnews.at/_pdf/n6.pdf' target='_blank'>PCNEWS-6</a></b> <i>(1987)</i><br>Gebirge
007#<b><a href='http://d.pcnews.at/_pdf/n7.pdf' target='_blank'>PCNEWS-7</a></b> <i>(1987)</i><br>Utilities
008#<b><a href='http://d.pcnews.at/_pdf/n8.pdf' target='_blank'>PCNEWS-8</a></b> <i>(1987)</i><br>Fusionen
009#<b><a href='http://d.pcnews.at/_pdf/n9.pdf' target='_blank'>PCNEWS-9</a></b> <i>(1988)</i><br>DFÜ
010#<b><a href='http://d.pcnews.at/_pdf/n10.pdf' target='_blank'>PCNEWS-10</a></b> <i>(1988)</i><br>Diverses
011#<b><a href='http://d.pcnews.at/_pdf/n11.pdf' target='_blank'>PCNEWS-11</a></b> <i>(1988)</i><br>PD/Shareware
012#<b><a href='http://d.pcnews.at/_pdf/n12.pdf' target='_blank'>PCNEWS-12</a></b> <i>(1988)</i><br>Turbo-Pascal
013#<b><a href='http://d.pcnews.at/_pdf/n13.pdf' target='_blank'>PCNEWS-13</a></b> <i>(1989)</i><br>Viren
014#<b><a href='http://d.pcnews.at/_pdf/n14.pdf' target='_blank'>PCNEWS-14</a></b> <i>(1989)</i><br>Gurus
015#<b><a href='http://d.pcnews.at/_pdf/n15.pdf' target='_blank'>PCNEWS-15</a></b> <i>(1989)</i><br>PD-Sammlung
016#<b><a href='http://d.pcnews.at/_pdf/n16.pdf' target='_blank'>PCNEWS-16</a></b> <i>(1989)</i><br>PC-SIG
017#<b><a href='http://d.pcnews.at/_pdf/n17.pdf' target='_blank'>PCNEWS-17</a></b> <i>(1990)</i><br>BTX-Aussendung
018#<b><a href='http://d.pcnews.at/_pdf/n18.pdf' target='_blank'>PCNEWS-18</a></b> <i>(1990)</i><br>Assembler
019#<b><a href='http://d.pcnews.at/_pdf/n19.pdf' target='_blank'>PCNEWS-19</a></b> <i>(1990)</i><br>Numerik
020#<b><a href='http://d.pcnews.at/_pdf/n20.pdf' target='_blank'>PCNEWS-20</a></b> <i>(1990)</i><br>C++ - 1
021#<b><a href='http://d.pcnews.at/_pdf/n21.pdf' target='_blank'>PCNEWS-21</a></b> <i>(1991)</i><br>C++ - 2
022#<b><a href='http://d.pcnews.at/_pdf/n22.pdf' target='_blank'>PCNEWS-22</a></b> <i>(1991)</i><br>C++ - 3
023#<b><a href='http://d.pcnews.at/_pdf/n23.pdf' target='_blank'>PCNEWS-23</a></b> <i>(1991)</i><br>Kunsttheorie
024#<b><a href='http://d.pcnews.at/_pdf/n24.pdf' target='_blank'>PCNEWS-24</a></b> <i>(1991)</i><br>8051
025#<b><a href='http://d.pcnews.at/_pdf/n25.pdf' target='_blank'>PCNEWS-25</a></b> <i>(1991)</i><br>C++ - 4
...

Jede Zeile beschreibt ein Bild (Reihenfolge egal) und hat folgenden Aufbau:

<NameDerBilddatei>#<Bildbeschreibung>

Beispielzeile:

013#<b><a href='http://d.pcnews.at/_pdf/n13.pdf' target='_blank'>PCNEWS-013</a></b> <i>(1989)</i><br>Viren

„013“ ist der Name der Bilddatei. (Im Namen darf kein Zeichen ‚#‘ vorkommen)
„#“ ist ein Trennzeichen
<a href…Viren Beschriftung des Bildes. Die erste Zeile lautet; „PCNEWS:013 (1989)“, die zweite Zeile „Viren“, Die Verwendung des HTML-Format ist nicht zwingend, man hätte auch einfach „PCNEWS-013 (1989) Viren“ ohne weitere Formatierung schreiben können, dann wird dieser Text durch das Anzeigeprogramm formatiert.

Sonderfall PCNEWS

Aus einer Datenbank mit allen PCNEWS-Ausgaben erhält man den Dateinamen (Spalte A), den Titel (Spalte B), das Jahr (Spalte C) und die Ausgabennummer ohne führende Nullen (Spalte D). Diese vier Spalten übertragt man in eine Excel-Tabelle.

Diese Spalte E wird aus den Inhalten der Spalten A bis D mit folgender Formel gebildet:

=A1&"#<b><a href='http://d.pcnews.at/_pdf/n"&D1&".pdf' target='_blank'>PCNEWS-"&A1&"</a></b> <i>("&C1&")</i>"&"<br>"&B1

Die Datei caption.txt ist der Inhalt der Spalte E:

Man hätte diese Formatierungsaufgabe auch dem Bildausgabeprogramm übertragen können, doch handelt es sich bei den Coverbildern der PCNEWS um einen Sonderfall. Damit das Programm universell verwendbar ist, wurde diese Aufgabe vorweggenommen.

Aufruf

Beispiel

PCNEWS-Cover mit Beschriftung

https://iam.at/d/album.htm?u=https://d.pcnews.at/ins/cov/jpg/thumb/&s=100&p=800&c=caption.txt

Parameter

Parameter	Default	Mögliche Werte	Bedeutung
u			Bilderordner der verkleinerten Bilder
s	200	100,200,400	Größe des Vorschaubildes
p	1600	400,800,1600	Größe des vergrößerten Bildes
c		caption.txt	Beschriftungsdatei. Wenn die Datei nicht angegeben wird, werden die Bilder nur mit dem Dateinamen beschriftet.

Weiterverwendung

Die Datei, die diese Bilder anzeigt, ist album.htm, gespeichert als http://iam.at/d/album.htm. Jeder, der eine Bildersammlung in einem Web-Ordner hat, kann diese Datei album.htm benutzten. Durch den Parameter u gibt man bekannt, wo sich die Bilder befinden, und schon werden die Bilder angezeigt.

Voraussetzung

Die anzuzeigenden Bilder müssen mit dem PowerShell-Programm BilderVerkleinern.ps1 in die Vorschaubilder verkleinert werden

Die Bilder müssen sich in einem durchsuchbaren Ordner im Internet befinden. Mitglieder mit einem eigenen Webspace legen dazu einen Ordner im Ordner wwwroot an, speichern dort die Vorschaubilder und gegebenenfalls die Datei für die Bildernamen. Damit die Bilder auch von der Datei album.htm gelesen werden können, muss man wwwroot durchsuchbar machen. Man öffnet das WebsitePanel (https://panel.ccc.at), loggt sich ein und öffnet die Einstellungen im Menüpunkt Website und aktiviert „Enable DIrectory Browsing“:

Diese Freigabe zum Durchsuchen wirkt aber auf alle Inhalte des Ordners wwwroot. Damit ein benachbarter Ordner, der zum Beispiel private Bilder enthält, nicht ebenfalls für alle sichtbar ist, muss in diesen Ordner eine Startdatei, zum Beispiel default.htm kopieren. Damit sieht ein Besucher nur den Inhalt der Startdatei, nicht aber die Dateien, die sich in dem Ordner befinden.

Wenn zum Beispiel WordPress in wwwroot installiert ist, dann ist es nicht empfehlenswert, dort einen Bilderordner hineinzukopieren. In diesem Fall ist es empfehlenswert, eine Virtuelle App zu definieren, die nur für solche öffentlichen Bilder zuständig ist.

Hinweis

Damit die Datei album.htm auf die Bilder in fremden Verzeichnissen zugreifen kann, muss dieses fremde Verzeichnis durchsuchbar sein. Diese Einstellung muss man in am Server vornehmen (bei ClubComputer über das Panel). Unser Server ist ein Microsoft-Server, der den Inhalt eines Verzeichnisses auf eine ganz typische Art wiedergibt. Sollte ich dieses fremde Verzeichnis auf einem Linux-Server befinden, ist es wahrscheinlich nötig, die Suchkriterien für den Dateienamen anzuspassen.

Franz Fiala

Franz war pensionierter HTL Lehrer (TGM), Präsident von ClubComputer, Herausgeber der Clubzeitung PCNEWS und betreute unser Clubtelefon und Internet Support. Er war leidenschaftlicher Rapid Wien Fan. Er ist leider Anfang Jänner 2024 nach langer schwerer Krankheit verstorben.

Bilder publizieren II

Bilder publizieren II

Bilder verkleinern

Anzeige der Bilder

Seite album.htm

Beispiele

Treffen eines Rapid-Fanklubs

PCNEWS-Cover

BYTE-Cover 1983-1994

Panorama Scheibbs

Bildunterschriften

Sonderfall PCNEWS

Aufruf

Beispiel

PCNEWS-Cover mit Beschriftung

Parameter

Weiterverwendung

Voraussetzung

Verwandte Themen

Hinweis

Kommentar absenden Antworten abbrechen

Neueste Beiträge

Neueste Kommentare

Bilder publizieren II

Bilder publizieren II

Bilder verkleinern

Anzeige der Bilder

Seite album.htm

Beispiele

Treffen eines Rapid-Fanklubs

PCNEWS-Cover

BYTE-Cover 1983-1994

Panorama Scheibbs

Bildunterschriften

Sonderfall PCNEWS

Aufruf

Beispiel

PCNEWS-Cover mit Beschriftung

Parameter

Weiterverwendung

Voraussetzung

Verwandte Themen

Hinweis

Kommentar absenden Antworten abbrechen

Neueste Beiträge

Neueste Kommentare

Schlagwörter