- Einschränkung auf einzelne Seiten, Tage und userHashes

modified: redesign2018/markdownExperiment/admin/phpcount/phpcountLog.php - vergeblicher Versuch die fehlerhafte Anzeige bei deaktiviertem JS zu beheben modified: redesign2018/markdownExperiment/phpLib/imgGallery/index.php.tmpl - Anpassungen von Hand für einzelne Spezialfälle (@todo eifachere Individualkonfiguration) modified: redesign2018/markdownExperiment/src/Makefiles/Makefile.ftpUpload modified: redesign2018/markdownExperiment/src/Makefiles/Makefile.vidstabTest - Konzept einer neuen Videogalerie modified: redesign2018/markdownExperiment/src/galleryHelper/getVideoDurationJson.py new file: redesign2018/markdownExperiment/src/galleryHelper/videoGallery.tmpl.php new file: redesign2018/markdownExperiment/src/galleryHelper/videoGalleryVue.tmpl.php new file: redesign2018/markdownExperiment/src/galleryHelper/yamlRead.py
2018-12-05 12:55:32 +01:00
parent 9b1a33ab0f
commit 9c2af1f3bf
8 changed files with 566 additions and 52 deletions
--- a/homepage/redesign2018/markdownExperiment/admin/phpcount/phpcountLog.php
+++ b/homepage/redesign2018/markdownExperiment/admin/phpcount/phpcountLog.php
@@ -13,47 +13,70 @@ try{
 		$cwsvJudoConfig["db"]["password"]
 	);
 	
-	$nodupesQuery = $dbConnection->prepare(
-		"SELECT COUNT(*) AS anz, DATE(FROM_UNIXTIME( time )) as date FROM `phpcount_nodupes` GROUP BY date ORDER BY date DESC"
+	$dailyHitsQuery = $dbConnection->prepare(
+		"SELECT COUNT(*) AS anz, DATE(timeStamp) as date FROM `phpcount_pageHits` GROUP BY date ORDER BY date DESC;"
 	);
-	$nodupesQuery->execute();
-	$nodupesList = $nodupesQuery->fetchAll(PDO::FETCH_ASSOC);
-
+	$dailyHitsQuery->execute();
+	$dailyHitsList = $dailyHitsQuery->fetchAll(PDO::FETCH_ASSOC);
+/*
 	$uniqueHitsQuery = $dbConnection->prepare(
 		"SELECT pageid, hitcount FROM `phpcount_hits` WHERE isunique=1 ORDER BY hitcount DESC"
 	);
 	$uniqueHitsQuery->execute();
 	$uniqueHitsList = $uniqueHitsQuery->fetchAll(PDO::FETCH_ASSOC);
+*/
+	$whereClauses=array();
+	if($_GET['userHash'])
+		$whereClauses[]="userHash='".$_GET['userHash']."'";
+	if($_GET['date'])
+		$whereClauses[]="DATE(timestamp)='".$_GET['date']."'";
+	if($_GET['pageId'])
+		$whereClauses[]="pageId='".urldecode($_GET['pageId'])."'";
+	
+	$whereClause = join(" AND ", $whereClauses);
 	
 	$pagehitsQuery = $dbConnection->prepare(
-		"SELECT timeStamp, pageId, userHash FROM `phpcount_pageHits` ORDER BY timeStamp DESC;"
+		"SELECT DATE(timeStamp) as date, TIME(timestamp) as time, pageId, userHash FROM `phpcount_pageHits` ".
+		($whereClause?"WHERE ".$whereClause." ":"").
+		"ORDER BY timeStamp DESC;"
 	);
 	$pagehitsQuery->execute();
 	$pagehitsList = $pagehitsQuery->fetchAll(PDO::FETCH_ASSOC);
+
+//	var_dump($_GET);
+	if($_GET['action']=="deleteHitter"){
+		//var_dump($_GET['action']);
+		$deleteHitterQuery = $dbConnection->prepare(
+			"DELETE FROM `phpcount_pageHits` WHERE userHash=:userHash;"
+		);
+		$deleteHitterQuery->bindParam(':userHash', $_GET['userHash']);
+		if($deleteHitterQuery->execute());
+		else echo("FEHLER\n");
+	}
 }
 catch(PDOException $db_error){
 	die( "Error!: " . $db_error->getMessage() );
 }
+//var_dump($dailyHitsList);
 ?>
 <html>
 	<body>
 		<img src="visitorCount.phplot.php" />
+		<a href="?">RESET</a>
+		<?php if(isset($_GET['userHash']))?><form action="./phpcountLog.php"><input type="hidden" name="userHash" id="userHash" value="<?php echo($_GET['userHash']);?>"><input type="hidden" name="action" id="action" value="deleteHitter"><button type="submit">DeleteHitter</button></form>
 		<table>
-			<tr><th>date</th><th>times</th></tr>
-<?php foreach($nodupesList as $nodupesEntry)
-				echo( "\t\t\t\t<tr><td>".$nodupesEntry['date']."</td><td>".$nodupesEntry['anz']."<td></tr>" );
-?>
+			<tr><th><?php echo( join( "</th><th>", array_column($dailyHitsList, 'date') ) );?></th></tr>
+			<tr><td><?php echo( join( "</td><td>", array_column($dailyHitsList, 'anz') ) );?></td></tr>
 		</table>
+		<hr />
 		<table>
-			<tr><th>Seite</th><th>times</th></tr>
-<?php foreach($uniqueHitsList as $uniqueHitsEntry)
-				echo( "\t\t\t\t<tr><td>".$uniqueHitsEntry['pageid']."</td><td>".$uniqueHitsEntry['hitcount']."<td></tr>" );
-?>
-		</table>
-		<table>
-			<tr><th>timeStamp</th><th>pageId</th><th>userHash</th></tr>
+			<tr><th>date</th><th>time</th><th>pageId</th><th>userHash</th></tr>
 <?php foreach($pagehitsList as $pagehitsEntry)
-				echo( "\t\t\t\t<tr><td>".$pagehitsEntry['timeStamp']."</td><td>".$pagehitsEntry['pageId']."</td><td>".substr($pagehitsEntry['userHash'], 0, 5)."...<td></tr>" );
+				echo( "\t\t\t\t<tr>".
+					"<td><a href=\"?date=".$pagehitsEntry['date']."\">".$pagehitsEntry['date']."</a></td>".
+					"<td>".$pagehitsEntry['time']."</td>".
+					"<td><a href=\"?pageId=".urlencode( $pagehitsEntry['pageId'] )."\">".urldecode($pagehitsEntry['pageId'])."</a></td>".
+					"<td><a href=\"?userHash=".$pagehitsEntry['userHash']."\">".substr($pagehitsEntry['userHash'], 0, 5)."...</a><td></tr>" );
 ?>
 		</table>
 	</body>
--- a/homepage/redesign2018/markdownExperiment/phpLib/imgGallery/index.php.tmpl
+++ b/homepage/redesign2018/markdownExperiment/phpLib/imgGallery/index.php.tmpl
@@ -3,6 +3,9 @@
 	
 	require_once($basePath."/config/phpcount.config.php");
 	require_once($basePath."/config/cwsvJudo.config.php");
+	
+	include_once("config.inc.php");
+	
 	require_once($basePath."/ressourcen/phpLib/phpcount/phpcount.php");

 function startsWith($haystack, $needle){
@@ -314,14 +317,8 @@ return $retVal;
 				imgList,
 				{
 					onslide: function (index, slide) {
-						var counterUrl = "/expCounter/counter.php";
 						var pageUrl = encodeURIComponent( window.location.href ) + "?index=" + index.toString();
 						var pageTitle = document.title + " [" + index.toString() + "]";
-						var callUrl = counterUrl + "?jscode_version=1.2&chCounter_mode=js&status=active&visible=0&page_title=" + pageTitle + "&page_url=" + pageUrl;
-						
-						var xmlHttp = new XMLHttpRequest();
-						xmlHttp.open("GET", callUrl, true); // true for asynchronous 
-						xmlHttp.send(null);
 					},
 					startSlideshow: true,
 					stretchImages: true,
--- a/homepage/redesign2018/markdownExperiment/src/Makefiles/Makefile.ftpUpload
+++ b/homepage/redesign2018/markdownExperiment/src/Makefiles/Makefile.ftpUpload
@@ -1,15 +1,27 @@
+# Upload der Videogalleriedateien auf einen Webspace und Eintragen in 
+# die "Videodatenbank"
+
 include Makefile.cfg

-ftpServer = ftpupload.net
-ftpUser = unaux_22935783
-ftpPassword = eeloor0D
+#ftpServer = ftpupload.net
+#ftpUser = unaux_22935783
+#ftpPassword = eeloor0D
+#httpUrlBase = http://cwsvjudo-media-2018.unaux.com/

-ftpPathBase = /htdocs
+
+ftpServer = cwsvjudo.bplaced.net
+ftpUser = cwsvjudo
+ftpPassword = ***REMOVED***
+httpUrlBase = http://cwsvjudo.bplaced.net.net/
+
+#ftpPathBase = /htdocs
+ftpPathBase = /www
 ftpFilePath = videoalben/videoalben.2018

 vidGalIndexPhp = /d/temp/cwsvJudo/homepage/redesign2018/markdownExperiment/src/galleryTemplates/indexHier.php
 dryRun = --dry-run
 timeHandling= --only-newer
+lftpNetLimitRate = 0

 vidGalInsertScript = /d/temp/cwsvJudo/homepage/redesign2018/markdownExperiment/src/galleryHelper/vidGalInsert.py

@@ -20,14 +32,14 @@ all:

 .PHONY: ftpUpload
 ftpUpload:
-	lftp -e 'set net:limit-rate 25600; mkdir -f $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR); mkdir -f $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/thumbnails; mkdir -f $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/webm; put $(vidGalIndexPhp) -o $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/index.php; put videos/config.inc.php -o $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/config.inc.php; mirror $(dryRun) $(timeHandling) -R videos/thumbnails $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/thumbnails; mirror $(dryRun) $(timeHandling) -R videos/webm $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/webm; quit; ' \
+	lftp -e 'set net:limit-rate $(lftpNetLimitRate); mkdir -f $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR); mkdir -f $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/thumbnails; mkdir -f $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/webm; put $(vidGalIndexPhp) -o $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/index.php; put videos/config.inc.php -o $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/config.inc.php; mirror $(dryRun) $(timeHandling) -R videos/thumbnails $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/thumbnails; mirror $(dryRun) $(timeHandling) -R videos/webm $(ftpPathBase)/$(ftpFilePath)/$(VID_GAL_DIR)/webm; quit; ' \
 		-u $(ftpUser),$(ftpPassword) ftp://$(ftpServer)
 	
-#	for file in videos/webm/*; do \
-#		filename=$${file##*/}; \
-#		$(vidGalInsertScript) \
-#			--shiaiYamlFile=./shiaiData.yaml \
-#			--vidUrl="http://cwsvjudo-media-2018.unaux.com/$(ftpFilePath)/$(VID_GAL_DIR)/webm/$${filename}" \
-#			--posterUrl="http://cwsvjudo-media-2018.unaux.com/$(ftpFilePath)/$(VID_GAL_DIR)/thumbnails/$${filename%.*}.jpg" \
-#			--checkSum=$${filename%.*};\
-#	done;\
+	for file in videos/webm/*; do \
+		filename=$${file##*/}; \
+		$(vidGalInsertScript) \
+			--shiaiYamlFile=./shiaiData.yaml \
+			--vidUrl="$(httpUrlBase)/$(ftpFilePath)/$(VID_GAL_DIR)/webm/$${filename}" \
+			--posterUrl="$(httpUrlBase)/$(ftpFilePath)/$(VID_GAL_DIR)/thumbnails/$${filename%.*}.jpg" \
+			--checkSum=$${filename%.*};\
+	done;\
--- a/homepage/redesign2018/markdownExperiment/src/Makefiles/Makefile.vidstabTest
+++ b/homepage/redesign2018/markdownExperiment/src/Makefiles/Makefile.vidstabTest
@@ -1,8 +1,8 @@
 FFMPEG = /c/proggis/media/editoren/ffmpeg-4.0.2-win64-static/bin/ffmpeg.exe
 GUETZLI = /d/projekte/tests/guetzli.git/bin/Release/guetzli.exe

-#DEFAULT_FFMPEG = ffmpeg
-DEFAULT_FFMPEG = /c/proggis/media/editoren/ffmpeg-4.0.2-win64-static/bin/ffmpeg.exe
+DEFAULT_FFMPEG = ffmpeg
+#DEFAULT_FFMPEG = /c/proggis/media/editoren/ffmpeg-4.0.2-win64-static/bin/ffmpeg.exe

 # Für eine schnelle Komprimierung libvpx, sonst vp9
 DEFAULT_VID_CODEC_HEIGHT = 360
@@ -18,10 +18,10 @@ VID_CODEC_HEIGHT := $(if $(VID_CODEC_HEIGHT),$(VID_CODEC_HEIGHT),$(DEFAULT_VID_C
 VID_CODEC_WIDTH := $(if $(VID_CODEC_WIDTH),$(VID_CODEC_WIDTH),$(DEFAULT_VID_CODEC_WIDTH))
 VID_CODEC := $(if $(VID_CODEC),$(VID_CODEC),$(DEFAULT_VID_CODEC))

-targetSourceDirectories = $(sort $(dir $(wildcard ./videos/aufnahmen/*/)))
-targetSourceDir = videos/aufnahmen/
-sourceVideos = $(wildcard videos/.forCompressing/*.video)
+defaultTargetSourceDirectories = $(sort $(dir $(wildcard ./videos/aufnahmen/*/)))

+targetSourceDirectories := $(if $(targetSourceDirectories), $(targetSourceDirectories), $(defaultTargetSourceDirectories))
+sourceVideos = $(wildcard videos/.forCompressing/*.video)

 vidstabLogs   = $(addsuffix .trf, $(basename $(sourceVideos)))
 firstPassLogs = $(addsuffix .firstPassLog-0.log, $(basename $(sourceVideos)))
@@ -35,7 +35,10 @@ ffmpegVideoFilterVidstabTransform = vidstabtransform=optzoom=2:interpol=bicubic:

 ffmpegVideoScaleFilter = scale=$(VID_CODEC_WIDTH):$(VID_CODEC_HEIGHT):sws_flags=lanczos,
 ffmpegVideoFilterDeinterlace = yadif,
-ffmpegVideoFilterDenoise = hqdn3d,
+ffmpegVideoFilterDenoise = nlmeans,
+#ffmpegVideoFilterDenoise = hqdn3d,
+ffmpegDisplayAspectRatio = 16:9
+#ffmpegDisplayAspectRatio = 9:16


 .SECONDARY: $(vidstabLogs) $(firstPassLogs)
@@ -57,7 +60,7 @@ thumbnails: $(jpegThumbs)
 echo:
 	@echo $(webmVideos)
 	@echo $(firstPassLogs)
-	@echo $(targetSourceDir)
+	@echo $(targetSourceDirectories)


 # Erzeugen der Targets
@@ -87,13 +90,14 @@ videos/.forCompressing/%.trf: videos/.forCompressing/%.video

 videos/.forCompressing/%.firstPassLog-0.log: videos/.forCompressing/%.video videos/.forCompressing/%.trf
 #		-b:v $(VID_CODEC_BITRATE) \
+#		-filter:v $(ffmpegVideoFilterDeinterlace)$(ffmpegVideoFilterDenoise)$(ffmpegVideoFilterVidstabTransform):input="$(basename $<).trf",nlmeans=s=6:p=5:r=7,$(ffmpegVideoScaleFilter)unsharp=5:5:0.8:3:3:0.4 \
 # First Pass
 	$(FFMPEG) -i $< \
-		-filter:v $(ffmpegVideoFilterDeinterlace)$(ffmpegVideoFilterDenoise)$(ffmpegVideoFilterVidstabTransform):input="$(basename $<).trf",nlmeans=s=6:p=5:r=7,$(ffmpegVideoScaleFilter)unsharp=5:5:0.8:3:3:0.4 \
+		-filter:v $(ffmpegVideoFilterDeinterlace)$(ffmpegVideoFilterDenoise)$(ffmpegVideoFilterVidstabTransform):input="$(basename $<).trf",$(ffmpegVideoScaleFilter)unsharp=5:5:0.8:3:3:0.4 \
 		-codec:v $(VID_CODEC) \
 		-pass 1 \
 		-passlogfile "$(basename $<).firstPassLog" \
-		-aspect 16:9 \
+		-aspect $(ffmpegDisplayAspectRatio) \
 		-threads 1 \
 		-speed 4 \
 		-tile-columns 0 \
@@ -114,13 +118,13 @@ videos/webm/%.webm: videos/.forCompressing/%.video videos/.forCompressing/%.trf
 #		-b:v $(VID_CODEC_BITRATE) \
 # Second Pass
 	$(FFMPEG) -i $< \
-		-filter:v $(ffmpegVideoFilterDeinterlace)$(ffmpegVideoFilterDenoise)$(ffmpegVideoFilterVidstabTransform):input="$(basename $<).trf",nlmeans=s=6:p=5:r=7,$(ffmpegVideoScaleFilter)unsharp=5:5:0.8:3:3:0.4 \
+		-filter:v $(ffmpegVideoFilterDeinterlace)$(ffmpegVideoFilterDenoise)$(ffmpegVideoFilterVidstabTransform):input="$(basename $<).trf",$(ffmpegVideoScaleFilter)unsharp=5:5:0.8:3:3:0.4 \
 		-codec:v $(VID_CODEC) \
 		-pass 2 \
 		-passlogfile "$(basename $<).firstPassLog" \
 		-deadline best \
 		-b:v $(shell /d/temp/cwsvJudo/homepage/redesign2018/markdownExperiment/src/galleryHelper/getVideoDurationJson.py $<)k \
-		-aspect 16:9 \
+		-aspect $(ffmpegDisplayAspectRatio)\
 		-threads 1 \
 		-speed 0 \
 		-tile-columns 0 \
@@ -136,8 +140,9 @@ videos/webm/%.webm: videos/.forCompressing/%.video videos/.forCompressing/%.trf
 videos/thumbnails/%.png: videos/.forCompressing/%.video
 	mkdir -p videos/thumbnails
 #	$(FFMPEG) -i "$<" -vf "select=gt(scene\,0.4)" -frames:v 5 -vsync vfr -vf $(ffmpegVideoScaleFilter)fps=fps=1/600 "$@"
-	$(FFMPEG) -i "$<" -vf $(ffmpegVideoScaleFilter)thumbnail -frames:v 1 "$@"
+#	$(FFMPEG) -i "$<" -vf $(ffmpegVideoScaleFilter)thumbnail -frames:v 1 "$@"
+#	$(FFMPEG) -i "$<" -filter:v $(ffmpegVideoFilterDeinterlace)$(ffmpegVideoFilterDenoise)$(ffmpegVideoFilterVidstabTransform):input="$(basename $<).trf",$(ffmpegVideoScaleFilter)unsharp=5:5:0.8:3:3:0.4,thumbnail -frames:v 1 "$@"
+	$(FFMPEG) -i "$<" -filter:v $(ffmpegVideoFilterDeinterlace)$(ffmpegVideoScaleFilter)thumbnail -frames:v 1 "$@"

 videos/thumbnails/%.jpg: videos/thumbnails/%.png
 	$(GUETZLI) --quality 90 "$<" "$@"
-
--- a/homepage/redesign2018/markdownExperiment/src/galleryHelper/getVideoDurationJson.py
+++ b/homepage/redesign2018/markdownExperiment/src/galleryHelper/getVideoDurationJson.py
@@ -21,7 +21,7 @@ def probe(vid_file_path):
    @vid_file_path : The absolute (full) path of the video file, string.
    '''
    if type(vid_file_path) != str:
-        raise Exception('Gvie ffprobe a full file path of the video')
+        raise Exception('Give ffprobe a full file path of the video')
        return

    command = ["ffprobe",
--- a/homepage/redesign2018/markdownExperiment/src/galleryHelper/videoGallery.tmpl.php
+++ b/homepage/redesign2018/markdownExperiment/src/galleryHelper/videoGallery.tmpl.php
@@ -0,0 +1,266 @@
+<?php
+
+$basePath = "/users/cwsvjudo/www";
+include_once("config.inc.php");
+
+	require_once($basePath."/config/phpcount.config.php");
+	require_once($basePath."/config/cwsvJudo.config.php");
+
+	require_once($basePath."/ressourcen/phpLib/phpcount/phpcount.php");
+
+	require_once($basePath."/ressourcen/phpLib/cwsvJudo/miscAssis.php");
+
+	$cwsvJudoDbConnection = getCwsvJudoDbConn();
+	$cwsvJudoDbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+	$wkId = $_GET['wkId'];
+
+	$vidQuery = 
+		$cwsvJudoDbConnection->prepare(
+			"SELECT url, posterUrl FROM cwsvjudo.`shiai.videos` WHERE wkId = :wkId;"
+		);
+		$vidQuery->bindParam(':wkId', intval($wkId), PDO::PARAM_INT);
+
+	$vidQuery->execute();
+	$wkVideos = $vidQuery->fetchAll(PDO::FETCH_ASSOC);
+
+
+	$vidList = array();
+	foreach( $wkVideos as $wkVid){
+		$vidList[] = array(
+			'vidSrc' => $wkVid['url'],
+			'posterSrc' => $wkVid['posterUrl'],
+//			'width' => $posterSize[0],
+//			'height' => $posterSize[1]
+		);
+	}
+
+/// Hilfsfunktion zum Anpassen der htmlDescription
+function descrName($aName){
+	$retVal = "Videos der Judoka des Chemnitzer WSV beim Wettkampf ".$aName;
+	if( strpos($aName, "Sommerabschlussgrillen") >= 0 ) $retVal = "Videos der Judoka des Chemnitzer WSV beim ".$aName;
+	if( strpos($aName, "Jahrendefeier") >= 0 ) $retVal = "Videos der Judoka des Chemnitzer WSV bei der ".$aName;
+return $retVal;
+}/// Ende descrName
+
+	$messages = array();
+?>
+<!DOCTYPE HTML>
+<html lang="de">
+	<head>
+		<title><?php echo $wkName?> - Videoalbum</title>
+		<?php //PHPCount::AddHit($wkName." - Videoalbum");?>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<meta name="description" content="<?php echo descrName($wkName);?>">
+		<meta name="keywords" content="Album, Videos">
+		<!-- BluimpGallery Zeug -->
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<!--
+		<link rel="stylesheet" href="/ressourcen/blueimpGallery/css/blueimp-gallery.css">
+		<link rel="stylesheet" href="/ressourcen/blueimpGallery/css/blueimp-gallery-indicator.css">
+		<link rel="stylesheet" href="/ressourcen/blueimpGallery/css/blueimp-gallery-video.css">
+-->
+
+<!-- favIcon und Co nach der empfehlung von https://github.com/audreyr/favicon-cheat-sheet -->
+		<link rel="shortcut icon" type="image/x-icon" sizes="16x16 32x32 48x48 64x64" href="/ressourcen/graphiken/logos/favicon/favicon.ico">
+		<link rel="apple-touch-icon" sizes="152x152" href="/ressourcen/graphiken/logos/apple-touch-icon/apple-touch-icon-152.png" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/ressourcen/graphiken/logos/apple-touch-icon/apple-touch-icon-180.png" />
+		<link rel="manifest" href="/manifest.json">
+
+		<link rel="canonical" href="http://cwsvjudo.bplaced.net<?php echo $_SERVER['REQUEST_URI']?>" />
+
+		<script type="text/javascript" src="<?php echo($urlBase)?>/ressourcen/blueimpGallery/js/blueimp-gallery.min.js" async=""></script>
+
+		<!--https://github.com/aFarkas/lazysizes-->
+		<script src="<?php echo($urlBase)?>/ressourcen/jsLib/lazysizes.min.js" async=""></script>
+		<style>
+			img.lazyload {
+				display: none;
+			}
+		</style>
+
+		<style>
+			body{box-sizing: border-box; margin: 0;}
+			.smallFont{font-size: small;}
+			.centerText{text-align: center;}
+			.navButton{
+				box-sizing: border-box;
+				border-color: white;
+				border-style: outset;
+				border-radius: 1em;
+				text-align: center;
+				text-decoration: none;
+				cursor: pointer;
+				display: inline-block;
+				padding-left: .5em;
+				padding-right: .5em;
+				padding: 0;
+				margin: 0;
+			}
+		</style>
+
+	</head>
+
+	<body style="color: #000000; background-color: #FFAE00"  >
+		<iframe style="width:100%;height:auto;" src="http://cwsvjudo-media-2018.unaux.com/videoalben/videoalben.2018/2018-11-24-RKPXXI-U7U9U11-Schlettau/"></iframe>
+		<a title="Galerien der Judoka des Chemnitzer WSV" href="/galerien">Zur Galerieübersicht</a>
+<?php
+/// Eine kleine Messagebox
+		if( !empty($messages) ){
+?>
+		<div style="border: 1px solid black">
+<?php
+			if( !empty( $messages['info'] ) ) echo( $messages['info'] );
+?>
+		</div>
+<?php
+		}
+?>
+		
+		<h1 class="centerText" >
+			<?php echo($wkName);?> - Videoalbum
+		</h1>
+		
+		<p class="centerText smallFont">
+			[<?php echo count($vidList)?> Videos]
+		</p>
+		
+		<p class="centerText smallFont">
+			Auf die jeweiligen Bilder klicken um das Video anzuwählen.
+		</p>
+		
+		<hr/>
+
+<style type="text/css">
+	body{
+		margin: 0;
+	}
+	.galImgList{
+		font-size: 0;
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: center;
+		margin: 0;
+		padding: 0;
+	}
+	.galImgList div{ 
+		flex: auto;
+		width: 100%;
+		padding: 1vw 0;
+		flex-grow: unset;
+	}
+	.galImgList div img{ 
+		width: 100%; 
+		height: auto;
+	}
+	.galImgList div video{ 
+		width: 100%; 
+		height: auto; 
+	}
+	@media screen and (min-width: 768px) {
+		.galImgList div{
+			width: calc(100% * (1/3) - 2 * .5vw);
+			margin: .5vw;
+		}
+		.galImgList{
+			padding: .5vw;
+		}
+	}
+	@media screen and (min-width: 1024px) {
+		.galImgList div{
+			width: calc(100% * (1/4) - 2 * 1vw);
+			margin: 1vw;
+		}
+		.galImgList{
+			padding: 1vw;
+		}
+	}
+</style>
+<?php
+
+foreach( $vidList as $vidKey => $vidEntry ){
+	echo(
+		"<video controls preload=\"none\"  poster=\"".$vidEntry['posterSrc']."\">".
+			"<source src=\"".$vidEntry['vidSrc']."\" type=\"video/webm\">".
+			"Dieser Browser scheint das Video nicht abspielen zu können.".
+		"</video>"
+	);
+}
+?>
+<!--
+		<div id="links" class="galImgList">
+<?php
+		foreach( $vidList as $vidKey => $vidEntry ){
+			echo( "<div>" );
+				echo "<img class=\"lazyload\" ". 
+// Wir haben unsere eigen noscript-Alternative (die kein  img mehr 
+// ist!), deshalb brauchen wir diesen empfohlenen Fallback nicht!
+//						"src=\"".$vidEntry['posterSrc']."\"".
+//						"srcset=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"".
+						"id=\"Video".( $vidKey )."\" ".
+						"data-src=\"".( $vidEntry['posterSrc'] )."\" ".
+//						"width=\"".$vidEntry['width']."\" ".
+//						"height=\"".$vidEntry['height']."\" ".
+						"alt=\"[".( $vidKey + 1 )."/".( count($vidList) )."]\" ".
+						"title=\"".( $wkName )." Video ".( $vidKey + 1 )." von ".( count($vidList) )."\" ".
+						"onclick=\"startGalleryShow(" . $vidKey . ");\"".
+				" />";
+				echo(
+					"<noscript>".
+//						"<video controls preload=\"none\" poster=\"".$vidEntry['posterSrc']."\" width=\"".$vidEntry['width']."\" height=\"".$vidEntry['height']."\">".
+						"<video controls preload=\"none\" poster=\"".$vidEntry['posterSrc']."\">".
+							"<source src=\"".$vidEntry['vidSrc']."\" type=\"video/webm\">".
+							"Dieser Browser scheint das Video nicht abspielen zu können.".
+						"</video>".
+					"</noscript>"
+				);
+			echo("</div>");
+		}
+?>
+		</div><!-- Ende galImgList -->
+
+<!-- BluimpGalerry Lightbox Version -->
+		<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
+
+<!--
+		<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
+			<div class="slides"></div>
+			<h2 class="title"><?php echo $wkName?></h2>
+			<a class="prev">‹</a>
+			<a class="next">›</a>
+			<a class="close">×</a>
+			<a class="play-pause"></a>
+			<ol class="indicator"></ol>
+		</div>
+		<script>
+			function startGalleryShow(startIndex = 0){
+			var videoList = [
+				<?php 
+					foreach( $vidList as $vidEntry){
+//						echo "{href: '".$vidEntry['vidSrc']."', poster: '".$vidEntry['posterSrc']."', type: 'video/webm'},";
+						echo "{href: '".$vidEntry['vidSrc']."', poster: '".$vidEntry['posterSrc']."', type: 'video/webm'},";
+					}
+				?>
+			];
+			var gallery = blueimp.Gallery(
+				videoList,
+				{
+					preloadRange: 0,
+					startSlideshow: false,
+					stretchImages: true,
+					index: startIndex,
+				}
+			);
+			};
+			
+			window.onload = function () { 
+				startGalleryShow();
+			};
+//			startGalleryShow();
+		</script>
+		<hr/>
+<!-- Ende: BluimpGalery Lightbox Version -->
+
+	</body>
+</html>
--- a/homepage/redesign2018/markdownExperiment/src/galleryHelper/videoGalleryVue.tmpl.php
+++ b/homepage/redesign2018/markdownExperiment/src/galleryHelper/videoGalleryVue.tmpl.php
@@ -0,0 +1,210 @@
+<?php
+
+$basePath = "/users/cwsvjudo/www";
+include_once("config.inc.php");
+
+	require_once($basePath."/config/phpcount.config.php");
+	require_once($basePath."/config/cwsvJudo.config.php");
+
+	require_once($basePath."/ressourcen/phpLib/phpcount/phpcount.php");
+
+	require_once($basePath."/ressourcen/phpLib/cwsvJudo/miscAssis.php");
+
+	$cwsvJudoDbConnection = getCwsvJudoDbConn();
+	$cwsvJudoDbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+	$wkId = $_GET['wkId'];
+
+	$vidQuery = 
+		$cwsvJudoDbConnection->prepare(
+			"SELECT url, posterUrl FROM cwsvjudo.`shiai.videos` WHERE wkId = :wkId;"
+		);
+		$vidQuery->bindParam(':wkId', intval($wkId), PDO::PARAM_INT);
+
+	$vidQuery->execute();
+	$wkVideos = $vidQuery->fetchAll(PDO::FETCH_ASSOC);
+
+
+	$vidList = array();
+	foreach( $wkVideos as $wkVid){
+//		$posterSrc = str_replace( ".webm", ".jpg", str_replace("webm/", "thumbnails/", $vid ) );
+//		$posterSize = getimagesize( $posterSrc );
+		$vidList[] = array(
+			'vidSrc' => $wkVid['url'],
+			'posterSrc' => $wkVid['posterUrl'],
+//			'width' => $posterSize[0],
+//			'height' => $posterSize[1]
+		);
+	}
+
+/// Hilfsfunktion zum Anpassen der htmlDescription
+function descrName($aName){
+	$retVal = "Videos der Judoka des Chemnitzer WSV beim Wettkampf ".$aName;
+	if( strpos($aName, "Sommerabschlussgrillen") >= 0 ) $retVal = "Videos der Judoka des Chemnitzer WSV beim ".$aName;
+	if( strpos($aName, "Jahrendefeier") >= 0 ) $retVal = "Videos der Judoka des Chemnitzer WSV bei der ".$aName;
+return $retVal;
+}/// Ende descrName
+
+	$messages = array();
+?>
+<!DOCTYPE HTML>
+<html lang="de">
+	<head>
+		<title><?php echo $wkName?> - Videoalbum</title>
+		<?php //PHPCount::AddHit($wkName." - Videoalbum");?>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<meta name="description" content="<?php echo descrName($wkName);?>">
+		<meta name="keywords" content="Album, Videos">
+
+<!-- favIcon und Co nach der empfehlung von https://github.com/audreyr/favicon-cheat-sheet -->
+		<link rel="shortcut icon" type="image/x-icon" sizes="16x16 32x32 48x48 64x64" href="/ressourcen/graphiken/logos/favicon/favicon.ico">
+		<link rel="apple-touch-icon" sizes="152x152" href="/ressourcen/graphiken/logos/apple-touch-icon/apple-touch-icon-152.png" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/ressourcen/graphiken/logos/apple-touch-icon/apple-touch-icon-180.png" />
+		<link rel="manifest" href="/manifest.json">
+
+		<link rel="canonical" href="http://cwsvjudo.bplaced.net<?php echo $_SERVER['REQUEST_URI']?>" />
+
+
+		<script type="text/javascript" src="https://unpkg.com/vue@2.4.3/dist/vue.js"></script>
+		<script type="text/javascript" src="https://unpkg.com/vue-gallery"></script>
+
+		<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery.js"></script>
+		<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery-youtube.js"></script>
+		<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery-video.js"></script>
+		<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery-fullscreen.js"></script>
+		<script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-helper.js"></script>
+		<link rel="stylesheet" type="text/css" href="https://unpkg.com/blueimp-gallery@2.27.0/css/blueimp-gallery.min.css">
+		<style type="text/css">
+			.image {
+				float: left;
+				background-size: cover;
+				background-repeat: no-repeat;
+				background-position: center center;
+				border: 1px solid #ebebeb;
+				margin: 5px;
+			}
+		</style>
+		<script type="text/javascript">
+		window.onload=function(){
+			new Vue({
+				el: '#app',
+				data: function () {
+					return {
+					  images: [
+						{
+						  title: 'A YouYube video',
+						  href: 'https://www.youtube.com/watch?v=hNdlUHBJDKs',
+						  type: 'text/html',
+						  youtube: 'hNdlUHBJDKs',
+						  poster: 'https://img.youtube.com/vi/hNdlUHBJDKs/maxresdefault.jpg'
+						},
+						{
+						  title: 'A YouYube video 2',
+						  href: 'https://www.youtube.com/watch?v=s5iUsaPPtnk',
+						  type: 'text/html',
+						  youtube: 's5iUsaPPtnk',
+						  poster: 'https://img.youtube.com/vi/s5iUsaPPtnk/maxresdefault.jpg'
+						},
+<?php
+//foreach( $vidList as $vidKey => $vidEntry ){
+//	echo(
+//		"{href: '".$vidEntry['vidSrc']."', poster: '".$vidEntry['posterSrc']."', type: 'video/webm'},"
+//	);
+//}
+?>
+				{
+				  title: 'Image',
+				  href: 'https://dummyimage.com/1600/ffffff/000000',
+				  type: 'image/jpeg',
+				  poster: 'https://dummyimage.com/350/ffffff/000000'
+				}
+			  ],
+			  index: null
+			};
+			},
+
+			components: {
+			'gallery': VueGallery
+			}
+			});
+		}
+		</script>
+
+
+<!--https://github.com/aFarkas/lazysizes-->
+		<script src="<?php echo($urlBase)?>/ressourcen/jsLib/lazysizes.min.js" async=""></script>
+		<style>
+			img.lazyload {
+				display: none;
+			}
+		</style>
+
+		<style>
+			body{box-sizing: border-box; margin: 0;}
+			.smallFont{font-size: small;}
+			.centerText{text-align: center;}
+			.navButton{
+				box-sizing: border-box;
+				border-color: white;
+				border-style: outset;
+				border-radius: 1em;
+				text-align: center;
+				text-decoration: none;
+				cursor: pointer;
+				display: inline-block;
+				padding-left: .5em;
+				padding-right: .5em;
+				padding: 0;
+				margin: 0;
+			}
+		</style>
+
+	</head>
+
+	<body style="color: #000000; background-color: #FFAE00"  >
+		<a title="Galerien der Judoka des Chemnitzer WSV" href="/galerien">Zur Galerieübersicht</a>
+<?php
+/// Eine kleine Messagebox
+		if( !empty($messages) ){
+?>
+		<div style="border: 1px solid black">
+<?php
+			if( !empty( $messages['info'] ) ) echo( $messages['info'] );
+?>
+		</div>
+<?php
+		}
+?>
+		
+		<h1 class="centerText" >
+			<?php echo($wkName);?> - Videoalbum
+		</h1>
+		
+		<p class="centerText smallFont">
+			[<?php echo count($vidList)?> Videos]
+		</p>
+		
+		<p class="centerText smallFont">
+			Auf die jeweiligen Bilder klicken um das Video anzuwählen.
+		</p>
+		
+		<hr/>
+
+<!--vueGallery-->
+<div id="app">
+	<gallery 
+		:images="images" 
+		:index="index" 
+		:options="{youTubeVideoIdProperty: 'youtube', youTubePlayerVars: undefined, youTubeClickToPlay: true}"
+		@close="index = null"
+	></gallery>
+	<div
+		class="image"
+		v-for="image, imageIndex in images"
+		@click="index = imageIndex"
+		:style="{ backgroundImage: 'url(' + image.poster + ')', width: '300px', height: '200px' }"
+	></div>
+</div>
+
+	</body>
+</html>
--- a/homepage/redesign2018/markdownExperiment/src/galleryHelper/yamlRead.py
+++ b/homepage/redesign2018/markdownExperiment/src/galleryHelper/yamlRead.py
@@ -0,0 +1 @@
+