![[Home page]](../PythonPowered.gif "Home page"){kind=small}
| Books | Code | Blog | Python | Author | Train | Find | ©M.Lutz |
File: thumbspage/examples/3.0-upgrades/_viewable/_index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- Unicode -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- mobile -->
<style>
body {font-family: Arial, Helvetica, sans-serif;} /* text of title, etc. */
body {margin-left: 12px; margin-right: 12px;} /* for table+curves */
html {-webkit-text-size-adjust: 100%;} /* ios landscape no zoom */
</style>
<!-- plus analytics code, etc. -->
<title>thumbspage 3.0 upgrades</title>
</head>
<body>
<h1>thumbspage 3.0 Upgrades</h1>
<P>
This gallery was generated by
<A HREF="https://learning-python.com/thumbspage.html">thumbspage</A> 3.0.
It demos the new:
<UL>
<LI>Omitted filename extensions
<LI>Gallery wraparound messages
<LI>Automatic end-of-gallery images
<LI>Raw-view messages on image taps
<LI>HTML tags and entities in notes
<LI>Explicit ordering with ORDER.txt
<LI>Alternative labels with CAPTIONS.py
<LI>Alternative notes with NOTES.py
<LI>Per-host or forced dark color theme
<LI>Configurable line spacing for text
<LI>Image filenames in info popups
<LI>Keypress shortcuts in viewer pages
<LI>Swipes on touchpads and mice too
<LI>Error checks for build filenames
<LI>Preset defaults and links color
</UL>
<P>
To view the complete source folder of this gallery, tap
<A HREF="_viewable/">here</A>.
This demo is built with <A HREF="_generate.sh">this</A> and
<A HREF="_publish.sh">this</A>.
It uses files
<A HREF="ORDER.txt">ORDER.txt</A>, <A HREF="CAPTIONS.py">CAPTIONS.py</A>,
and <A HREF="NOTES.py">NOTES.py</A> added in 3.0, as well as .note files
<A HREF="A note-file demo.jpg.note">here</A> and
<A HREF="y-nothing-special.JPG.note">here</A> added earlier but
augmented with embedded tags and entities in 3.0.
<P>
For a more realistic 3.0 demo, see
<A HREF="https://learning-python.com/trnpix">this gallery</A>.
For 3.0 screenshots, see <A HREF="../3.0-screenshots/index.html">this</A>.
For more info in 3.0's upgrades, see its release notes in the
<A HREF="../../user_configs.py">configs file</A> and
<A HREF="../../UserGuide.html#3.0">User Guide</A>.
</p>
<!-- ======================================================================= -->
<!-- END CUSTOM HEADER -->
<!-- ======================================================================= -->
<!-- ======================================================================= -->
<!-- START FLOATING TOP -->
<!-- ======================================================================= -->
<!--=======================================================================
HTML+styles+JavaScript for optional index-page floating Top button [2.0].
All uppercase formatting targets are replaced with configs by Python script.
Inline code, to avoid imposing extra requirements for custom HEADER.html
files (though browsers allow <style> blocks in <body>, as does HTML 5.2+).
Top goes to page top only: use custom headers or edit this for other targets.
===========================================================================-->
<!-- Clients using a custom FOOTER.html may also need something like this:
.finalelement { /* add extra space above Top's bottom at end of page */
margin-bottom: 80px; /* else, text at end may be overlayed and unviewable */
}
<P class=finalelement> <==on the last content line or item (or <div>+padding, <br>)
-->
</P>
<button onclick="topClick();"
id="topBtn"
title="Go to index"
style="
display: none; /* initially HIDDEN (changed on scroll iff JS) */
position: fixed; /* float/persist */
bottom: 36px; /* e.g., above site toolbar */
right: 8px; /* left of scroll area */
z-index: 99; /* covering priority */
font-size: 15px;
border: none;
outline: none;
cursor: pointer; /* change on mouse-over */
padding: 10px;
border-radius: 4px; /* rounded corners */
color: white; /* foreground (text) color, default=white */
background-color: #999; /* background color, default=grey */
">Top</button>
<!-- Set up click/scroll callbacks iff JS is enabled -->
<script>
// Get and save the button in global (window) scope
var topButton = document.getElementById("topBtn"); // i.e., "Top" above
// Set the default scroll constant: global so pages can change if needed
var topButtonShowAt = 500; // px from top, show Top below this cutoff
function topClick() {
//
// Go to the top of page (but keep prior location in history for back).
// Clear hover shading (else recessed color gets stuck on mobile)?
// No: unhover doesn't work as tried for main site - punt on shading.
//
window.location.href = '#'; // go/scroll to top (no tag)
//topButton.style.backgroundColor = '#999'; // no: unhover for mobile?
}
function scrollFunction() {
//
// Adapted from web examples; the odd || test is for browser interoperability:
// see, for instance, https://dev.opera.com/articles/fixing-the-scrolltop-bug/.
//
// Clients can reset global topButtonShowAt for larger preambles; else Top
// may appear above/before an actual #top tag if it's not top of page #.
//
var showat = topButtonShowAt; // local
// N pixels from the top after scroll?
if (document.body.scrollTop > showat || document.documentElement.scrollTop > showat) {
topButton.style.display = "block"; // show Top
} else {
topButton.style.display = "none"; // hide Top
}
}
// Show/hide button whenever user scrolls below/above N px from top
window.onscroll = scrollFunction; // source had "function() {scrollFunction()};"; why?
</script>
<!-- ======================================================================= -->
<!-- END FLOATING TOP -->
<!-- ======================================================================= -->
<!-- ======================================================================= -->
<!-- START THUMBS TABLE -->
<!-- ======================================================================= -->
<p>
<div id="thumbslinks"
style="background-color: lightgrey;
border: 1px solid black;
border-radius: 6px;
margin-top: 24px; margin-bottom: 24px;
padding-top: 15px; padding-bottom: 15px;
overflow-x: auto;"
>
<div style="display: inline-block; vertical-align: middle; min-width: 144px; width: 17.0em; padding: 6px 8px;">
<div style="margin-top: 8px; text-align: center;"><A href="_thumbspage/z-explicitly-first.jpg.html">
<img src="_thumbspage/z-explicitly-first.jpg" style="border: thin solid black;" alt="Image thumbnail" title="View image"></A></div>
<div style="color: black; white-space: nowrap; margin-top: 0px; margin-bottom: 8px; text-align: center;">z-explicitly-first</div>
</div>
<div style="display: inline-block; vertical-align: middle; min-width: 144px; width: 17.0em; padding: 6px 8px;">
<div style="margin-top: 8px; text-align: center;"><A href="_thumbspage/x-notes-dict-test.png.html">
<img src="_thumbspage/x-notes-dict-test.png" style="border: thin solid black;" alt="Image thumbnail" title="View image"></A></div>
<div style="color: black; white-space: nowrap; margin-top: 0px; margin-bottom: 8px; text-align: center;">captions demo: / \ | < > ? * : " 👏</div>
</div>
<div style="display: inline-block; vertical-align: middle; min-width: 144px; width: 17.0em; padding: 6px 8px;">
<div style="margin-top: 8px; text-align: center;"><A href="_thumbspage/A%20note-file%20demo.jpg.html">
<img src="_thumbspage/A%20note-file%20demo.jpg" style="border: thin solid black;" alt="Image thumbnail" title="View image"></A></div>
<div style="color: black; white-space: nowrap; margin-top: 0px; margin-bottom: 8px; text-align: center;">A note-file demo</div>
</div>
<div style="display: inline-block; vertical-align: middle; min-width: 144px; width: 17.0em; padding: 6px 8px;">
<div style="margin-top: 8px; text-align: center;"><A href="_thumbspage/build-on-android-1.jpg.html">
<img src="_thumbspage/build-on-android-1.jpg" style="border: thin solid black;" alt="Image thumbnail" title="View image"></A></div>
<div style="color: black; white-space: nowrap; margin-top: 0px; margin-bottom: 8px; text-align: center;">building on Android
is
😱🤪?</div>
</div>
<div style="display: inline-block; vertical-align: middle; min-width: 144px; width: 17.0em; padding: 6px 8px;">
<div style="margin-top: 8px; text-align: center;"><A href="_thumbspage/y-nothing-special.JPG.html">
<img src="_thumbspage/y-nothing-special.JPG" style="border: thin solid black;" alt="Image thumbnail" title="View image"></A></div>
<div style="color: black; white-space: nowrap; margin-top: 0px; margin-bottom: 8px; text-align: center;">y-nothing-special</div>
</div>
</div></p>
<!-- ======================================================================= -->
<!-- END THUMBS TABLE -->
<!-- ======================================================================= -->
<!-- ======================================================================= -->
<!-- START THEME AND SPACING -->
<!-- ======================================================================= -->
<STYLE>
/*---------------------------------------------------------------------
[3.0] CSS code for automatic dark theme per host device's settings.
Auto-added to generated index and viewer pages if useCannedDarkTheme
in user_configs.py is 'host' or 'always'. 'always' uses the dark mode
here whether set on host or not, and 'host' toggles between dark mode
here and other color configs per the host device's mode setting.
This is a template with two uppercase replacements and a % escape.
Its BODY:not(#body-viewer) and BODY#body-viewer mean only index and
pages, respectively (<body> may be in a custom HEADER.html for indexes).
Its rules generally override host pages (and hence, user_configs.py),
subject to CSS specificity and ordering. Themes can be coded in
JavaScript too, but CSS is auto-responsive to host-setting changes.
Edit this file as desired, but please mod this brittle code with care
if you're unfamiliar with CSS; it's complex because thumbspage was not
originally designed for this use case, and this file overrides and
does not mesh with the original and simpler color-configs model.
For more info, see the comments at user_configs.py's useCannedDarkTheme
switch and the overview in UserGuide.html#3.0.
Nit: this may have been coded more simply as a top-level media query
that selects between light and dark color sets, but we also need to
override colors in custom index-page headers but not custom index-page
footers, and these may use arbitrary styling. Feedback is welcome.
-----------------------------------------------------------------------*/
/* LIGHT MODE, PER HOST */
@media (prefers-color-scheme: light) { /* if light mode on host, now or post change */
/* tbd: if used, overrides some user_configs.py settings */
}
/* DARK MODE, PER HOST OR FORCED */
@media (prefers-color-scheme: dark) {
/* if dark mode on host, now or post user change */
/* used for light _or_ dark if forcing dark theme */
BODY:not(#body-viewer) { /* index page only, may have HEADER/FOOTER.html */
color: #e0e0e0; /* off-white, #e0e0e0 between #eee and #ddd */
background-color: #121212; /* off-black, #121212 per material design (black=#000) */
}
/* viewer-page global fg/bg colors use a template-viewpage media query */
IMG { /* all image borders, index and viewer pages */
border-color: /* !important to override style= attr in HTML */
#e0e0e0 !important;
}
#theimg { /* border of images in viewer pages only */
border-color:
#e0e0e0 !;
}
BODY:not(#body-viewer) IMG { /* else bright imgs can make text hard to read */
filter: brightness(90%); /* but just for index, not viewer pages; %=one */
}
#thumbslinks { /* index-page table (fixed) or div (dynamic) */
border-color: #e0e0e0 !important; /* !important: override HTML style= */
background-color: #242424 !important;
}
#thumbslinks TD { /* image labels/captions in thumbs table (fixed) */
color: #e0e0e0 !important;
}
#thumbslinks DIV:last-child { /* image labels/captions in thumbs div (fixed) */
color: #e0e0e0 !important;
}
BODY A { /* index-page hyperlinks, overrides HEADER.html */
color: cyan; /* not !important: may mod links in FOOTER.html */
} /* & not > specificity "BODY:not(#body-viewer)" */
BODY#body-viewer A { /* hyperlinks on viewer pages + <a> tags in Notes */
color: cyan !important; /* there is no footer to impact on viewer pages */
}
.NoteBox, .InfoBox { /* viewer popups in dark theme: note, info, msg */
color: wheat; /* can be configed in user_configs.py vs here */
background-color: black; /* viewer page is implied: not in indexes */
border-color: white; /* border of popups viewer (!= border of image) */
}
}
</STYLE>
<style>p, li {line-height: 1.25em;} </style>
<!-- ======================================================================= -->
<!-- END THEME AND SPACING -->
<!-- ======================================================================= -->
<!-- Generated 2025-06-20 @11:09:02, by thumbspage 3.0: learning-python.com/thumbspage.html -->
<!-- ======================================================================= -->
<!-- START DEFAULT FOOTER -->
<!-- ======================================================================= -->
<p style="margin-bottom: 80px;"><i>Gallery built by <A HREF="https://learning-python.com/thumbspage.html">thumbspage.py</A></i></p>
</body></html>