Tweak admin_images page

better instructions

better clumping (of images and code)

show captions

show grey background behind html code (and border around it)

diff --git a/admin_images.html b/admin_images.html
index 438d868..348c193 100644 (file)
--- a/admin_images.html
+++ b/admin_images.html
@@ -20,23 +20,25 @@
 
                <h3>How to put one of these images on a page</h3>
                <ol>
-                       <li>Choose which size you want. If you want a size that is not shown below, <a href="admin_images?edit_id=~id attr~">edit this image</a> and add a new display size.</li>
-                       <li>Above the image (at your chosen size) you will see HTML code with a light gray background. Drag (or triple click) to select the HTML code for your desired alignment, and copy it to the clipboard.</li>
-                       <li>Open the page editor in another tab (so you can refer to these instructions while you use it.)</li>
+                       <li>Choose which size you want below. If you want a size that is not shown, <a href="admin_images?edit_id=~id attr~">edit this image</a> and add a new display size.</li>
+                       <li>Below the image (at your chosen size) you will see HTML code with a light gray background. Drag (or triple click) to select the HTML code for your desired alignment, and copy it to the clipboard.</li>
+                       <li><a href="admin_pages" target="_blank">Open the page editor in another tab</a> (so you can refer to these instructions while you use it.)</li>
                        <li>In the page editor, type "HERE HERE HERE" where you'd like to insert the image, then click the "Source" button at the top/left of the editor.</li>
-                       <li>Now you will see the HTML code for the page. Find where it says "HERE HERE HERE", select those three words, then paste over them. You can paste with Ctrl-V (on Mac that's Command-V) or with the Edit menu, but the right-click paste may not work.</li>
+                       <li>Now you will see the HTML code for the page. Find where it says "HERE HERE HERE", select those three words, then paste over them. You can paste with Ctrl-V (on Mac that's Command-V) or with the Edit menu, but the right-click paste probably won't work.</li>
                        <li>Click the "Source" button again to get back to the normal view. Your image should now be visible in the editor (though you may have to scroll down to see it.)</li>
                </ol>
                
                <!--~smaller {~-->
+                       <div style="margin-top: 40px"><strong>Width: ~width~ pixels, Height: ~height~ pixels</strong></div>
+                       <div style="font-size: 10px"><img src="~src~" alt="" />~caption nonempty {~~caption html~~}~</div>
                        <div><strong>On the right: </strong>(with the page text to the left of it)</div><div><code class="html">&lt;span class="wfpl_ifr" style="background-image: url(~src~); width: ~width~px; padding-top: ~height~px"&gt;~caption empty {~&amp;nbsp;~}~~caption nonempty {~~caption html~&lt;br&gt;~}~&lt;/span&gt;</code></div>
                        <div><strong>On the left: </strong>(with the page text to the right of it)</div><div><code class="html">&lt;span class="wfpl_ifl" style="background-image: url(~src~); width: ~width~px; padding-top: ~height~px"&gt;~caption empty {~&amp;nbsp;~}~~caption nonempty {~~caption html~&lt;br&gt;~}~&lt;/span&gt;</code></div>
                        <div><strong>Centered: </strong>(with nothing to either side)</div><div> <code class="html">&lt;div class="wfpl_ic" style="background-image: url(~src~); padding-top: ~height~px; width: ~width~px"&gt;~caption html~&lt;/div&gt;</code></div>
-                       <div><img src="~src~" alt="" /></div>
                <!--~}~-->
 
-               <div style="margin-top: 30px"><strong>Full Size (centered): </div><div></strong> <code class="html">&lt;div class="wfpl_ic" style="background-image: url(~image image_src~); padding-top: ~image image_height~px"&gt;~caption html~&lt;/div&gt;</code></div>
-                       <div><img src="~image image_src~" width="~image image_width~" height="~image image_height~" alt="" /></div>
+               <div style="margin-top: 40px"><strong>Full Size (centered):</strong></div>
+               <div><img src="~image image_src~" width="~image image_width~" height="~image image_height~" alt="" />~caption nonempty {~~caption html~~}~</div>
+               <div><code class="html">&lt;div class="wfpl_ic" style="background-image: url(~image image_src~); padding-top: ~image image_height~px"&gt;~caption html~&lt;/div&gt;</code></div>
 
                <!--~no_sizes {~-->
                        <p>To display this image smaller, <a href="admin_images?edit_id=~id attr~">edit this image</a> and enter display size(s).</p>

diff --git a/style.less b/style.less
index 25e9f91..9caf762 100644 (file)
--- a/style.less
+++ b/style.less
@@ -101,6 +101,13 @@ footer {
        margin-bottom: 15px;
 }
 
+code.html {
+       display: block;
+       font: 12px monospace;
+       border: 1px solid black;
+       background: #ccc;
+}
+
 .caption {
        margin-top: 15px;
        font-weight: bold;