New Unified Listing Tool - How to adjust HTML from ISDNTEK CSS Photo Gallery for use

[jdyn84]

For any of the HTML gurus who are still around, @shipscript or the like, this question is for you.  I sometimes use the ISDNTEK CSS Photo Gallery tool (FANTASTIC TOOL!!) to generate an HTML gallery to add to my listings whenever I have something that I feel necessitates additional photos above the free 12 that eBay provides you.  I have my own VPS running nginx with h5ai behind CloudFlare for such purposes. 

Anyway, my basic HTML template is below (I learned and kept the practice of indents for code....sorry):

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div>
	<font face="Verdana" size="4">
		<b>
			<u>
				Item Description
			</u>
		</b>
	</font>
</div>
<div>
	<br>
</div>
<div>
	<font face="Verdana" size="2">
		<b>Item:</b>
	</font>
</div>
<div vocab="https://schema.org/" typeof="Product">
	<font face="Verdana" size="2">
                <!--- [Item Description, keep under 799 chars. Reference https://pages.ebay.com/sell/itemdescription/customizeyoursummary.html] --->
		<span property="description">
			<b>Condition:</b> 
			<br><b>Additional Notes:</b> 
			<br><br>Please see pictures for more detail. Items not pictured are not included. Please message with any questions.
		</span>
	</font>
</div>
<div>
		<br>
</div>
<div>
	<font face="Verdana" size="4">
		<b>
			<u>
				Shipping Information
			</u>
		</b>
	</font>
	<div>
		<br>
	</div>
	<div>
		<font face="Verdana" size="2">
			Please see shipping tab for handling information. Combined shipping is available. Please contact for more information.
		</font>
	</div>
</div>

I can (and have) stuck that in a template in the unified listing view, and everything worked fine.  If I want to add an additional Image Gallery, then my code looks like below:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div>
	<font face="Verdana" size="4">
		<b>
			<u>
				Item Description
			</u>
		</b>
	</font>
</div>
<div>
	<br>
</div>
<div>
	<font face="Verdana" size="2">
		<b>Item:</b>
	</font>
</div>
<div vocab="https://schema.org/" typeof="Product">
	<font face="Verdana" size="2">
                <!--- [Item Description, keep under 799 chars. Reference https://pages.ebay.com/sell/itemdescription/customizeyoursummary.html] --->
		<span property="description">
			<b>Condition:</b> 
			<br><b>Additional Notes:</b> Please see additional pictures in the Image Gallery below
			<br><br>Please see pictures for more detail. Items not pictured are not included. Please message with any questions.
		</span>
	</font>
</div>
<div>
		<br>
</div>
<div>
	<font face="Verdana" size="4">
		<b>
			<u>
				Shipping Information
			</u>
		</b>
	</font>
	<div>
		<br>
	</div>
	<div>
		<font face="Verdana" size="2">
			Please see shipping tab for handling information. Combined shipping is available. Please contact for more information.
		</font>
	</div>
</div>
<div>
		<br>
</div>
<div>
	<font face="Verdana" size="4">
		<b>
			<u>
				Image Gallery
			</u>
		</b>
	</font>
	<div>
		<br>
	</div>
	<div>
		<!-- =========================================== -->
		<!-- begin responsive CSS rollover photo gallery -->
		<!-- =========================================== -->
		<!-- copyright 2016 shipscript -->
		<br style="display:none">
		<style>
		/* colors and borders */
		.pic_gallery { border:1px solid #888888; ; } /* gallery border color */
		.pic_gallery .pic_sm div { } /* thumbnail cell border */
		.pic_gallery .pic_lg div { } /* main photo cell border */
		.pic_gallery .pic_sm img { } /* thumbnail border */
		.pic_gallery .pic_lg img { } /* main photo border */
		.pic_gallery .pic_set:hover .pic_sm div { color: red; } /* thumbnail border hover color */
		.pic_gallery { background-color:#FFFFFF; } /* gallery background color */
		.pic_gallery .pic_sm div, 
		.pic_gallery .pic_lg div { background-color:#FFFFFF; } /* cell background color */
		.pic_gallery .pic_head,
		.pic_gallery .pic_foot { color:#333333;} /* gallery text color */
		/* text */
		.pic_gallery { font-family:arial; font-size:16px; }
		.pic_gallery .pic_head { display:none; text-align:center; font-size:.88em; font-weight:bold; padding-top:.5em; }
		.pic_gallery .pic_foot { display:none; text-align:center; font-size:.7em; }
		/* shadows and corners */
		.pic_gallery .pic_sm { }
		.pic_gallery .pic_lg { }
		.pic_gallery .pic_sm div { } /* cell corners and shadows */
		.pic_gallery .pic_lg div { } /* cell corners and shadows */
		.pic_gallery .pic_sm img { } /* image corners and shadows */
		.pic_gallery .pic_lg img { } /* image corners and shadows */
		/* sizing, matting, and margins (all values interact and vary by aspect ratio and image count) */
		.pic_gallery { width:100%; max-width:604px; } /* change this % in media queries */
		.pic_gallery .pic_gal_6x1 { width:100%; padding-top:116.66%; }
		.pic_gallery .pic_gal_6x1 .pic_gal_cells { width:100%; height:100%; } /* sets padding around entire gallery */
		.pic_gallery .pic_gal_6x1 .pic_sm { width:16.02%; height:13.73%; margin:0.32%; }
		.pic_gallery .pic_gal_6x1 .pic_lg { width:99.35%; height:85.16%; margin:0.32%; }
		.pic_gallery .pic_gal_6x1 .pic_sm img { max-width:100%; max-height:100%; } /* sets margin around thumbnail */
		.pic_gallery .pic_gal_6x1 .pic_lg img { max-width:100%; max-height:100%; } /* sets margin around large photo */
		/* structural */
		.pic_gallery, .pic_gallery * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
		.pic_gallery, .pic_gallery .pic_gal { position:relative; margin:auto; }
		.pic_gallery .pic_gal_cells { position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; }
		.pic_gallery img { position:absolute; width:auto; height:auto; left:0; top:0; bottom:0; right:0; margin:auto; }
		.pic_gallery .pic_sm { position:relative; overflow:hidden; float:left; display:block; }
		.pic_gallery .pic_lg { position:absolute; overflow:hidden; display:none; left:0%; top:0%; z-index:1; }
		.pic_gallery .pic_sm div, 
		.pic_gallery .pic_lg div { position:absolute; left:0%; top:0%; right:0%; bottom:0%; }
		.pic_gallery .pic_lg { display:none; }
		.pic_gallery .pic_lg.pic_main { position:relative; display:block; float:left; z-index:0; } /* turn on default large photo */
		.pic_gallery .pic_set:hover .pic_sm div { opacity:.5; border:1px solid; }
		.pic_gallery .pic_main { visibility:hidden; }
		.pic_gallery input { position:absolute; top:0; left:0; visibility:hidden; }
		.pic_gallery input:checked + label + div.pic_lg { display:block }
		.pic_gallery input:checked + label { opacity:.5; }
		</style>
		<!--[if lt ie 8]>
		<style>
		/* lower browser versions can not display this gallery */
		.pic_gallery img,
		.pic_gallery .pic_gal,
		.pic_gallery .pic_sm div,
		.pic_gallery .pic_gal_cells { position:relative; border:0; padding:0; margin:0; }
		.pic_gallery .pic_sm img { width:99%; height:auto; }
		</style>
		<![endif]-->
		<!-- photo gallery -->
		<div class="pic_gallery">
		<div class="pic_head"></div>
		<div class="pic_gal pic_gal_6x1"><!-- thumbnail rows-columns -->
		<div class="pic_gal_cells"><!-- positioning large photos -->

		<!-- default large photo -->
		<div class="pic_lg pic_main"></div>

		<!-- thumbnails (6 max) -->
		<span class="pic_set">
		<input id="pic1" name="pic_select" type="radio" checked>
		<label for="pic1" class="pic_sm"><div>
		<img src="https://www.isdntek.com/tagbot/misc/starburst1.jpg" loading="lazy">
		</div></label><div class="pic_lg"><div>
		<img src="https://www.isdntek.com/tagbot/misc/starburst1.jpg" loading="lazy">
		</div></div></span>

		<span class="pic_set">
		<input id="pic2" name="pic_select" type="radio">
		<label for="pic2" class="pic_sm"><div>
		<img src="https://www.isdntek.com/tagbot/misc/gem2.jpg" loading="lazy">
		</div></label><div class="pic_lg"><div>
		<img src="https://www.isdntek.com/tagbot/misc/gem2.jpg" loading="lazy">
		</div></div></span>

		<span class="pic_set">
		<input id="pic3" name="pic_select" type="radio">
		<label for="pic3" class="pic_sm"><div>
		<img src="https://www.isdntek.com/tagbot/misc/bambi.jpg" loading="lazy">
		</div></label><div class="pic_lg"><div>
		<img src="https://www.isdntek.com/tagbot/misc/bambi.jpg" loading="lazy">
		</div></div></span>

		</div><!-- end pic_gal_cells -->
		</div>
		<div class="pic_foot"></div>
		</div><!-- end photo gallery -->
		<!-- =========================================== -->
		<!-- end responsive CSS rollover photo gallery   -->
		<!-- =========================================== -->
	</div>
</div>

When I use the old school advanced lister view, I can use the above HTML just fine and it displays properly.  When I put in the CSS/HTML code for the image gallery like above in the unified lister tool, the listing is an abject mess, with the pictures displaying stacked all over each other.  I'm currently sticking to the old school listing tool, but I get the feeling that's not going to be further developed (and will probably go away) especially because adding videos is only possible under the unified lister tool.

Does anyone have any suggestions on what I need to modify in order to use the CSS Photo Gallery code under the new unified lister tool?  I rarely need to use video, so when I do I just host it and use HTML tag, but its better moving forward to use the new eBay method of including a video.

Here's a test listing to show the example: https://www.ebay.com/itm/115258664554

I know basic HTML, but my knowledge is severely lacking when it comes to CSS.

Thanks in advance!

[shipscript]

@jdyn84 

The Unified Lister has stripped out the action tags <input> and <label>, so the photos are not clickable and won't enlarge, nor do they fall into alignment.

Although not ideal for a large number of stacked thumbnails, it may still be possible to create a "hover" gallery instead of a click gallery at the tool site.

https://www.isdntek.com/csstools/photos.htm

By the way, we all love indented code. However, some browsers will convert the indenting and extra spaces into "hard" space characters when pasted into eBay, and those can clobber codes and attributes. So if your browser plays nice with eBay's editor, you can indent (I usually do). Otherwise, it can produce bizarre formatting results.

Another issue-- neither the quick lister, nor the unified lister, will accept eBay's codes for the mobile summary. That means eBay may not correctly extract your description.

[jdyn84]

Ahh that's why. Makes sense as to why its not working. I'd never thought to pull out the HTML and run that mangled mess through a comparison.  Regarding your last statement, yeah, I decided to re-check that, and those eBay acceptable codes get stripped out.....which sucks.

Another annoying thing that I had to experiment with and learn, is that eBay still picks and chooses what it wants to from the description if you've put copy text into the item condition field. Despite them saying otherwise.  Makes no sense really.  Just about as much sense as them removing from the iOS application a few years ago, the ability to edit HTML from within the app.

Thanks for the response!

[shipscript]

Due to a brain injury I'm no longer able to update the programs or to read or modify your code.

One thing that can destroy formatting is extra white space, from tabbing or line breaks, within HTML  tags or CSS codes.   Publishing tools often introduce extraneous white space.

  @jdyn84