<html lang="en">
<head>
- <meta charset="utf-8" />
- <title><!--~$title show {~-->Images<!--~}~--></title>
- <link rel="stylesheet" href="style.css" type="text/css">
+ <title><!--~$title show {~-->~$host~ Admin: Manage Images<!--~}~--></title>
</head>
<body>
<!--~$body show {~-->
<!--~display {~-->
- <h2>Image details</h2>
+ <h1>~$host~ Admin Control Panel</h1>
- <p><a href="admin_images?new=1">Add another image</a></p>
+ <h2><!--~image nonempty {~--><span class="wfpl_thumb" style="background-image: url(~image image_src_thumb~); vertical-align: middle;"></span><!--~}~--> Details for Image ~caption empty {~~name nonempty {~"~name html~"~}~~}~~caption nonempty {~"~caption html~"~}~</h2>
- <p><a href="admin_images">Back to images</a></p>
+ <p><a href="admin_images">← Back to images</a></p>
- <p><a href="admin_images?edit_id=~id attr~">Edit</a></p>
+ <p><a href="admin_images?edit_id=~id attr~">Edit this image</a></p>
- <!--~references {~--><p><strong>Note:</strong> This image appears on the following page~count s~: <!--~data {~--><a href="~filename attr~">~title html~</a><!--~ sep {~-->, <!--~}~--><!--~}~--></p><!--~}~-->
-
- <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>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>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><strong>On the right: </strong>(with the page text to the left of it)</div><div><code class="html"><span class="wfpl_ifr" style="background-image: url(~src~); width: ~width~px; padding-top: ~height~px">~caption empty {~&nbsp;~}~~caption nonempty {~~caption html~<br>~}~</span></code></div>
- <div><strong>On the left: </strong>(with the page text to the right of it)</div><div><code class="html"><span class="wfpl_ifl" style="background-image: url(~src~); width: ~width~px; padding-top: ~height~px">~caption empty {~&nbsp;~}~~caption nonempty {~~caption html~<br>~}~</span></code></div>
- <div><strong>Centered: </strong>(with nothing to either side)</div><div> <code class="html"><div class="wfpl_ic" style="background-image: url(~src~); padding-top: ~height~px; width: ~width~px">~caption html~</div></code></div>
- <div><img src="~src~" alt="" /></div>
- <!--~}~-->
+ <h2>Uses of this image</h2>
- <div style="margin-top: 30px"><strong>Full Size (centered): </div><div></strong> <code class="html"><div class="wfpl_ic" style="background-image: url(~image image_src~); padding-top: ~image image_height~px">~caption html~</div></code></div>
- <div><img src="~image image_src~" width="~image image_width~" height="~image image_height~" alt="" /></div>
+ <!--~references unset {~--><p>This image does not appear on any pages.</p><!--~}~-->
- <!--~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>
- <!--~}~-->
+ <!--~references {~--><p>This image appears on the following page~count s~: <!--~data {~--><a href="~filename attr~">~title html~</a><!--~ sep {~-->, <!--~}~--><!--~}~--></p><!--~}~-->
+
+ <h2>Instructions</h2>
+
+ <p>Now that you've uploaded this image, you can insert it into a page with the <strong>page editor</strong>. You can get to the <strong>page editor</strong> from the <a href="admin">control panel</a> or by going to a page you'd like to edit, then clicking "Edit this page" at the top.</p>
+
+ <div style="margin-top: 25px"><strong>Full Size (centered):</strong></div>
+ <div class="wfpl_ic"><div class="wfpl_i" style="background-image: url(~image image_src_full~); padding-top: ~image image_aspect~"></div>~caption nonempty {~~caption html~~}~</div>
<!--~}~-->
<!--~form {~-->
+ <h1>~$host~ Admin Control Panel</h1>
+
<h2><!--~id unset {~-->Add a new image<!--~}~--><!--~id {~-->Edit image "~name html~"<!--~}~--></h2>
<form action="admin_images" method="post" enctype="multipart/form-data"><!--~id {~--><div style="display: none"><input type="hidden" name="edit_id" value="~id attr~"></div><!--~}~--><input type="hidden" name="MAX_FILE_SIZE" value="~upload_max_filesize~">
<div class="field"><input type="file" name="image"><input type="hidden" name="old_image" value="~image attr~"></div>
<div class="caption">Name (optional)</div>
- <div class="field_notes">This name is only displayed on the image administration page.</div>
+ <div class="field_notes">This name is only displayed on administration pages.</div>
<div class="field"><input type="text" name="name" value="~name attr~"></div>
<div class="caption">Caption (optional)</div>
<div class="field_notes">Here's some symbols you might want to paste in: © — –</div>
<div class="field"><input type="text" name="caption" value="~caption attr~"></div>
- <div class="caption">Sizes</div>
- <div class="field_notes">(Enter the width and height (in pixels) at which you'd like to use this image. Put an x between them with no spaces, so it looks like this: 100x200. The image will be scaled so it maintains it's aspect ratio (shape) and just fits inside those dimentions. You can use this image at multiple different sizes, by entering a different set of dimensions (WIDTHxHEIGHT) on each line)</div>
- <div class="field"><textarea rows="9" cols="22" name="sizes">~sizes html~</textarea></div>
-
- <div class="caption"> </div>
- <div class="field"><input type="submit" name="save" value="Save"></div>
+ <div class="caption field"><input type="submit" name="save" value="Save"></div>
</form>
<!--~}~-->
<!--~listings once {~-->
- <h2>Images Listing</h2>
+ <h1>~$host~ Admin Control Panel</h1>
+
+ <h2>Manage Images</h2>
<!--~listings once_if {~-->
<p><a href="admin_images?new=1">[Add a new image]</a></p>
- <table cellspacing="0" cellpadding="4" border="1" summary="">
+ <table cellspacing="0" cellpadding="4" border="0" summary="" class="evenodd">
<tr><th>Image</th><th>Name</th><th>Caption</th><th> </th></tr><!--~listings {~-->
<tr>
- <td class="listing"><a href="admin_images?id=~id~"><!--~image nonempty {~--><img src="~image thumb_src~" width="~image thumb_width~" height="~image thumb_height~" alt=""><!--~}~--></a></td>
+ <td class="listing"><a href="admin_images?id=~id~"><!--~image nonempty {~--><span class="wfpl_thumb" style="background-image: url(~image image_src_thumb~)"></span><!--~}~--></a></td>
<td class="listing"><a href="admin_images?id=~id~">~name html~<!--~name empty {~--><em>(blank)</em><!--~}~--></a></td>
<td class="listing"><a href="admin_images?id=~id~">~caption html~<!--~caption empty {~--><em>(blank)</em><!--~}~--></a></td>
<td><a href="admin_images?admin_images_delete_id=~id~" onclick="return confirm('Permanently delete?')">[delete this image]</a></td>
Got questions, comments, patches, etc.? Contact Jason Woofenden