Adding custom image formats: PNG, JPG, GIF and WEBM

src/gui/css/mainStyleSheet.tw

@@ -4,6 +4,7 @@
 .passage {
     transition: none;
     -webkit-transition: none;
+	overflow-x: hidden;
 }
 
 .passage-in {
@@ -35,7 +36,7 @@
     float: left;
 }
 
-.smlImg > img {
+.smlImg > img, .smlImg > video {
 	height: auto;
 }
 
@@ -45,7 +46,7 @@
     float: right;
 }
 
-.medImg > img {
+.medImg > img, .medImg > video {
 	height: auto;
 }
 
@@ -74,7 +75,7 @@
 	z-index: 1;
 }
 
-.lrgRender > img {
+.lrgRender > img, .lrgRender > video {
 	margin-left: -150px;
 	height: 531px;
 	width: auto;
@@ -87,7 +88,7 @@
 	z-index: 1;
 }
 
-.lrgVector > img {
+.lrgVector > img, .lrgVector > video {
 	margin-left: -150px;
 	height: 600px;
 	width: auto;

src/uncategorized/addCustomDescriptors.tw

@@ -143,5 +143,16 @@ Assign her a custom image:
 <<else>>
 	<<textbox "$activeSlave.customImage" "" "Add custom descriptors">>
 <</if>>
-<<link "Reset">><<set $activeSlave.customImage = 0>><<goto "Add custom descriptors">><</link>>
-<br>&nbsp;&nbsp;&nbsp;&nbsp;//File must be in .png format. Place file in the \resources folder. Enter the filename without the .png extension. For example, for a file with the path \bin\resources\headgirl.png, enter headgirl.//
+<<link "Reset">><<set $activeSlave.customImage = 0, $activeSlave.customImageFormat = "png">><<goto "Add custom descriptors">><</link>>
+<br>&nbsp;&nbsp;&nbsp;&nbsp;//File must be in// <tt><select id="customImageFormatSelector" style="border: none;"><option value="png">PNG</option><option value="jpg">JPG</option><option value="gif">GIF</option><option value="webm">WEBM</option></select></tt> //format. Place file in the \resources folder. Enter the filename without the extension. For example, for a file with the path// <tt>\bin\resources\headgirl.<span id="customImageFormatValue">png</span></tt>, //enter //<tt>headgirl</tt>.
+<<script>>
+jQuery(function() {
+	jQuery("#customImageFormatValue").text(State.variables.activeSlave.customImageFormat || "png");
+	jQuery("#customImageFormatSelector")
+		.val(State.variables.activeSlave.customImageFormat || "png")
+		.on("change", function(e) {
+			State.variables.activeSlave.customImageFormat = this.value;
+			jQuery("#customImageFormatValue").text(this.value);
+		});
+});
+<</script>>
\ No newline at end of file

src/utility/artWidgets.tw

@@ -53,16 +53,19 @@ $args[2]: icon UI Display for vector art, 1 for on.
 <<if ndef $args[0].customImage>><<set $args[0].customImage = 0>><</if>>
 <<if $args[0].customImage != 0>>
 
-<<set _fileName = "'resources/" + $args[0].customImage + ".png' ">>
+<<set _fileFormat = ($args[0].customImageFormat || "png"),
+	_fileName = "'resources/" + $args[0].customImage + "." + _fileFormat + "' ",
+	_fileTypeStart = (_fileFormat === "webm" ? "video loop autoplay" : "img"),
+	_fileTypeEnd = (_fileFormat === "webm" ? "</video>" : "")>>
 
 <<if $args[1] == 3>>
-	<<print "<img src=" + _fileName + "style='float:right; border:3px hidden'/>">>
+	<<print "<" + _fileTypeStart + " src=" + _fileName + "style='float:right; border:3px hidden'>" + _fileTypeEnd>>
 <<elseif $args[1] == 2>>
-	<<print "<img src=" + _fileName + "style='float:right; border:3px hidden' width='300' height='300'/>">>
+	<<print "<" + _fileTypeStart + " src=" + _fileName + "style='float:right; border:3px hidden' width='300' height='300'>" + _fileTypeEnd>>
 <<elseif $args[1] == 1>>
-	<<print "<img src=" + _fileName + "style='float:left; border:3px hidden' width='150' height='150'/>">>
+	<<print "<" + _fileTypeStart + " src=" + _fileName + "style='float:left; border:3px hidden' width='150' height='150'>" + _fileTypeEnd>>
 <<else>>
-	<<print "<img src=" + _fileName + "style='float:left; border:3px hidden' width='120' height='120'/>">>
+	<<print "<" + _fileTypeStart + " src=" + _fileName + "style='float:left; border:3px hidden' width='120' height='120'>" + _fileTypeEnd>>
 <</if>>
 
 <<elseif $imageChoice == 1>> /* VECTOR ART BY NOX */