feature 1519: admin instructions are dispatched into several tabs. Only

applied to en_UK and fr_FR. The help content itself needs some updates
but it will be another set of commits, in this commit, I nearly only
modified the container.

The new "Add Photos" help page only introduces you to 3 main ways to add
photos: direct upload, pLoader and FTP. Each of them has a dedicated tab
on the Admin>Photos>Add screen.

No use of the big question mark icon linked to the Help pages in the
administration header, to avoid having this icon twice : in the header
+ in the content next to H2.

git-svn-id: http://piwigo.org/svn/trunk@5182 68402e56-0260-453c-a942-63ccdbb3a9ee

8 files changed, 213 insertions, 310 deletions

diff --git a/language/en_UK/help.html b/language/en_UK/help.html
deleted file mode 100644
index 6b7effa15..000000000
--- a/language/en_UK/help.html
+++ /dev/null
@@ -1,310 +0,0 @@
-<div class="instructions">
-<h2>Help</h2>
-
-<div id="instructionPLoader" class="instructionBlock">
-  <div
-    id="pLoader_header"
-    class="instructionBlockHeaderCollapsed"
-    onclick="blockToggleDisplay('pLoader_header', 'pLoader_content')"
-  ><span>
-    Add photos, the pLoader way
-  </span></div>
-  <div
-    id="pLoader_content"
-    class="instructionBlockContent"
-    style="display:none"
-  >
-    <p><a href="http://piwigo.org/ext/extension_view.php?eid=270">pLoader for Windows</a> or <a href="http://piwigo.org/ext/extension_view.php?eid=269">pLoader for Linux</a> : description, download and details about new revisions.</p>
-    <ol>
-      <li>Create a directory "upload" next to directory "galleries" in your Piwigo installation, with write access.</li>
-      <li>Install pLoader on your computer, start it and fill the connection settings : your gallery URL, your username and password.</li>
-      <li>Drag'n drop photos from your directory browser into pLoader photo selection.</li>
-      <li>Create a category and select it.</li>
-      <li>Select some photos.</li>
-      <li>Click on the green arrow to transfer photos in your gallery</li>
-    </ol>
-Congratulations! You have successfuly created the first category of your photo gallery.
-  </div> <!-- pLoader_content -->
-</div> <!-- instructionPLoader -->
-
-<div id="instructionFTP" class="instructionBlock">
-  <div
-    id="FTP_header"
-    class="instructionBlockHeaderCollapsed"
-    onclick="blockToggleDisplay('FTP_header', 'FTP_content')"
-  ><span>
-    Add photos, the FTP way
-  </span></div>
-  <div
-    id="FTP_content"
-    class="instructionBlockContent"
-    style="display:none"
-  >
-
-<h3>Quick Start</h3>
-
-<ol>
-  <li>Create a directory on your computer.</li>  
-
-  <li>Copy some photos inside this directory, resize them for web display. <em>Warning</em>: the name of directories and files must contain only letters, figures, "-", "_" or ".". No blank space, no accentuated characters.</li>
-
-  <li>With a FTP client, copy your directory in the "galleries" directory of your Piwigo installation.</li>
-
-  <li>Logon your gallery and go to <span class="pwgScreen">Administration &raquo; Pictures &raquo; Thumbnails</span> to create missing thumbnails.</li>
-
-  <li>Go to <span class="pwgScreen">Administration</span> and click on the big Synchronization button.</li>
-</ol>
-
-Congratulations! You have successfuly created the first category of your photo gallery.
-
-<h3>Directories and files organization</h3>
-<ul>
-
-  <li>
-
-    <p>Category directories are in the Piwigo directory
-    "galleries". Here follows the directory tree of a very small gallery (but
-    using many features) :</p>
-
-    <pre>
-.
-|-- admin
-|-- doc
-|-- galleries
-|   |-- category-1
-|   |   |-- category-1.1
-|   |   |   |-- category-1.1.1
-|   |   |   |   |-- category-1.1.1.1
-|   |   |   |   |   |-- pwg_high
-|   |   |   |   |   |   +-- wedding.jpg
-|   |   |   |   |   |-- thumbnail
-|   |   |   |   |   |   +-- TN-wedding.jpg
-|   |   |   |   |   +-- wedding.jpg
-|   |   |   |   +-- category-1.1.1.2
-|   |   |   +-- category-1.1.2
-|   |   |-- category-1.2
-|   |   |   |-- pookie.jpg
-|   |   |   +-- thumbnail
-|   |   |       +-- TN-pookie.jpg
-|   |   +-- category-1.3
-|   +-- category-2
-|       |-- piglet.gif
-|       |-- pwg_representative
-|       |   +-- video.jpg
-|       |-- thumbnail
-|       |   +-- TN-piglet.jpg
-|       +-- video.avi
-|-- include
-|-- install
-|-- language
-|-- template
-+-- tool</pre>
-
-  </li>
-  
-  <li>Each directory under "galleries" produces a category. There is no limit on deepness.</li>
-
-  <li>Basically, an element is represented by a file. A file can be a
-  Piwigo element if its extenstion is among <code>file_ext</code>
-  configuration parameter possibilities (see <span
-  class="filename">include/config_default.inc.php</span> file). A file can
-  be a picture if its extension is among <code>picture_ext</code>
-  configuration parameter possibilities.</li>
-
-  <li>Picture elements must have an associated thumbnail (see section below
-  about thumbnails)</li>
-
-  <li>Picture elements can have a high quality file associated. As for
-  wedding.jpg in the example above. No prefix on the high quality picture.</li>
-
-  <li>Non picture elements (video, sounds, file texts, what you want...) are
-  by default represented by an icon corresponding to the filename
-  extension. Optionaly, you can associate a thumbnail and a representative
-  file (see video.avi in the example above).</li>
-
-  <li><em>Warning</em>: the name of directories and files must contain only letters, figures, "-", "_" or ".". No blank space, no accentuated characters.</li>
-
-  <li>Once files, thumbnails and representatives are correctly placed in the
-  directories, go to : <span class="pwgScreen">Administration &raquo; Categories &raquo;
-  Synchronize</span></li>
-
-</ul>
-
-<h3>Thumbnails</h3>
-<ul>
-
-  <li>Each photo must have its thumbnail.</li>
-
-  <li>Thumbnails are stored in the sub-directory "thumbnail" of the category
-  directory. The thumbnail has the same filename as the corresponding photo, with <em>TN-</em> as prefix.</li>
-
-  <li><em>Advise</em>: use an external module for thumbnails creation.</li>
-
-  <li>Even if it is not recommended (image quality, web server resource load), you can use <span
-  class="pwgScreen">Administration &raquo; Pictures &raquo; Thumbnails</span> page to create thumbnails.</li>
-
-  <li>Give write access on all category directories.</li>
-
-</ul>
-
-  </div> <!-- FTP_content -->
-</div> <!-- instructionFTP -->
-
-<div id="instructionPermissions" class="instructionBlock">
-  <div
-    id="permissions_header"
-    class="instructionBlockHeaderCollapsed"
-    onclick="blockToggleDisplay('permissions_header', 'permissions_content')"
-  ><span>
-    Permissions
-  </span></div>
-  <div
-    id="permissions_content"
-    class="instructionBlockContent"
-    style="display:none"
-  >
-<ul>
-
-  <li>You can forbid access to categories. Switch the category access type to "private" if you want to manage permissions.</li>
-
-  <li>You can set a category to private by editing a single category (<span
-  class="pwgScreen">Administration &raquo; Categories &raquo; Manage &raquo; edit</span>) or by
-  setting options to your whole category tree (<span
-  class="pwgScreen">Administration &raquo; Categories &raquo; Properties &raquo; Public / Private</span>).</li>
-
-  <li>
-
-    <p>Once the category is private, you can manage permissions for groups
-    and users with 3 screens:</p>
-
-    <ul>
-
-      <li><span class="pwgScreen">Administration &raquo; Identification &raquo; Users &raquo;
-      permissions action</span> (one link per user)</li>
-
-      <li><span class="pwgScreen">Administration &raquo; Identification &raquo; Groups &raquo;
-      permissions action</span> (one link per group)</li>
-
-      <li><span class="pwgScreen">Administration &raquo; Categories &raquo; Manage &raquo; edit
-      category permissions action</span> (one link per category)</li>
-
-    </ul>
-
-  </li>
-
-</ul>
-  </div> <!-- permissions_content --> 
-</div> <!-- instructionPermissions -->
-
-<div id="instructionGroups" class="instructionBlock">
-  <div
-    id="groups_header"
-    class="instructionBlockHeaderCollapsed"
-    onclick="blockToggleDisplay('groups_header', 'groups_content')"
-  ><span>
-    Groups
-  </span></div>
-  <div
-    id="groups_content"
-    class="instructionBlockContent"
-    style="display:none"
-  >
-<ul>
-
-  <li>Groups is a convenient way to set permissions for a list of users.</li>
-
-  <li>Create groups in <span class="pwgScreen">Administration &raquo;
-  Identification &raquo; Groups</span> and associate users to this group in <span
-  class="pwgScreen">Administration &raquo; Identication &raquo; Users</span>.</li>
-
-  <li>A user can belong to several groups. Authorization is stronger
-  than forbiddance : if user "jack" belongs to groups "family" and
-  "friends", and that only group "family" can see category "Christmas 2003" category then
-  "jack" will be able to see "Christmas 2003".</li>
-
-</ul>
-  </div> <!-- groups_content --> 
-</div> <!-- instructionGroups -->
-
-<div id="instructionUpload" class="instructionBlock">
-  <div
-    id="upload_header"
-    class="instructionBlockHeaderCollapsed"
-    onclick="blockToggleDisplay('upload_header', 'upload_content')"
-  ><span>
-    Upload by users
-  </span></div>
-  <div
-    id="upload_content"
-    class="instructionBlockContent"
-    style="display:none"
-  >
-<p>Users can upload their photos too.</p>
-
-<ol>
-
-  <li>Authorize upload on any physical categories (<span
-  class="pwgScreen">Administration &raquo; Categories &raquo; Manage &raquo; edit</span> or <span
-  class="pwgScreen">Administration &raquo; Categories &raquo; Properties &raquo; Upload</span>). Virtual categories can't receive any upload.</li>
-
-  <li>Give write access on corresponding directories.</li>
-
-</ol>
-
-<p>Photos uploaded by users are not directly visible on the website. An administrator
-must validate uploaded photos in <span class="pwgScreen">Administration &raquo; Pictures &raquo; Waiting</span>.</p>
-  </div> <!-- upload_content --> 
-</div> <!-- instructionUpload -->
-
-<div id="instructionCategoryLinks" class="instructionBlock">
-  <div
-    id="categoryLinks_header"
-    class="instructionBlockHeaderCollapsed"
-    onclick="blockToggleDisplay('categoryLinks_header', 'categoryLinks_content')"
-  ><span>
-    Links between photos and categories, virtual categories
-  </span></div>
-  <div
-    id="categoryLinks_content"
-    class="instructionBlockContent"
-    style="display:none"
-  >
-<ul>
-
-  <li>Photos are displayed in the category corresponding to the file directory.</li>
-
-  <li>You can also display a picture in several categories, without duplicating the file on your web server. Associate the photo to any category from the photo editing screen (that any administrator can reach from the photo page on the gallery side).</li>
-
-  <li>Virtual categories are based on this concept: they have no corresponding directory. Create virtual categories from <span class="pwgScreen">Administration &raquo; Categories &raquo; Manage</span>.</li>
-
-</ul>
-  </div> <!-- categoryLinks_content --> 
-</div> <!-- instructionCategoryLinks -->
-
-<div id="instructionMisc" class="instructionBlock">
-  <div
-    id="misc_header"
-    class="instructionBlockHeaderCollapsed"
-    onclick="blockToggleDisplay('misc_header', 'misc_content')"
-  ><span>
-    Miscellanous informations
-  </span></div>
-  <div
-    id="misc_content"
-    class="instructionBlockContent"
-    style="display:none"
-  >
-<ul>
-
-  <li>As soon as you created your gallery, modify default display properties
-  in <span class="pwgScreen">Administration &raquo; Configuration &raquo;
-  Default</span>. Every new registered user will use these default configuration settings.</li>
-
-  <li>If you have any question, Piwigo community will welcome you on <a
-  href="http://piwigo.org/forum">its forum</a>.</li>
-
-</ul>
-  </div> <!-- misc_content --> 
-</div> <!-- instructionMisc -->
-
-</div>
diff --git a/language/en_UK/help/help_add_photos.html b/language/en_UK/help/help_add_photos.html
new file mode 100644
index 000000000..aac235cd4
--- /dev/null
+++ b/language/en_UK/help/help_add_photos.html
@@ -0,0 +1,29 @@
+<p>Several ways to add your photos in your gallery:</p>
+
+<ul>
+  <li><strong>Direct upload</strong> inside your web browser. It is the
+  simplest and most immediate way. It depends on your browser capabilities
+  and your web server. For a high quantity of photos or in case of problem,
+  the other ways are just waiting for you!</li>
+</ul>
+
+<p class="nextStepLink"><a href="admin.php?page=photos_add&section=direct">Go to Direct Upload </a></p>
+
+<ul>
+  <li><strong>pLoader</strong> is desktop application, to install on your
+  computer. Drag &amp; drop photos into pLoader window, click on <em>"Upload
+  to Piwigo"</em> and let pLoader do the job. You can find other desktop
+  applications such as comme <strong>WinToPiwigo</strong> or the export
+  plugin for <strong>Digikam</strong>.</li>
+</ul>
+
+<p class="nextStepLink"><a href="admin.php?page=photos_add&section=ploader">Go to pLoader</a></p>
+
+<ul>
+  <li><strong>FTP transfer</strong> is the most recommended way to add a
+  very large collection of photos with a minimum number of clicks. Follow
+  the guide to prepare your photos. The FTP method let you control precisely
+  the physical organization of your photos on your server.</li>
+</ul>
+
+<p class="nextStepLink"><a href="admin.php?page=photos_add&section=ftp">Go to FTP</a></p>
diff --git a/language/en_UK/help/help_groups.html b/language/en_UK/help/help_groups.html
new file mode 100644
index 000000000..22d995735
--- /dev/null
+++ b/language/en_UK/help/help_groups.html
@@ -0,0 +1,11 @@
+<p>Groups is a convenient way to set permissions for a list of users.</p>
+
+<p>Create groups in <span class="pwgScreen">Administration &raquo; Users
+&raquo; Groups</span> and associate users to this group
+in <span class="pwgScreen">Administration &raquo; Users &raquo;
+Manage</span>.</p>
+
+<p>A user can belong to several groups. Authorization is stronger than
+forbiddance : if user "jack" belongs to groups "family" and "friends", and
+that only group "family" can see category "Christmas 2003" category then
+"jack" will be able to see "Christmas 2003".</p>
diff --git a/language/en_UK/help/help_misc.html b/language/en_UK/help/help_misc.html
new file mode 100644
index 000000000..246beff10
--- /dev/null
+++ b/language/en_UK/help/help_misc.html
@@ -0,0 +1,7 @@
+<p>As soon as you created your gallery, modify default display properties
+in <span class="pwgScreen">Administration &raquo; Configuration &raquo;
+Default</span>. Every new registered user will use these default
+configuration settings.</p>
+
+<p>If you have any question, Piwigo community will welcome you
+on <a href="http://piwigo.org/forum">its forum</a>.</p>
diff --git a/language/en_UK/help/help_permissions.html b/language/en_UK/help/help_permissions.html
new file mode 100644
index 000000000..b4013e428
--- /dev/null
+++ b/language/en_UK/help/help_permissions.html
@@ -0,0 +1,24 @@
+<p>You can forbid access to categories. Switch the category access type to
+"private" if you want to manage permissions.</p>
+
+<p>You can set a category to private by editing a single category
+(<span class="pwgScreen">Administration &raquo; Categories &raquo; Manage
+&raquo; edit</span>) or by setting options to your whole category tree
+(<span class="pwgScreen">Administration &raquo; Categories &raquo;
+Properties &raquo; Public / Private</span>).</p>
+
+<p>Once the category is private, you can manage permissions for groups and
+users with 3 screens:</p>
+
+<ul>
+
+  <li><span class="pwgScreen">Administration &raquo; Users &raquo; Manage &raquo;
+  permissions action</span> (one link per user)</li>
+
+  <li><span class="pwgScreen">Administration &raquo; Users &raquo; Groups &raquo;
+  permissions action</span> (one link per group)</li>
+
+  <li><span class="pwgScreen">Administration &raquo; Categories &raquo; Manage &raquo; edit
+  category permissions action</span> (one link per category)</li>
+
+</ul>
diff --git a/language/en_UK/help/help_user_upload.html b/language/en_UK/help/help_user_upload.html
new file mode 100644
index 000000000..5aea7af54
--- /dev/null
+++ b/language/en_UK/help/help_user_upload.html
@@ -0,0 +1,18 @@
+<p>Users can upload their photos too.</p>
+
+<ol>
+
+  <li>Authorize upload on any physical categories
+  (<span class="pwgScreen">Administration &raquo; Categories &raquo; Manage
+  &raquo; edit</span> or <span class="pwgScreen">Administration &raquo;
+  Categories &raquo; Properties &raquo; Upload</span>). Virtual categories
+  can't receive any upload.</li>
+
+  <li>Give write access on corresponding directories.</li>
+
+</ol>
+
+<p>Photos uploaded by users are not directly visible on the website. An
+administrator must validate uploaded photos
+in <span class="pwgScreen">Administration &raquo; Photos &raquo;
+Waiting</span>.</p>
diff --git a/language/en_UK/help/help_virtual_links.html b/language/en_UK/help/help_virtual_links.html
new file mode 100644
index 000000000..ac5e4dce1
--- /dev/null
+++ b/language/en_UK/help/help_virtual_links.html
@@ -0,0 +1,12 @@
+<p>Photos are displayed in the category corresponding to the file
+directory.</p>
+
+<p>You can also display a picture in several categories, without duplicating
+the file on your web server. Associate the photo to any category from the
+photo editing screen (that any administrator can reach from the photo page
+on the gallery side).</p>
+
+<p>Virtual categories are based on this concept: they have no corresponding
+directory. Create virtual categories
+from <span class="pwgScreen">Administration &raquo; Categories &raquo;
+Manage</span>.</p>
diff --git a/language/en_UK/help/photos_add_ftp.html b/language/en_UK/help/photos_add_ftp.html
new file mode 100644
index 000000000..5bb2c552c
--- /dev/null
+++ b/language/en_UK/help/photos_add_ftp.html
@@ -0,0 +1,112 @@
+<fieldset>
+  <legend>Quick Start</legend>
+
+<ol>
+  <li>Create a directory on your computer.</li>  
+
+  <li>Copy some photos inside this directory, resize them for web display. <em>Warning</em>: the name of directories and files must contain only letters, figures, "-", "_" or ".". No blank space, no accentuated characters.</li>
+
+  <li>With a FTP client, copy your directory in the "galleries" directory of your Piwigo installation.</li>
+
+  <li>Logon your gallery and go to <span class="pwgScreen">Administration &raquo; Pictures &raquo; Thumbnails</span> to create missing thumbnails.</li>
+
+  <li>Go to <span class="pwgScreen">Administration</span> and click on the big Synchronization button.</li>
+</ol>
+
+Congratulations! You have successfuly created the first category of your photo gallery.
+</fieldset>
+
+<fieldset>
+  <legend>Directories and files organization</legend>
+
+<ul>
+
+  <li>
+
+    <p>Category directories are in the Piwigo directory
+    "galleries". Here follows the directory tree of a very small gallery (but
+    using many features) :</p>
+
+    <pre>
+.
+|-- admin
+|-- doc
+|-- galleries
+|   |-- category-1
+|   |   |-- category-1.1
+|   |   |   |-- category-1.1.1
+|   |   |   |   |-- category-1.1.1.1
+|   |   |   |   |   |-- pwg_high
+|   |   |   |   |   |   +-- wedding.jpg
+|   |   |   |   |   |-- thumbnail
+|   |   |   |   |   |   +-- TN-wedding.jpg
+|   |   |   |   |   +-- wedding.jpg
+|   |   |   |   +-- category-1.1.1.2
+|   |   |   +-- category-1.1.2
+|   |   |-- category-1.2
+|   |   |   |-- pookie.jpg
+|   |   |   +-- thumbnail
+|   |   |       +-- TN-pookie.jpg
+|   |   +-- category-1.3
+|   +-- category-2
+|       |-- piglet.gif
+|       |-- pwg_representative
+|       |   +-- video.jpg
+|       |-- thumbnail
+|       |   +-- TN-piglet.jpg
+|       +-- video.avi
+|-- include
+|-- install
+|-- language
+|-- template
++-- tool</pre>
+
+  </li>
+
+  <li>Each directory under "galleries" produces a category. There is no limit on deepness.</li>
+
+  <li>Basically, an element is represented by a file. A file can be a
+  Piwigo element if its extenstion is among <code>file_ext</code>
+  configuration parameter possibilities (see <span
+  class="filename">include/config_default.inc.php</span> file). A file can
+  be a picture if its extension is among <code>picture_ext</code>
+  configuration parameter possibilities.</li>
+
+  <li>Picture elements must have an associated thumbnail (see section below
+  about thumbnails)</li>
+
+  <li>Picture elements can have a high quality file associated. As for
+  wedding.jpg in the example above. No prefix on the high quality picture.</li>
+
+  <li>Non picture elements (video, sounds, file texts, what you want...) are
+  by default represented by an icon corresponding to the filename
+  extension. Optionaly, you can associate a thumbnail and a representative
+  file (see video.avi in the example above).</li>
+
+  <li><em>Warning</em>: the name of directories and files must contain only letters, figures, "-", "_" or ".". No blank space, no accentuated characters.</li>
+
+  <li>Once files, thumbnails and representatives are correctly placed in the
+  directories, go to : <span class="pwgScreen">Administration &raquo; Categories &raquo;
+  Synchronize</span></li>
+
+</ul>
+</fieldset>
+
+<fieldset>
+  <legend>Thumbnails</legend>
+<ul>
+
+  <li>Each photo must have its thumbnail.</li>
+
+  <li>Thumbnails are stored in the sub-directory "thumbnail" of the category
+  directory. The thumbnail has the same filename as the corresponding photo, with <em>TN-</em> as prefix.</li>
+
+  <li><em>Advise</em>: use an external module for thumbnails creation.</li>
+
+  <li>Even if it is not recommended (image quality, web server resource load), you can use <span
+  class="pwgScreen">Administration &raquo; Pictures &raquo; Thumbnails</span> page to create thumbnails.</li>
+
+  <li>Give write access on all category directories.</li>
+
+</ul>
+</fieldset>