Fix url for single images without titles

center-key · Jun 18, 2024 · 488464e · 488464e
1 parent f26f7ef
commit 488464e
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 47 deletions.
diff --git a/src/gallery/console/css/gallery-setttings.less b/src/gallery/console/css/gallery-setttings.less
@@ -14,6 +14,6 @@
 .gallery-settings fieldset.settings-website input.dna-field-show-description+span { font-weight: lighter; }
 .gallery-settings fieldset.settings-tabs label { display: inline; }
 .gallery-settings fieldset.settings-tabs label span { display: inline; }
-.gallery-settings fieldset.settings-tabs label input[type=text] { width: 40%; }
+.gallery-settings fieldset.settings-tabs label input[type=text] { width: 40%; margin-bottom: 1em; }
 .gallery-settings fieldset.settings-tabs label input[type=checkbox] { margin-left: 3px; }
 .gallery-settings fieldset.settings-tabs [data-item-type=page]:first-child label:last-child { display: none; }
diff --git a/src/gallery/console/css/portfolio-image.less b/src/gallery/console/css/portfolio-image.less
@@ -24,19 +24,20 @@
 //          figcaption
 .portfolio-image { position: relative; display: flex; background-color: gainsboro; border: 2px solid silver; padding: 10px; margin: 10px 0px 0px 0px; }
 .portfolio-image >form { flex-grow: 1; max-width: none; }
+.portfolio-image >form >label { padding-left: 0px; margin-bottom: 1em; }
 .portfolio-image >form >label:first-child span { display: inline-block; transition: color 400ms; }
-.portfolio-image >form >label:first-child input { margin: 0px 5px 1em 0px; }
-.portfolio-image >form >label.display-off >span:first-child { color: firebrick; }
+.portfolio-image >form >label:first-child input { margin: 0px 10px 0px 5px; }
+.portfolio-image >form >label.display-off >span:first-child { color: rgb(16, 12, 12); }
 .portfolio-image >form >label textarea { height: 3.2em; }
-.portfolio-image >form >p { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
-.portfolio-image >form >p label:last-child { white-space: nowrap; }
+.portfolio-image >form >p { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
+.portfolio-image >form >p label:last-child { white-space: nowrap; padding-left: 0px; }
 .portfolio-image >form >p label >span { display: inline-block; }
 .portfolio-image >form >p label input[type=text] { width: 4em; }
 .portfolio-image >form >p label input[type=checkbox] { margin: 0px 3px; }
 .portfolio-image >form >p >span >span { display: block; }
 .portfolio-image >form >p >span >i.font-icon { font-size: 0.9rem; transition: color 400ms; cursor: help; }
 .portfolio-image >form >p >span >i.font-icon:hover { color: black; }
-.portfolio-image >form >p >span >label >input[type=checkbox] { margin: 0px; }
+.portfolio-image >form >p >span >label >input[type=checkbox] { margin: 0px 5px 0px 0px; }
 .portfolio-image >form .actions { position: absolute; left: 10px; bottom: 10px; }
 .portfolio-image >form .actions i.font-icon { font-size: 1.8rem; margin-right: 2px; opacity: 1; transition: all 400ms; }
 .portfolio-image >form .actions i.font-icon:hover { color: black; }

diff --git a/src/gallery/console/index.php b/src/gallery/console/index.php
@@ -150,31 +150,29 @@
                <input value=~~subtitle~~ data-on-smart-update=admin.ui.saveSettings
                   placeholder="Enter website subheader">
             </label>
-            <div>
-               Style:
-               <div>
-                  <label>
-                     <input type=checkbox data-prop-checked=~~darkMode~~
-                        data-on-change=admin.ui.saveSettings><span>Dark mode</span>
-                  </label>
-                  <label>
-                     <input type=checkbox data-prop-checked=~~imageBorder~~
-                        data-on-change=admin.ui.saveSettings><span>Show image border</span>
-                  </label>
-                  <label>
-                     <input type=checkbox data-prop-checked=~~captionCaps~~
-                        data-on-change=admin.ui.saveSettings><span>Caption in all caps</span>
-                  </label>
-                  <label>
-                     <input type=checkbox data-prop-checked=~~captionItalic~~
-                        data-on-change=admin.ui.saveSettings><span>Caption in italics</span>
-                  </label>
-                  <label>
-                     <input type=checkbox data-prop-checked=~~showDescription~~
-                        data-on-change=admin.ui.saveSettings><span>Show description</span>
-                  </label>
-               </div>
-            </div>
+            <fieldset>
+               <legend>Style:</legend>
+               <label>
+                  <input type=checkbox data-prop-checked=~~darkMode~~
+                     data-on-change=admin.ui.saveSettings><span>Dark mode</span>
+               </label>
+               <label>
+                  <input type=checkbox data-prop-checked=~~imageBorder~~
+                     data-on-change=admin.ui.saveSettings><span>Show image border</span>
+               </label>
+               <label>
+                  <input type=checkbox data-prop-checked=~~captionCaps~~
+                     data-on-change=admin.ui.saveSettings><span>Caption in all caps</span>
+               </label>
+               <label>
+                  <input type=checkbox data-prop-checked=~~captionItalic~~
+                     data-on-change=admin.ui.saveSettings><span>Caption in italics</span>
+               </label>
+               <label>
+                  <input type=checkbox data-prop-checked=~~showDescription~~
+                     data-on-change=admin.ui.saveSettings><span>Show description</span>
+               </label>
+            </fieldset>
             <label>
                <span>
                   Stamp icon code:
@@ -189,18 +187,22 @@
                <input type=text value=~~stampTitle~~ data-on-smart-update=admin.ui.saveSettings
                   placeholder="Enter stamp tooltip help">
             </label>
-            <div>
-               Footer icons:
+            <fieldset>
+               <legend>Footer icons:</legend>
                <label>
-                  <input type=checkbox data-prop-checked=~~ccLicense~~ data-on-change=admin.ui.saveSettings>
+                  <input type=checkbox data-prop-checked=~~ccLicense~~
+                     data-on-change=admin.ui.saveSettings>
                   Creative Commons
-                  <a href=https://creativecommons.org/licenses/by-sa/4.0><i data-icon=info-circle></i></a>
+                  <a href=https://creativecommons.org/licenses/by-sa/4.0>
+                     <i data-icon=info-circle></i>
+                  </a>
                </label>
                <label>
-                  <input type=checkbox data-prop-checked=~~bookmarks~~ data-on-change=admin.ui.saveSettings>
+                  <input type=checkbox data-prop-checked=~~bookmarks~~
+                     data-on-change=admin.ui.saveSettings>
                   Social share
                </label>
-            </div>
+            </fieldset>
             <label>
                <span>Footer link URL:</span>
                <input type=text value=~~linkUrl~~ data-on-smart-update=admin.ui.saveSettings>
@@ -214,14 +216,19 @@
             <label>
                <span>
                   Google Site Verification:
-                  <a href=https://support.google.com/webmasters/answer/9008080><i data-icon=info-circle></i></a>
+                  <a href=https://support.google.com/webmasters/answer/9008080>
+                     <i data-icon=info-circle></i>
+                  </a>
                </span>
                <input type=text value=~~googleVerification~~ spellcheck=false
                   data-on-smart-update=admin.ui.saveSettings placeholder="Enter 44 character code">
             </label>
             <div>
-               <b>*</b><small>Supports HTML entities like <code>&amp;copy;</code></small>
-               <a href=https://www.toptal.com/designers/htmlarrows/symbols><i data-icon=info-circle style="margin: 0px"></i></a>
+               <b>*</b><small>Use HTML entities for symbols,
+               such as "&amp;copy;" for "&copy;".</small>
+               <a href=https://www.toptal.com/designers/htmlarrows/symbols>
+                  <i data-icon=info-circle></i>
+               </a>
             </div>
          </fieldset>
          <fieldset class=settings-tabs>
@@ -240,7 +247,9 @@
                </div>
             </div>
             <label>
-               <span>Email for contact (Tab #3):<i data-icon=info-circle data-href=../#contact></i></span>
+               <span>
+                  Email for contact (Tab #3):<i data-icon=info-circle data-href=../#contact></i>
+               </span>
                <input type=email value=~~contactEmail~~
                   data-on-smart-update=admin.ui.saveSettings placeholder="Address for messages">
             </label>

diff --git a/src/gallery/css/page-layout-style-modes.less b/src/gallery/css/page-layout-style-modes.less
@@ -34,7 +34,7 @@ body.dark-mode {
          >span {
             background-color: dimgray;
             }
-         >span.selected,
+         >span.dna-selected,
          >span:hover {
             background-color: gray;
             }

diff --git a/src/gallery/frontend-server/gallery.php b/src/gallery/frontend-server/gallery.php
@@ -72,6 +72,7 @@ function toImageHtml($image, $stampIcon, $stampTooltip) {
       $imageTitleHtml = str_replace("'", "&apos;",
          "<span class=image-caption>{$image->caption}</span>" .
          "<span class=image-description>{$image->description}</span>");
+      $code = empty($image->code) ? "one-image" : $image->code;
       return "
          <figure itemprop=associatedMedia itemscope itemtype=https://schema.org/ImageObject>
             <a href=~data~/portfolio/{$image->id}-large.jpg data-title='{$imageTitleHtml}' itemprop=contentUrl>
@@ -83,7 +84,7 @@ function toImageHtml($image, $stampIcon, $stampTooltip) {
             </aside>
             <figcaption>
                <span itemprop=caption>{$image->caption}</span>
-               <a href=image/{$image->id}/{$image->code} class=plain itemprop=url><i data-icon=link></i></a>
+               <a href=image/{$image->id}/{$code} class=plain itemprop=url><i data-icon=link></i></a>
                <p itemprop=description>{$image->description}</p>
             </figcaption>
          </figure>";

diff --git a/src/gallery/js/gallery.js b/src/gallery/js/gallery.js
@@ -13,10 +13,11 @@ const gallery = {
    start() {
       globalThis.document.querySelectorAll('body >footer .hide-me').forEach(elem => elem.remove());
       const options = {
-         delegate: '>a',  //child items selector, click to open popup
-         type:     'image',
-         image:    { titleSrc: 'data-title' },
-         gallery:  { enabled: true },
+         allowHTMLInTemplate: true,
+         delegate:            '>a',  //child items selector, click to open popup
+         gallery:             { enabled: true },
+         image:               { titleSrc: 'data-title' },
+         type:                'image',
          };
       const figures = globalThis.document.querySelectorAll('.gallery-images figure');
       if (figures.length)