X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl-cms.git;a=blobdiff_plain;f=admin_images.html;h=9633384970235dd455afa1057f05d2cb40a9330a;hp=b5c56c8c94025cf0eba6d2f404ed159d7847a914;hb=3ed0f0b53ff1b3ea3e30292bf39eb6e30935e9eb;hpb=2fa5c8c3885a0bcdd69fc91365a0b3d6cbb5d1cf diff --git a/admin_images.html b/admin_images.html index b5c56c8..9633384 100644 --- a/admin_images.html +++ b/admin_images.html @@ -2,77 +2,35 @@ - - <!--~$title show {~-->Images<!--~}~--> - + <!--~$title show {~-->~$host~ Admin: Manage Images<!--~}~--> - -

Image details

- -

Add another image

- -

Back to images

- -

Edit

- -

Note: This image appears on the following page~count s~: ~title html~,

- -

How to put one of these images on a page

-
    -
  1. Choose which size you want. If you want a size that is not shown below, edit this image and add a new display size.
    2. -
  2. 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.
    3. -
  3. Open the page editor in another tab (so you can refer to these instructions while you use it.)
    4. -
  4. 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.
    5. -
  5. 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.
    6. -
  6. 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.)
    7. -
- - -
On the right: (with the page text to the left of it)
<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>
-
On the left: (with the page text to the right of it)
<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>
-
Centered: (with nothing to either side)
<div class="wfpl_ic" style="background-image: url(~src~); padding-top: ~height~px; width: ~width~px">~caption html~</div>
-
- - -
Full Size (centered):
<div class="wfpl_ic" style="background-image: url(~image image_src~); padding-top: ~image image_height~px">~caption html~</div>
-
- - -

To display this image smaller, edit this image and enter display size(s).

- - - - -

Back to images

- -

Edit

- - +

~$host~ Admin Control Panel

+

Add a new imageEdit image "~name html~"

+ +
~caption html~
+ +
Image
-
+
+ -
Name (optional)
-
This name is only displayed on the image administration page.
+
Name (used for sorting, optional)
+
This value is never displayed to site visitors. Your collection of images are sorted by name, so you can use this field to keep your images organized.
Caption (optional)
Here's some symbols you might want to paste in: ©   —   –
-
Sizes
-
(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)
-
- -
 
-
+
@@ -81,19 +39,25 @@ -

Images Listing

+

~$host~ Admin Control Panel

+ +

Manage Images

[Add a new image]

- - +
ImageNameCaption 
+ + - - - - - + + + + + +
+
[sort by age]
[sort by name/caption]
[sort by caption/name]
+
~name html~(blank)~caption html~(blank)[delete this image]
Name: ~name html~
Caption: ~caption html~		[edit][delete]