IsoBlock.com

Welcome to the IsoBlock.com download page..
Click to Download an archive of the website template files.

The archive includes all the HTML, CSS, and javascript files and Perl programs to set up a complete website including the ability to build HTML for image galleries. If you like this website the download will provide templates and tools with some instructional material to let you roll your own rendition. If instead of using the resources provided to construct your own website you would prefer to have us set up a website for you, the details for this service are described under the "About us" menu heading on the "Web Design Services" page.

This following is an explanation of the website contents
and how it is constructed and how it works.

The IsoBlock.com website is set up to provide two basic functions for visitors. First it is set up as a sort of "portfolio" web site to show some of my graphic art, that is various images, and also to display text materials which in this instance are two collections of poetry. Second it serves as a repository for downloadable files and instructions which can be used to construct a somewhat customized rendition of this site.

This IsoBlock.com website looks good and it seems to work pretty well. The intention of making this site serves four purposes. The first two serve the visitors to the site as mentioned above. First I will have a website that shows part of my "portfolio" of image artwork and text content, and that will display that portfolio in a website of my own design. The second purpose is to provide a website template that I plan to "give away" by making it freely downloadable from this site. You may use the template and documentation to construct your own rendition of this site design. I also plan to place the download package on a public shareware/opensource software repository or "repo". The third purpose is I will have learned a bit of HTML5, CSS3, javascript, and Perl; at least an amount sufficient to build a website to my own design. Incidental to that I have also learned a bit about setting up and using apache web server. lol. The fourth purpose is that making the website gives me a piece of work that I can use as a reference in seeking "remote" employment designing or supporting web pages.

There are quite a few "website gallery" templates available, both from "repos" like gitHUB (repositories of shareware or open source code/programs etc) and from commercial vendors that sell a bundled website template. I looked at both varieties. There are some very nice gallery/portfolio/website templates being sold by various vendors. Not extraordinarily expensive either, with various levels of "integration assistance" and setup available. And there are also some very nice freeware/opensource/shareware gallery modules available at sites like gitHUB. I looked at a number of those as well. After some deliberation I decided to make my own gallery as part of a site I had already decided to build, so these image galleries are all of my own making along with the website, and all of the files necessary to make the complete website as well as the galleries are included in the downloads. All of the HTML5, CSS3, javascript, and Perl content was written using Notepad++ as a text editor. I looked over hundreds of webpages of examples and tutorials in HTML5, CSS3, javascript, and Perl to help me make this website. To any extent that I have done well, those sources deserve the credit for that.

Here are some of the design features considered and employed in making the IsoBlock.com website.

The template supports various image gallery sizes; to use this template you have to decide about the size of the pages in the sense of how many images should be in one gallery. Let's say for a web page I could put up one gallery of 1000 images, or I could divide that into four galleries of 250 images each. The choice comes down to the loading speed for an image gallery, the more images the longer it takes to load each gallery. And even if you are downloading thumbnail images for the gallery display it takes a while to download 1000 of them. So I think it best to divide the one large gallery into 4 smaller galleries. But, if you put the site on a DVD or CD the size becomes of less consideration. Notice that individual (larger sized) images are only downloaded when selected. I used a moderate size limit for the dimensions or size of the large individual images.

Image sizes, that is the pixel dimensions of each image, are of great importance. In general images which are reduced in size at the time they are displayed or rendered for view on a web page will look better than images which are enlarged for display. In other words big images that are reduced for display will look better than small images which are enlarged for display. So that implies that we should use the largest reasonable pixel size for our image files. But we also need to note that images with pixel dimensions larger than the display's pixel dimensions don't gain from being larger. (Nominally the best image size to show on a 480x640 pixel display would also be 480x640 pixels.)

This next is an update as I continued playing with image display. Say you have an image that is Ximg x Yimg pixels and you want to show it in a window that is Xdsp x Ydsp pixels, and you want to keep the aspect ratio or proportions of the image. This is my solution to that issue and the method employed in my modal display.

The first thing is determining the image size, its actual dimensions. Two issues present, which are that it takes time to calculate the size and you generally have to load the image somewhere to do that. So we have the benefit of a way around that, we show the dimensions in the HTML. It is fast and gives the native image size. So I added a bit to the "writeHTMLgallery.pl" perl program discussed later such that it now writes the "width" and "height" values into the HTML for each image. This provides us with the Ximg and Yimg values.

The procedure is simple enough and is done in javascript by "site.js". Just divide the Xdsp by the Ximg and also divide the Ydsp by the Yimg values. The smaller of these two division result values is the scaling factor that you want to apply to the image so that it will just fit at its largest proportioned size within the window. But let's say you want a margin around the image or that you want to center it within the window. To provide a margin we can just multiply the scaling factor by a reduction factor. Now we take (Xdsp minus Ximg) divided by two as the left edge setting for the image. We can emply a similar trick for vertical centering. We might want to think about consideration for a banner the size (height) of which would come out of the display window size, say reducing Ydsp for a top banner.

In the javascript we read the HTML for the image and extract the dimensions. Then we get the window dimensions, do the two (height and width) subtractions and compare the two results to get the scaling factor. Use that to modify the "transform: scale" function in our CSS. Then calculate the left and top image margins and modify the CSS to reflect the calculated margins. A perfect fit every time and it is fairly quick.

The page design uses eight screen size breakpoints as a "Responsive Web Design". The breakpoint selection is done within the CSS and is determined by the viewing device's screen width. This allows the web pages' display to be adjusted to accommodate the device, whether that is a cell phone or a tablet or a laptop or a desktop. For my purposes I chose to use an eight column responsive layout, so for example a gallery will be 8, 7, 6, 5, 4, 3, 2, or 1 column(s) wide depending on the user screen width. These next 9 screen sizes reflect my "Responsive Web Design" Screen Width Breakpoint Steps. The first entry reflects the narrowest supported screen width of 320 pixels. Here is a webpage, OpenBrowserBySize which will display some of the IsoBlock content in a chosen window size. This gives me a quick way to check layouts and element sizing. The HTML for OpenBrowserBySize is included in the downloads. Another related utility page included in the downloads is ShowBrowserSize.

Displays by Breakpoint Sizes:
"320x534" "480x640" "600x800" "840x1200" "960x1280" "1280x1024" "1440x1024" "1920x1080" "2560x1440"

For the gallery display what all of the foregoing means is that we don't so much have a large range of thumbnail image sizes as that we simply put more or less of the thumbnails on a display screen page. What was selected for this site are thumbnail images with a maximum heighth or width of 480 pixels. With our choices of screen width size breakpoints, that size seems to result in a clear and legible display for the thumbnail images regardless of the number of columns displayed in a gallery, and it makes each thumbnail image file small enough to allow for a fairly quick loading gallery. As stated above individual (larger sized) images are only downloaded when selected for display in the full screen modal window. I used a moderate size limit for the edge dimensions or size of the large individual images as a tradeoff between size and download time, and on this site I chose a maximum edge length of of 1080 or 1440 pixels for the individual images.

Each page in the website uses three CSS files, and only one of those is unique to each page as it contains definitions for that page's screen background. The CSS sets the background image, it is sized to fit and fill the display, and it has its opacity adjusted to make it more subdued. A second CSS file, normalize.css, is used to "normalize" cross browser differences to hopefully minimize browser specific tweaks like resets among other things. It can be found at this repo "https://github.com/necolas/normalize.css/" The third is a site wide style sheet used by every page, SiteStyles.css. The single file approach has benefits in terms of modifications and maintenance, and it helps preserve a continuity of appearance across the site.

Each page in the site has the same HTML code at the start of the page with the two distinctions being the page title and the name of the page specific CSS file. Thus all the head information, along with the page header and the navigation menu, are identical from page to page for a uniform appearance across the site. The page header contains an animated GIF that changes upon a mouseover. A navigation menu sits below the page header. The menu consists of either single click main entries, such as the IsoBlock home button, or drop down entries below the main entry as for example the image galleries. The menu has a "View Menu"/"Hide Menu" button to remove the menu from the viewing area. The menu appears a row of main entries or as a column of main entries depending upon screen width. The menu background is transparent while it is inactive, but it becomes opaque when moused over and when it "sticks" to the top of the display screen upon scrolling. In the future I might automate the construction of the head, the header, and the menu, but for now it will take a small edit to modify the HTML.

Below the top sections of HTML mentioned above we find the page contents HTML and beneath that the HTML for a footer with some contact and copyright information and a section of javascript common to each page.

The page content for IsoBlock.com is basically either image galleries or text. I am especially happy with the Perl programs i made to write out the HMTL code required to display the images. For example the web gallery page for an 1126 image gallery is typically 21248 lines of easily readable formatted HTML (there are 1,097,481 characters). I can't imagine how long it would take to manually type all that HTML. Using the programs, all I have to do is tell it which folder to use as the source for the images and provide (optionally) a text file with descriptive information about some of the images. The programs do the repetitive work. All that I have to do is copy and paste the HTML files made by the programs between the top sections of HTML and the footer section of HTML. Anyone can easily make a web gallery using my template to display images from a directory folder by running these programs and then patching the resulting files into the boilerplate HTML provided.

This next following is the HTML code at the top of every page on the site, beginning with the HEAD section. These first few lines set up some browser parameters and specify the source of the document fonts as being online from the "googleapis" site. This gives us a uniform font set whatever device is viewing the page. Each page has a separate "title" entry and this is one of two differences from page to page across the site.

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Test Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link href="https://fonts.googleapis.com/css?family=
Merriweather|Roboto|Roboto+Slab:400,700|Roboto+Black:400,700|Rubik:700"
rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">

These next few lines are boilerplate of an informational nature and can be changed to suit the implementation specifics.

    <meta NAME="Date&TimeLastModified" CONTENT="Mon 06/11/2018 15:48">
    <meta name="description" content="Art, Images, & Prosody by Bob Wright">
    <meta name="copyright" content="Copyright 2018 by IsoBlock.com">
    <meta name="author" content="Bob Wright">
    <meta name="keywords" content=
"art,drawing,sketching,watercolor,ink,pencils,artist,graphics,poetry,illustration">

Next we specify the site rating and tell search engine robots or "spiders" to index our site/page contents. Then we provide a "base reference address" for the site root directory followed by entries for three CSS stylesheet files. Only one of these three CSS files changes from page to page across the site, and it is the stylesheet that specifies the display of the page background. The other two CSS files are common to all pages across the site. One of them, normalize.css, is adapted from a gitHUB distribution and it attempts to minimize cross browser disparities among other things. I like it and I find it useful. I note that some of its settings may not be suitable for all sites. On this page for example, the HTML displayed here uses the <pre> element and its settings/definitions in normalize.css were not suitable. The other CSS file is SiteStyles.css and it contains all of the remaining site wide stylesheet information. The last two items covered here are a "site manifest file", which has not been implemented, and specifications for the site "favicon" used in browser bookmarks.

    <meta name="rating" content="general">
    <meta name="robots" content="index, follow"/>
    <!-- <base href="http://www.isoblock.com/"> -->
    <!-- <base href="http://127.0.0.1/"> -->
    <!-- <base href="./" -->
    <base href"files://D:/Users/Wright/MyWebCode/IsoBlockWebsite/">
    <link href="./CSS/normalize.css" media="screen" rel="stylesheet" type="text/css"/>
    <!-- <link href="./CSS/main.css" rel="stylesheet"> -->
    <link href="./CSS/homestyle.css" media="screen" rel="stylesheet" type="text/css"/>
    <link href="./CSS/SiteStyles.css" media="screen" rel="stylesheet" type="text/css"/>
    <!-- <link rel="manifest" href="site.webmanifest"> -->
    <link rel="icon" href="./favicon.ico" type="image/ico"/>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
</head>
<!-- End of the HTML head section-->
<!-- =========================== -->

Then we actually start to display some content. Maybe we should encourage folks with obsolete browsers to upgrade? And then we display the page header which is consistent on each page of the site. This header consists of a small animated GIF image and a large site name. The animated GIF changes into a second, different GIF on a mouseover. The header scales appropriately so that it is legible across the range of device display sizes.

Following next beneath the logo and site name header is the navigation menu. Its contents are fairly straightforward and can be easily changed to reflect a desired ordering and page naming for the site. The menu consists of either single click main entries, such as the IsoBlock home button, or drop down entries below the main entry as for example the image galleries. The menu has a "View Menu"/"Hide Menu" button to remove the menu from the viewing area. The menu appears a row of main entries or as a column of main entries depending upon screen width. The menu background is transparent while it is inactive, but it becomes opaque when moused over and when it "sticks" to the top of the display screen upon scrolling. Those aspects of its behavior are controlled by javascript and CSS.

<!-- +++++++++++++++++++++++ -->
<!-- Build out the page -->
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<main class="pageWrapper" id="container">

<!-- ++++++++++++++++++++++ -->
<!-- Logo and name -->
<header id="myHeader">
<span class="logo" id="logo"><img id="myLogo" src="./Images/Spin3.gif" onmouseover="showOverlay()" onmouseout="showLogo()"></span><span class="sitename" id="sitenam e">IsoBlock.com</span>
</header>

<!-- +++++++++++++++++++++++ -->
<!-- Navigation menu -->
<div class="navbar-wrapper"><button class="toggle-button">Hide Menu</button>
<nav class="navbar" id="navbar">
<ul class="menu">
<li class="menuColumn" id="menuColumn1"><div><a href="./default.html"><span class="material-icons">home</span> IsoBlock</a></div></li>
<li class="menuColumn" id="menuColumn2"><div><a href="#"><span class="material-icons">info_outline</span> About us</a></div>
<ul>
<li class="menuEntry"><a href="./ItsMe.html">Hello, It's me</a></li>
<li class="menuEntry"><a href="./BobbyAndTheImageFactory.html">Copyright and Use</a></li>
<li class="menuEntry"><a href="./ArtSalesAndCommissions.html">Art Sales and Commissions</a></li>
<li class="menuEntry"><a href="./WebDesignServices.html">Web Design Services</a></li>
<li class="menuEntry"><a href="./IsoBlockSiteSourceCode.html">IsoBlock Site Source Code</a></li>
<li class="menuEntry"><a href="http://BobWright.deviantART.com">Bob on deviantART</a></li>
<li class="menuEntry"><a href="https://www.facebook.com/ArtByBobWright/">Bob's Art on FaceBook</a></li>
</ul>
</li>
<li class="menuColumn" id="menuColumn3"><div><a href="#"><span class="material-icons">mode_edit</span> Graphic Art Galleries</a></div>
<ul>
<li class="menuEntry"><a href="./LDOJgallery1.html">A Long Drawn Out Journey 1</a></li>
<li class="menuEntry"><a href="./LDOJgallery2.html">A Long Drawn Out Journey 2</a></li>
<li class="menuEntry"><a href="./LDOJgallery3.html">A Long Drawn Out Journey 3</a></li>
<li class="menuEntry"><a href="./FractalGallery1.html">Fractal Images</a></li>
</ul>
</li>
<li class="menuColumn" id="menuColumn4"><div><a href="#"><span class="material-icons">text_fields</span> Prose and Poetry</a></div>
<ul>
<li class="menuEntry"><a href="./ShinySideUp.html">Shiny Side Up, Sticky Side Down (poetry)</a></li>
<li class="menuEntry"><a href="./BadToVerse.html">From Bad To Verse (poetry)</a></li>
</ul>
</li>
<li class="menuColumn" id="menuColumn5"><div><a href="http://peaceleaf.org/default.html"><span class="material-icons">open_in_browser</span> PeaceLeaf.org</ a></div></li>
<li class="menuColumn" id="menuColumn6"><div><a href="mailto:bob_wright@isoblock.com"><span class="material-icons">mail</span> EMail us</a></div></li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
<!-- end navigation buttons -->
<!-- =========================== -->

So with the exception of the page title and the page specific CSS filename for its background image, all of the pages in the IsoBlock.com website use this same code shown above as the first parts of the HTML for each page. The next part of the HTML for each page is particular to its content.

<!-- +++++++++++++++++++++++++++++ -->
<!-- the message -->
<div class="article-wrapper">
<article class="textcontent">
<h1 style="text-align:center;margin-top:10vw;">Welcome to the IsoBlock.com home page.</h1>
<h2 style="text-align:center;">We hope you enjoy your visit to our site!<br>
You can navigate through the site contents by using the menu above.</h2></div>
</article>
</div>

It is this part of the HTML that distinguishes one page from another by virtue of that content. We will return to this section of the HTML in a moment. After the content section of the page HTML is the page footer and a script section which defines the various javascript files used on each page and across the site. You can see from the HTML below that this part of the web page code is fairly straightforward

<!-- +++++++++++++++++++++++ -->
<!-- footer -->
<footer id="myFooter">
<details>
<summary><span class="material-icons" style="color: #966">message</span>&nbsp;&nbsp;&nbsp;Contents &copy; copyright 2018 by&nbsp;<span class="material-icons">mail</span>&nbsp;<a href="mailto:bob_wright@isoblock.com">Bob Wright.</a></summary>
<p>&nbsp;The Name, Images, &amp; Logo of "IsoBlock" are trademarks of&nbsp;<A href="http://isoblock.com/">IsoBlock.com</A>&nbsp;Last modified Mon 06/11/2018 15:48</p>
</details>
</footer>
</main>
<!-- End of the web page display -->
<!-- ====================== -->

<!-- ++++++++++++++++++++ -->
<!-- Java script section -->
<!-- Placed at the end of the document so the page loads faster -->
<script src="js/modernizr-3.5.0.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-3.3.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- generic sticky functions -->
<script src="js/stickUp.js"></script>
<script src="js/site.js"></script>
<!-- End of the Java script section-->
<!-- ======================= -->

<!-- +++++++++++++++++++++++ -->
<!-- End of the web page -->
</body>
</html>

In the explanatory text above we mentioned the part of the HTML for each web page that displays the contents for that page, what makes one page different from another. That part of the HTML, which I call "the message", can be text material, perhaps mixed with other content like images or tables, or it can be a specifically designed image gallery. This web page is itself one example of mixed text contents, while the simple text message from the IsoBlock.com homepage used in the introduction of the content section above is another. There are also some other text based pages in the IsoBlock site.

But one of the major parts of this web page project is the image gallery content and the way that this content is generated. Each image in the gallery has two sections of HTML associated with its display. The first section of the image gallery HTML next below is responsible for showing a brief text introduction to the gallery and then for displaying a thumbnail of each image within a responsively sized gallery of such images. This code segment below includes the HTML used for one (the first) gallery thumbnail. Each thumbnail in turn will have its own unique HTML code segment. Every thumbnail has a caption at its top edge, and in some cases clicking on a tagged caption will result in the dropdown display of some descriptive text. Both the thumbnail and its caption respond to a hover by placing a border and a shadow around either the caption or the thumbnail. The gallery is described as one very long row that is divided into columns, one for each thumbnail. The thumbnails are displayed as "figure" elements with "figcaption" captions that employ the "details" element within to effect the descriptive text display. Every thumbnail has "alt" captioning for accessibility. The gallery employs a responsive web design (implemented through the CSS style sheet) that displays the thumbnail images in 1, 2, 3, 4, 5, 6, 7, or 8 columns, depending on the viewing device screen size.

<!-- +++++++++++++++++++++++++++++ -->
<!-- the message -->
<div class="article-wrapper">
<article class="pageContent">

<!-- ++++++++++++++++++++ -->
<!-- the image gallery -->
<h1>A Long Drawn Out Journey, Folio 2</h1>
<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;This image gallery is Folio 2 of A Long Drawn Out Journey.<br>
Most of the images were drawn within the last few years, and most of them are done using traditional media.<br>
&nbsp;&nbsp;&nbsp;&nbsp;Some of the images show a sequence of stages or steps in the creation of a finished work and you may find that progression entertaining. Or you may not.<br></strong></p>
<h2>Click on any image to see it full screen.<br>
Click on a tagged Caption (&nbsp;<span class="material-icons">message</span>&nbsp;) for more information about that image.</h2>

<div class="galleryRow">

<div class="galleryColumn">
<figure class="galleryFigure">
<details>
<summary><figcaption class="galleryFigCap"><span class="material-icons">message</span> : day 1023</figcaption></summary>
<p class="galleryFigDesc"> Wow. New discovery all over again. Eagle Charco pencils and Eberhard Faber Koal-Black charcoal pencils. I drew a gesture sketch with a Wolff's B Carbon Drawing pencil and then used a 4B Koal-Blak to accentuate the linework. Colored this a bit with som e dayglo pencils. All on yellow construction paper (Pacon) 9x12. this is a scan of the drawing</p>
</details>
<img src="./gallery/webgallerythumbs/day1023.jpg" alt="day1023.jpg : day 1023" style="width:100%" onclick="openModal();currentSlide(1)" cla ss="hover-shadow cursor">
</figure>
</div>

<!-- more image gallery thumbnails-->

</div>

Following the gallery display HTML we have the "modal" display HTML which displays each image at a larger size. The modal is basically a popup window that fills the browser screen. A good bit of CSS goes into making it. Javascript is used to index each image to allow for "previous" and "next" buttons that scroll through the images and javascript is also used to implement the "close" button and to display the image number or "slide index" for each image. The larger images displayed in the modal are scaled to fit the window, and each image has a caption which may optionally be tagged to display some descriptive text. This HTML below shows the details of the image display modal.

<!-- ++++++++++++++++++++ -->
<!-- modal image display -->
<div id="myModal" class="modal">
<div class="modal-content">

<div class="mySlides">
<figure class="fill-screen">
<details class="modalCaption">
<summary><figcaption class="modalFigCap"><span class="material-icons">message</span> : day 1023</figcaption></summary>
<p class="galleryFigDesc"> Wow. New discovery all over again. Eagle Charco pencils and Eberhard Faber Koal-Black charcoal pencils. I drew a gesture sketch with a Wolff's B Carbon Drawing pencil and then used a 4B Koal-Blak to accentuate the linework. Colored this a bit with some dayglo pencils. All on yellow construction paper (Pacon) 9x12. this is a scan of the drawing</p>
</details>
<img class="make-it-fit" src="./gallery/webgallery/day1023.jpg" alt="day1023.jpg : day 1023">
</figure>
</div>

<!-- more image gallery modals-->

<a class="prev" id="prev" onclick="plusSlides(-1)"><span class="material-icons">arrow_back_ios</span>Prev&nbsp;</a>
<div class="numberText" id="numberText">slideIndex of slides.length inserted here</div>
<a class="next" id="next" onclick="plusSlides(1)">Next&nbsp;<span class="material-icons">arrow_forward_ios</span></a>
<!--<a class="prev" id="prev" onclick="plusSlides(-1)">&#10094;</a>-->
<!--<a class="next" id="next" onclick="plusSlides(1)">&#10095;</a>-->
<span class="closeModalButton cursor" onclick="closeModal()">Close&nbsp;<span class="material-icons">close</span></span>
<!--<span class="closeModalButton cursor" onclick="closeModal()">&times;</span>-->
</div>
</div>
</article>

So the two segments of HTML for each image are fairly straightforward. However it becomes more complex when you have a whole gallery of images to construct. One of the drawings galleries here on IsoBlock.com has 400 drawings. That means the two segments of HTML have to be repeated 400 times, each time with individual content and details, and this example gallery page is 8778 lines of HTML code. Probably more than you want to hand edit.

As it happens one of the goals of this project was to get a handle on simple Perl scripts, and Perl is ideally suited for this kind of application where we want to write a similar thing a number of times. We construct two templates of the HTML we wish to repeat with variable data values to be replaced by the program functions and we write these filled out templates to two files. The segment of Perl code listed below illustrates the two HTML templates and how my Perl program writes these formatted lines to the two (HTML) files which are then pasted into the content area of the web page. Note that I have used Image::Size and File::Copy modules in the Perl code.

# print an HTML entry
print FGF "<div class=\"galleryColumn\">\n";
print FGF "<figure class=\"galleryFigure\">\n";
print FGF "<details>\n";
if ($IMGdesc ne "") {
print FGF "<summary><figcaption class=\"galleryFigCap\"><span class=\"material-icons\">message</span> : ",$Caption,"</figcaption></summary>\n";
print FGF "<p class=\"galleryFigDesc\">",$IMGdesc,"</p>\n";
} else {
print FGF "<summary><figcaption class=\"galleryFigCap\">",$Caption,"</figcaption></summary>\n";
}
print FGF "</details>\n";
print FGF "<img src=\"",$THUMBdir,"/",$IMG,"\" alt=\"",$IMG," : ",$Caption,"\" style=\"width:100%\" onclick=\"openModal();currentSlide(",$SlideIndex,")\" class=\"hover-shadow cursor\">\n";
print FGF "</figure>\n";
print FGF "</div>\n\n";

print FMF "<div class=\"mySlides\">\n";
print FMF "<figure class=\"fill-screen\">\n";
print FMF "<details>\n";
if ($IMGdesc ne "") {
print FMF "<summary><figcaption class=\"modalFigCap\"><span class=\"material-icons\">message</span> : ",$Caption,"</figcaption></summary>\n";
print FMF "<p class=\"galleryFigDesc\">",$IMGdesc,"</p>\n";
} else {
print FMF "<summary><figcaption class=\"modalFigCap\">",$Caption,"</figcaption></summary>\n";
}
print FMF "</details>\n";
print FMF "<img class=\"make-it-fit\" src=\"",$IMGdir,"/",$IMG,"\" alt=\"",$IMG," : ",$Caption,"\">\n";
print FMF "</figure>\n";
print FMF "</div>\n\n";

The IsoBlock.com website uses a specified directory structure, and the two Perl scripts used to construct image gallery page contents also use the same directory structure. The website root directory contains the various HTML files for each page, the favorites icon, an empty "robots.txt" file, and a number of subdirectories. Two of those subdirectories are named "CSS" and "js" and their content is evident by their names. A third subdirectory is named "Images" and it contains images such as the background for each page and the GIF animations in the header; "Images" is used for items displayed in the wrapper as opposed to in the "message" content. Then there are a number of subdirectories for image gallery content. On the IsoBlock website one of these image gallery subdirectories is named "gallery" and another is named "fractalGallery". The name of an image root directory is user determined. Under each of these image gallery root directories are two more subdirectories, one named "webgallery" and one named "webgallerythumbs". So for example we have "./fractalGallery/webgallerythumbs" and "./fractalGallery/webgallery" under "./fractalGallery" and "./gallery/webgallerythumbs" and "./gallery/webgallery" under "./gallery".

To build an image gallery you need the full sized images intended as gallery content in the image gallery root directory and you need the thumbnail images intended as gallery content in "webgallerythumbs" directory under the image gallery root. Then you can run the "readCaptions.pl" Perl program. The Perl scripts on IsoBlock.com program are free software; you can redistribute them and/or modify it under the same terms as Perl itself. The Perl programs are included in the download package.

Program readCaptions.pl reads a directory of a folder's image files (default "./gallery") into an array, saves the directory filenames for use as image captions and copies the directory contents (the image files) into a target folder while removing any spaces from the filename. The program also renames the thumbnail file images in their folder to remove spaces from those filenames as well. At the end of this stage we have two folders under a root image folder, one containing full size image files and having filenames without spaces and a second containing thumbnails for each image file and those also having filenames with no spaces. We also have an array of default caption names (the image filenames WITH spaces) and an array of all the image filenames (each without spaces).

readCaptions.pl then parses a specified text file for an entry that matches the name of a source image filename for each file in the gallery, and if it finds a match uses part of the associated text for a new (alternative) image caption, and also (if it is present) uses part of the associated text as descriptive content (details). Finally this information, ie an image filename, an image caption (default or from a text file), and any optional descriptive text from the descriptions file, are arranged and saved as a text data file which can be used by writeHTMLgallery.pl to write HTML code for an image gallery.

The default filename for the output text data file is "gallerylist.txt" and it may be set as the first command line option. The default image root folder is named "./gallery" and is set by the second option. The third option will set the filename of the text file that contains optional caption and description information, this file's default filename is "NewArtCaptions.txt". The entries in the descriptive text file are unsorted. "NewArtCaptions.txt" or another text descriptions file has this format for each entry:

image file name.type
an alternative caption
one or more lines of descriptive text
[a blank line]

shown by this example:

my red balloon.jpg
I really like this photo!
This is one of my favorite photos from last summer.
The balloon is so pretty!

[a blank line]

command line usage:

Perl readCaptions.pl ["output text data file"] ["image root folder name"] ["descriptions text file"]

These next screen captures show the expected results from running readCaptions.pl from within a directory that contains "./gallery" as a subdirectory with image files contained in it and also having in turn two subdirectories, one of which will be the target directory for the renamed image files the program will write and one of which will contain thumbnail image files that will be renamed.

D:\Users\Wright\Code\webGalleryWriter>perl readCaptions.pl imageGalleryList.txt
'gallerylist.txt' file name from command line: imageGalleryList.txt
'gallerylist.txt' file name: imageGalleryList.txt
Image source file root directory: ./gallery
Target file directory: ./gallery/webgallery
Source folder file count: 1125
IMAGE folder file count: 1125
Thumbnail file directory: ./gallery/webgallerythumbs
Thumbnail file count: 1127

Reading Captions text from : NewArtCaptions.txt
caption file line count: 2809

IMG file name : '/IMG1:1031101755.jpg' index 0
Caption name : '/CAP:1031101755' index 1
IMG file name : '/IMG2:1102102329.jpg' index 1
Caption name : '/CAP:1102102329' index 2
IMG file name : '/IMG3:1108100333.jpg' index 2
Caption name : '/CAP:1108100333' index 3
IMG file name : '/IMG4:1109100247.jpg' index 3
Caption name : '/CAP:1109100247' index 4

.... more file info ....

IMG file name : '/IMG400:day1023.jpg' index 531
Caption name : '/CAP:day 1023' index 532
New Caption : '/NAC:day 1023' & caption file index: 532
New description: '/DSC:Wow. New discovery all over again. Eagle Charco pencils and Eberhard Faber Koal-Black charcoal pencils. I drew a gesture sketch with a Wolff's B Carbon Drawing pencil and then used a 4B Koal-Blak to accentuate the linework. Colored this a bit with some dayglo pencils. All on yellow construction paper (Pacon) 9x12. this is a scan of the drawing' & caption file index: 533

.... more file info ....

IMG file name : '/IMG1124:zeusagonistesfin.jpg' index 2702
Caption name : '/CAP:zeus agonistes fin' index 2703
New Caption : '/NAC:zeus agonistes fin' & caption file index: 2703
New description: '/DSC:Zeus Agonistes (the agony of Zeus) [final]' & caption file index: 2704
New description: '/DSC:ok, finally finished this one after a number of visits. this is pastels and homemade gouache on Pacon black construction paper 9x12. this is my first real foray into this media and it was a lot of fun for me.' & caption file index: 2705
IMG file name : '/IMG1125:zombieday706.jpg' index 2706
Caption name : '/CAP:zombie day 706' index 2707
New Caption : '/NAC:zombie day 706' & caption file index: 2707
New description: '/DSC:zombie day 706' & caption file index: 2708
New description: '/DSC:more ink' & caption file index: 2709
3419 : gallery file line count
1125 : gallery image count
2710 :captions entry count
3419 :gallery list array entries

Here readCaptions.pl is waiting for a keyboard entry to continue, just hit Enter and the program will next display the data it will use to write the image gallery text data file.

'/IMG1:1031101755.jpg' index : 0
'/CAP:1031101755' index : 1
'/IMG2:1102102329.jpg' index : 2
'/CAP:1102102329' index : 3
'/IMG3:1108100333.jpg' index : 4
'/CAP:1108100333' index : 5
'/IMG4:1109100247.jpg' index : 6
'/CAP:1109100247' index : 7

.... more file info ....

'/IMG400:day1023.jpg' index : 891
'/NAC:day 1023' index : 892
'/DSC:Wow. New discovery all over again. Eagle Charco pencils and Eberhard Faber Koal-Black charcoal pencils. I drew a gesture sketch with a Wolff's B Carbon Drawing pencil and then used a 4B Koal-Blak to accentuate the linework. Colored this a bit with some dayglo pencils. All on yellow construction paper (Pacon) 9x12. this is a scan of the drawing' index : 893
'/IMG401:day1024.jpg' index : 894
'/NAC:day 1024' index : 895
'/DSC:Elk' index : 896

.... more file info ....

'/IMG1124:zeusagonistesfin.jpg' index : 3411
'/NAC:zeus agonistes fin' index : 3412
'/DSC:Zeus Agonistes (the agony of Zeus) [final]' index : 3413
'/DSC:ok, finally finished this one after a number of visits. this is pastels and homemade gouache on Pacon black construction paper 9x12. this is my first real foray into this media and it was a lot of fun for me.' index : 3414
'/IMG1125:zombieday706.jpg' index : 3415
'/NAC:zombie day 706' index : 3416
'/DSC:zombie day 706' index : 3417
'/DSC:more ink' index : 3418

D:\Users\Wright\Code\webGalleryWriter>

Here above the readCaptions.pl program has completed its run and it has also written a text data file which will be used to construct an image gallery. Next below are some sample clips from that text data file, "imageGalleryList.txt"

/IMG1:1031101755.jpg
/CAP:1031101755
/IMG2:1102102329.jpg
/CAP:1102102329
/IMG3:1108100333.jpg
/CAP:1108100333

.... more file info ....

/IMG400:day1023.jpg
/NAC:day 1023
/DSC:Wow. New discovery all over again. Eagle Charco pencils and Eberhard Faber Koal-Black charcoal pencils. I drew a gesture sketch with a Wolff's B Carbon Drawing pencil and then used a 4B Koal-Blak to accentuate the linework. Colored this a bit with some dayglo pencils. All on yellow construction paper (Pacon) 9x12. this is a scan of the drawing

.... more file info ....

/IMG1124:zeusagonistesfin.jpg
/NAC:zeus agonistes fin
/DSC:Zeus Agonistes (the agony of Zeus) [final]
/DSC:ok, finally finished this one after a number of visits. this is pastels and homemade gouache on Pacon black construction paper 9x12. t his is my first real foray into this media and it was a lot of fun for me.
/IMG1125:zombieday706.jpg
/NAC:zombie day 706
/DSC:zombie day 706
/DSC:more ink

If you look at these descriptions of the operation of readCaptions.pl above, you may see that this example contained 1125 images in the "./gallery" source folder. Now this text data file, which we told the program to name "imageGalleryList.txt", also contains information on all 1125 of the files, and in fact a gallery could be setup using the entire data file, that is a gallery of 1125 images. I think it better to have a number of smaller galleries because a large gallery, even of thumbnails, will compromise load time. Smaller is better. All we need to do to accomplish that is to use extracted sections from the data file, divide it up into the size gallery we want. So for example we could copy the first 400 entries in the text data file into a new data file to create a gallery of 400 images. A number of different image galleries can have their image source files combined into a single large directory. While each image entry in the gallery text data has an index number prefixed to the image file name, those numbers are not used by this next program which instead counts the number of image entries in its input data file.

writeHTMLgallery.pl is a Perl program which writes two HTML files, one for a gallery of images and a second to show individual images at a larger size. These two HTML files, "galleryfigures.html" and "modalfigures.html" are to be merged with header and menu HTML code sections along with footer HTML code to construct a complete web page.

writeHTMLgallery gets one or two items from the command line or it will alternatively use default values. One item is the name of the text data file describing each image to be included in the gallery. The second item is the root folder for the image resources. This folder name is used to make the HTML markup for the location of each image thumbnail for the gallery and the location of the larger images for the modal (full screen) display.

The default name for the text data file is "gallerylist.txt" and the default image root folder name is "gallery". The image files and the thumbnail image files are within two directories under that root. These folders have default names of "./gallery/webgallery" and "./gallery/webgallerythumbs". writeHTMLgallery parses the text data file and the folder name information into an associated HTML file segment to display all of the image thumbnails and caption text as a gallery, and into a second HTML file segment to display the individual images and each caption, as two HTML files, "galleryfigures.html" and "modalfigures.html".

command line usage:

perl writeHTMLgallery.pl ["gallery image data file"] ["image files root folder name"]

Here is the result of running writeHTMLgallery.pl using a 400 entry text data file cut from the 1125 entry output from readCaptions.pl created previosly.

D:\Users\Wright\Code\webGalleryWriter>perl writeHTMLgallery.pl imageGalleryList.txt
Image data text file: imageGalleryList.txt
Reading gallery image data from : imageGalleryList.txt
Image Source file directory: ./gallery/webgallery
Thumbnail files directory : ./gallery/webgallerythumbs
gallery data file line count: 1602

D:\Users\Wright\Code\webGalleryWriter>

This program produced two HTML files, one named "galleryfigures.html" and the other named "modalfigures.html". This next listing shows a small part of the "galleryfigures.html" file.

<div class="galleryColumn">
<figure class="galleryFigure">
<details>
<summary><figcaption class="galleryFigCap"><span class="material-icons">message</span> : day 1023</figcaption></summary>
<p class="galleryFigDesc"> Wow. New discovery all over again. Eagle Charco pencils and Eberhard Faber Koal-Black charcoal pencils. I drew a gesture sketch with a Wolff's B Carbon Drawing pencil and then used a 4B Koal-Blak to accentuate the linework. Colored this a bit with som e dayglo pencils. All on yellow construction paper (Pacon) 9x12. this is a scan of the drawing</p>
</details>
<img src="./gallery/webgallerythumbs/day1023.jpg" alt="day1023.jpg : day 1023" style="width:100%" onclick="openModal();currentSlide(1)" cla ss="hover-shadow cursor">
</figure>
</div>

<div class="galleryColumn">
<figure class="galleryFigure">
<details>
<summary><figcaption class="galleryFigCap"><span class="material-icons">message</span> : day 1024</figcaption></summary>
<p class="galleryFigDesc"> Elk Day 1024 Daily Drawing Challenge reference photo more different. this is a bedtime sketch i finished today, done with Conte No3 Black Drawing pencil and charcoal pencils in 4B and 6B, and pastels, PITT pastel pencils in browns and black and some g ray sticks, touch of greens. all on a 9x12 sheet of blue cardstock. eye catchlights are Bic witeout correction fluid. this is my first past el piece in quite a long time and it was fun. kind of cartoonish but that's what i do. lol.</p>
</details>
<img src="./gallery/webgallerythumbs/day1024.jpg" alt="day1024.jpg : day 1024" style="width:100%" onclick="openModal();currentSlide(2)" cla ss="hover-shadow cursor">
</figure>
</div>

--- HTML for more images follows ---

This listing below shows a small part of the second "modalfigures.html" file.

<div class="mySlides">
<figure class="fill-screen">
<details>
<summary><figcaption class="modalFigCap"><span class="material-icons">message</span> : day 1023</figcaption></summary>
<p class="galleryFigDesc"> Wow. New discovery all over again. Eagle Charco pencils and Eberhard Faber Koal-Black charcoal pencils. I drew a gesture sketch with a Wolff's B Carbon Drawing pencil and then used a 4B Koal-Blak to accentuate the linework. Colored this a bit with som e dayglo pencils. All on yellow construction paper (Pacon) 9x12. this is a scan of the drawing</p>
</details>
<img class="make-it-fit" src="./gallery/webgallery/day1023.jpg" alt="day1023.jpg : day 1023">
</figure>
</div>

<div class="mySlides">
<figure class="fill-screen">
<details>
<summary><figcaption class="modalFigCap"><span class="material-icons">message</span> : day 1024</figcaption></summary>
<p class="galleryFigDesc"> Elk Day 1024 Daily Drawing Challenge reference photo more different. this is a bedtime sketch i finished today, done with Conte No3 Black Drawing pencil and charcoal pencils in 4B and 6B, and pastels, PITT pastel pencils in browns and black and some g ray sticks, touch of greens. all on a 9x12 sheet of blue cardstock. eye catchlights are Bic witeout correction fluid. this is my first past el piece in quite a long time and it was fun. kind of cartoonish but that's what i do. lol.</p>
</details>
<img class="make-it-fit" src="./gallery/webgallery/day1024.jpg" alt="day1024.jpg : day 1024">
</figure>
</div>

--- HTML for more images follows ---

writeHTMLgallery.pl has been modified so that it now gets the pixel dimensions of each image and writes those values into "width" and "height" values in the HTML along with a unique "Id" used by the javascript resizer.

So these two HTML files are then combined together with the heading and footing HTML sections as described above to create an image gallery. And there you have it: your own portfolio website!

There is also a template for a "book" or "album" page image gallery. This page has a large "cover image" on its landing page, and the cover serves as a click entry for the "storybook" contents which is a sequence of captioned images. The template lends itself to showing a series of panels for a graphic novel or a progression of drawing steps or perhaps showing the rooms of a house shown on the album cover. The HTML for this template is basically identical to the image gallery templates with the exception that there is only one (large) image in the gallery display. The modal that shows each page in the storybook is identical to the previously discussed gallery modal display methods.

The download repository files...

This is a download link for an archive of the complete IsoBlock.com site template files.
The download includes all the HTML, CSS, javascript files, and Perl programs to build the HTML for image galleries.

If you like this website the download will provide templates and tools with some instructional material to let you roll your own rendition. The image files for IsoBlock.com when taken together are of some fairly large size, so the "gallery" and "fractalGallery" directories in the download package are empty of image files and only serve to demonstrate the directory structure of the site. However, everything you need in the way of resources is included in the archive. You will need to have tools like the Perl interpreter along with the Image::Size and File::Copy modules installed to run the two Perl programs, and you will need to have a plain text editor to customize the HTML.

If instead of using the resources provided to construct your own website you would prefer to have us set up a website for you, the details for this service are described under the "About us" menu heading on the "Web Design Services" page.

Permitted Use

The free resources available to download on the IsoBlock.com website (that is the HTML/CSS/Javascript/Perl that is used to make IsoBlock.com) may be used in personal & commercial projects of any kind within the Creative Commons agreement known as BY. The BY means "by", that attribution is to be given for the work, specifically that you must give me credit for my work and you may not claim my work as yours. These resources may NOT be redistributed or made available "as is" anywhere, but may be incorporated into works, such as templates, applications or other materials which are themselves sold or redistributed online.

Note well that portions of some of the HTML/CSS/Javascript/Perl that is used to make IsoBlock.com may be modifications of found examples or tutorials and that in those instances my claim in copyright extends ONLY to those portions of the resulting HTML/CSS/Javascript/Perl that reflect my work and contribution to the end result. Specifically I make no claim in ownership for the work of any other person.

Spreading the word about IsoBlock.com is appreciated and we would be grateful for a link to this website, but that is not mandatory.

If you wish to promote these resources from your blog or elsewhere, you must link to this page where users may download the files and may not link directly to the download files.