46be7c47b150efd58d3c0ab5069784e0de6fb0b5
[libpress/docs.git] / libpress / libpress-editing-basics.xml
1 <?xml version="1.0" encoding="utf-8"?>\r
2 <chapter xml:id="libpress-editing-basics" xmlns="http://docbook.org/ns/docbook" version="5.0" xml:lang="EN"\r
3     xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xlink="http://www.w3.org/1999/xlink">\r
4 \r
5     <info>\r
6 \r
7         <title>LibPress: Editing Basics</title>\r
8     </info>\r
9 \r
10 \r
11     <para>Most of the content on the LibPress website is contained within Pages.  This section describes how to update pages from the Dashboard.  Note that Posts (used to add content to the Blog) are updated in much the same way as Pages.  Because LibPress is based on WordPress, additional support materials are available at \r
12                 <link xlink:title="WordPress Support"\r
13                         xlink:href="http://codex.wordpress.org/Main_Page"></link>).</para>\r
14 \r
15 \r
16 \r
17     <section xml:id="libpress-editing-a-page">\r
18         <info>\r
19             <title>Editing a Page</title>\r
20         </info>\r
21                 \r
22                 <para>Most of the content on your website resides on <guibutton>pages</guibutton>.  <guibutton>Posts</guibutton> are only used for your blog.  To edit a page, you must be logged in, following which you can access the Edit screen for a particular page in one of two ways:</para>\r
23                 <procedure>\r
24                         <step><para>Go to your website and travel to the page you wish to modify.  Click <guibutton>Edit Page</guibutton> at the top of the screen, or;</para></step>\r
25                         <step><para>Go to your Dashboard (the screen that appears immediately following your login, which can also be accessed from your website by clicking your library name at the top of the screen).</para></step>\r
26                         <step><para>Click the <guibutton>Pages</guibutton> button in the left-hand navigation.</para>\r
27                         <informalfigure>\r
28                 <para>\r
29                     <mediaobject>\r
30                         <alt>Pages tab in Dashboard</alt>\r
31                             <imageobject>\r
32                                 <imagedata scalefit="0" fileref="media/Pages.png"/>\r
33                             </imageobject>\r
34                     </mediaobject>\r
35                 </para>\r
36             </informalfigure>\r
37                         </step>\r
38                         <step><para>The resulting screen will look similar to this, listing all the pages on your website:</para>\r
39                         <informalfigure>\r
40                 <para>\r
41                     <mediaobject>\r
42                         <alt>Page Listing</alt>\r
43                             <imageobject>\r
44                                 <imagedata scalefit="0" fileref="media/pages-listing.png"/>\r
45                             </imageobject>\r
46                     </mediaobject>\r
47                 </para>\r
48             </informalfigure>\r
49                         </step>\r
50 \r
51                                                 <step><para>To filter this list, you can either click on one of the links at the top of the screen:</para>\r
52                                 <informalfigure>\r
53                                         <para>\r
54                                                 <mediaobject>\r
55                                                         <alt>Page Filter</alt>\r
56                                                                 <imageobject>\r
57                                                                         <imagedata scalefit="0" fileref="media/pages-filter.png"/>\r
58                                                                 </imageobject>\r
59                                                 </mediaobject>\r
60                                         </para>\r
61                                 </informalfigure>\r
62                                 <para>or use the Search box on the right side of the page:</para>\r
63                                 <informalfigure>\r
64                                         <para>\r
65                                                 <mediaobject>\r
66                                                         <alt>Page Search</alt>\r
67                                                                 <imageobject>\r
68                                                                         <imagedata scalefit="0" fileref="media/pages-search-box.png"/>\r
69                                                                 </imageobject>\r
70                                                 </mediaobject>\r
71                                         </para>\r
72                                 </informalfigure>\r
73                         </step>\r
74                         \r
75                         <step><para>To edit a page, simply click its title. You can also hover over the title and then click <guibutton>Edit</guibutton>.  The <guibutton>Edit Page</guibutton> screen will appear similar to the following:</para>\r
76                                 <informalfigure>\r
77                                         <para>\r
78                                                 <mediaobject>\r
79                                                         <alt>Page Editor</alt>\r
80                                                                 <imageobject>\r
81                                                                         <imagedata scalefit="0" fileref="media/add-new-page-editor.png"/>\r
82                                                                 </imageobject>\r
83                                                 </mediaobject>\r
84                                         </para>\r
85                                 </informalfigure>                       \r
86                         </step>\r
87 \r
88                         <step><para>Notice in the screenshot that the title of the screen is <guibutton>Add New Page</guibutton>. If you were editing a previously created page, the title would be Edit Page, but everything else on the screen is essentially the same.</para></step>\r
89                         <step><para>The screen is broken down into modules, each with their own purpose. The three most important parts of the page screen are the Title of your page, the Editor (where you type your content), and the Publish module.</para></step>\r
90                         <step><para>The Publish module is very important because it's where pages are saved, published and previewed. The module will change depending on the status of your page. Most of the pages on your site are already set to Published and will not require any changes.  Here is the default Publish module:</para>\r
91                                 <informalfigure>\r
92                                         <para>\r
93                                                 <mediaobject>\r
94                                                         <alt>Publish Module</alt>\r
95                                                                 <imageobject>\r
96                                                                         <imagedata scalefit="0" fileref="media/pages-publish-module.png"/>\r
97                                                                 </imageobject>\r
98                                                 </mediaobject>\r
99                                         </para>\r
100                                 </informalfigure>\r
101                         </step>\r
102 \r
103                         <step><para>For more information about the visual editor, see <link xlink:title="WordPress Support: Visual Editor" xlink:href="http://en.support.wordpress.com/visual-editor/"></link>.</para></step>\r
104                         \r
105                 </procedure>\r
106         </section>\r
107 \r
108 \r
109     <section xml:id="libpress-adding-a-new-page">\r
110         <info>\r
111             <title>Adding a New Page</title>\r
112         </info>\r
113                 \r
114                 <procedure>\r
115                         <step><para>From your Dashboard, hover over the Pages tab in the left-hand navigation.</para></step>\r
116                         <step><para>Click <guibutton>Add New</guibutton>.</para></step>\r
117                         <step><para>Enter all of the appropriate information, including categories, tags, and parent\r
118                         page.</para></step>\r
119                         <step><para>Send a ticket to   \r
120                 <link xlink:href="https://bc.libraries.coop/request-support/">LibPress Support</link> to ensure that the menu is updated to reflect the addition of your new page.</para></step>\r
121                 </procedure>\r
122 \r
123 \r
124     </section>\r
125 \r
126         <section xml:id="libpress-deleting-a-page">\r
127                 <info>\r
128                         <title>Deleting a Page</title>\r
129                 </info>\r
130                 <procedure>\r
131                         <step><para>If you choose to delete a page, start by setting it to Draft.  To do this, access the Edit screen for that page, and in the Publish module, next to Status, click <guibutton>Edit</guibutton>.  Change this to Draft.</para></step>\r
132                         <step><para>Send a ticket to \r
133                         <link xlink:href="https://bc.libraries.coop/request-support/">LibPress Support</link> to \r
134                         ensure that the menu is updated to reflect the removal of that page.</para></step>\r
135                 </procedure>\r
136         </section>\r
137         \r
138         <section xml:id="libpress-inserting-an-image">\r
139                 <info>\r
140                         <title>Inserting an Image</title>\r
141                 </info>\r
142 \r
143                 <para>Media (images, audio, documents, etc.) can be uploaded by clicking the <guibutton>Add Media</guibutton> button on your Edit screen. You can select from the images and files already uploaded to the Media Library, or upload new media to add to your page or post.</para>\r
144 \r
145                 <para>Lining up images with content requires some practice.  Occasionally, tables can be used to do \r
146                 this, but more often than not, better results are achieved without tables.</para>  \r
147                 <procedure>\r
148                 <step>\r
149                 <para>In the Visual Editor, \r
150                 insert your text and your image.</para>\r
151                 </step>\r
152                 <step>\r
153                 <para>Click and drag the image to the desired location.</para>\r
154                 <para>If, for example, you wish it to be aligned left of your text, drag and drop the image \r
155                 directly to the left of the first word of text.  Ensure the image is selected (has the square \r
156                 boxes around it) and then click the “Align left” button in the toolbar.</para>\r
157                 </step>\r
158                 </procedure>\r
159                 \r
160                 <para>More detailed instructions are found below:</para>\r
161                 <itemizedlist>\r
162                         <listitem>\r
163                                 <para>Adding Images: <link xlink:title="Adding Images" xlink:href="http://en.support.wordpress.com/images/"></link></para>\r
164                         </listitem>\r
165                         <listitem>\r
166                                 <para>Aligning images: <link xlink:title="Aligning Images" xlink:href="http://en.support.wordpress.com/images/image-alignment/"></link></para>\r
167                         </listitem>\r
168                         <listitem>\r
169                                 <para>Image settings: <link xlink:title="Image Settings" xlink:href="http://en.support.wordpress.com/images/image-settings"></link></para>\r
170                         </listitem>\r
171                 </itemizedlist>\r
172                 \r
173                 \r
174 \r
175         </section>\r
176         \r
177         <section xml:id="libpress-creating-an-image-gallery">\r
178                 <info>\r
179                         <title>Creating an Image Gallery</title>\r
180                 </info>\r
181                 \r
182                 <procedure>\r
183                         <step><para>Log into your LibPress site and access the Edit screen for the page you wish to modify.</para></step>\r
184                         <step><para>Click the <guibutton>Add Media</guibutton> button above your Edit screen.</para></step>\r
185                         <step><para>Click <guibutton>Create Gallery</guibutton> in the top left of the window.</para></step>\r
186                         <step><para>Click on the images you wish to include (you can upload more images by clicking the <guibutton>Upload Files</guibutton> link near the top of the window).</para></step>\r
187                         <step><para>Once you've selected all of your images, click the <guibutton>Create a new gallery</guibutton> button at the bottom right-hand side of the page.</para></step>\r
188                         <step><para>Here, you can rearrange images and the number of columns to display.  When finished, click <guibutton>Insert Image</guibutton> at the bottom right.</para></step>\r
189                         <step><para>A default image appears, representing the gallery that will appear to your library users.</para></step>\r
190                         <step><para>Click the <guibutton>Text</guibutton> tab at the top right of your Edit window.  A shortcode appears in place of the gallery, for example: [gallery ids="2343,2340"].  To make the images slightly larger and more usable, adjust the shortcode so that it appears as follows (note: the ids will be different for your instance): [gallery ids="2343,2340" size=”medium”]</para></step>\r
191                         <step><para>Click Update at the top right of the Edit screen to save your changes.</para></step>\r
192                 </procedure>            \r
193         </section>\r
194 \r
195         <section xml:id="libpress-inserting-a-link-to-a-file">\r
196                 <info>\r
197                         <title>Inserting a Link to a File (e.g. PDF)</title>\r
198                 </info>\r
199                 \r
200                 <para>At times, you’ll want to link to a file (preferably a PDF and not a Word file, which can pose security issues).  Examples might include strategic plans, board meeting minutes, etc.  Library users will see a link on the website and when they click on it, a PDF file will open.</para>\r
201                 \r
202                 <procedure>\r
203                         <step><para>Log into your LibPress site and access the Edit screen for the page you wish to modify.</para></step>\r
204                         <step><para>Place your cursor where you’d like the link to the file to appear.</para></step>\r
205                         <step><para>Click <guibutton>Insert Media</guibutton> and click on the file you wish to include.</para></step>\r
206                         <step><para>On the right-hand side of the window, in the <guibutton>Link to</guibutton> drop-down menu, select <guibutton>Media File</guibutton>.\r
207                                 <informalfigure>\r
208                                         <para>\r
209                                                 <mediaobject>\r
210                                                         <alt>Publish Module</alt>\r
211                                                                 <imageobject>\r
212                                                                         <imagedata scalefit="0" fileref="media/insert-file.png"/>\r
213                                                                 </imageobject>\r
214                                                 </mediaobject>\r
215                                         </para>\r
216                                 </informalfigure>\r
217                         </para></step>\r
218                         \r
219                         <step><para>Click <guibutton>Insert into page</guibutton>.</para></step>\r
220                         <step><para>If you wish, you can change the text used as the link.</para>\r
221                         <itemizedlist>\r
222                         <listitem>\r
223                         <para> In the Visual Editor, where the PDF link now appears, select all of the text within the link \r
224                         that you wish to change and modify accordingly.</para>\r
225                         </listitem>\r
226                         <listitem>\r
227                         <para>In the Visual Editor, place your cursor somewhere in the middle of the link text.</para>\r
228                         </listitem>\r
229                         <listitem>\r
230                         <para>Type the new text you wish to have and then delete the characters surrounding your new \r
231                         text.</para>\r
232                         </listitem>\r
233                         </itemizedlist>\r
234                         \r
235                         <note>\r
236                         <para>Minor differences between local browsers and add-ons they might have installed may cause \r
237                         the link to disappear when trying to change the link text.</para>\r
238                         </note>                 \r
239                         \r
240                         \r
241                         </step>\r
242                         \r
243                         <step><para>Click <guibutton>Update</guibutton> at the top right of the Edit screen to save your changes.</para></step>\r
244 \r
245                 </procedure>\r
246                 \r
247         </section>\r
248         \r
249         <section xml:id="libpress-inserting-links">\r
250         <title>Inserting Internal, External, and Email Links</title>\r
251         \r
252         <simplesect xml:id="inserting-internal-link">\r
253         <title>Inserting an Internal Link</title>\r
254         \r
255         <procedure>\r
256         <step>\r
257         <para>In the <guilabel>Visual Editor</guilabel>, type the text you wish to use as your link.</para>\r
258         </step>\r
259         <step>\r
260         <para>Select this text.</para>\r
261         </step>\r
262         <step>\r
263         <para>Click the <guilabel>Insert/edit link</guilabel> icon in the toolbar.</para>\r
264         </step>\r
265         <step>\r
266         <para>Choose your page from the list that appears. </para> \r
267         <para>If this list doesn’t appear, click the <guilabel>Or link to existing content</guilabel> link. You \r
268         can enter keywords to search for the page you wish to link to. </para>\r
269         </step>\r
270         <step>\r
271         <para>Click the title of the page and then click <guilabel>Add Link</guilabel>.</para>\r
272         </step>\r
273         <step>\r
274         <para>Click <guibutton>Update</guibutton> to save your changes.</para>\r
275         </step>\r
276         </procedure>\r
277         </simplesect>\r
278         \r
279         <simplesect xml:id="inserting-external-link">\r
280         <title>Inserting an External Link</title>\r
281         \r
282         <procedure>\r
283         <step>\r
284         <para>In the <guilabel>Visual Editor</guilabel>, type the text you wish to use as your link.</para>\r
285         </step>\r
286         <step>\r
287         <para>Select this text.</para>\r
288         </step>\r
289         <step>\r
290         <para>Click the <guilabel>Insert/edit link</guilabel> icon in the toolbar.</para>\r
291         </step>\r
292         <step>\r
293         <para>Type the external website address (e.g. a website other than your \r
294         LibPress website) into the URL box and include a title for it in the next box.</para>\r
295         </step>\r
296         <step>\r
297         <para>Click <guilabel>Add Link</guilabel>.</para>\r
298         </step>\r
299         <step>\r
300         <para>Click <guibutton>Update</guibutton> to save your changes.</para>\r
301         </step>\r
302         </procedure>\r
303         </simplesect>\r
304         \r
305         <simplesect xml:id="inserting-email-address">\r
306         <title>Inserting an Email Address</title>\r
307         \r
308         <procedure>\r
309         <step>\r
310         <para>In the <guilabel>Visual Editor</guilabel>, type the text you wish to use as your link.</para>\r
311         </step>\r
312         <step>\r
313         <para>Select this text.</para>\r
314         </step>\r
315         <step>\r
316         <para>Click the <guilabel>Insert/edit link</guilabel> icon in the toolbar.</para>\r
317         </step>\r
318         <step>\r
319         <para>In the URL box, enter: mailto:emailaddress@emailaddress.com where you replace \r
320         emailaddress@emailaddress.com with your intended email address.</para>\r
321         <para>Ensure there are no spaces between the mailto and the email address.</para>\r
322         </step>\r
323         <step>\r
324         <para>Click <guilabel>Add Link</guilabel>.</para>\r
325         </step>\r
326         <step>\r
327         <para>Click <guibutton>Update</guibutton> to save your changes.</para>\r
328         </step>\r
329         </procedure>\r
330         </simplesect>\r
331         \r
332         <simplesect xml:id="removing-link">\r
333         <title>Removing a Link</title>\r
334         \r
335         <procedure>\r
336         <step>\r
337         <para>In the <guilabel>Visual Editor</guilabel>, click your cursor anywhere within the link you wish \r
338         to remove.</para>\r
339         </step>\r
340         <step>\r
341         <para> Click the <guibutton>Remove link</guibutton> icon in the toolbar.</para>\r
342         </step>\r
343         <step>\r
344         <para>Click <guibutton>Update</guibutton> to save your changes.</para>\r
345         </step>\r
346         </procedure>\r
347         </simplesect>\r
348         \r
349         \r
350         \r
351         </section>\r
352         \r
353         <section xml:id="libpress-inserting-youtube">\r
354         <title>Inserting a YouTube Video</title>\r
355         \r
356         <para>You can embed YouTube videos directly within your web pages.  To do so:</para>\r
357 \r
358 <procedure>\r
359 <step>\r
360 <para>Edit the page you wish to add a video to.</para>\r
361 </step>\r
362 <step>\r
363 <para>Copy the website address (URL) of the YouTube video and paste it directly into the visual \r
364 editor (no need to click the Insert link icon).  </para>\r
365 </step>\r
366 <step>\r
367 <para>Update the page and view it.  The video should be embedded directly within the page.</para>\r
368 </step>\r
369 </procedure>\r
370         \r
371         </section>\r
372         \r
373         <section xml:id="libpress-inserting-tables">\r
374         <title>Inserting a Table</title>\r
375         \r
376         <para>Tables can be added to pages or posts, but are not recommended for use in \r
377         Highlights or Inner Page Widgets.</para>\r
378         <para>To insert a table:</para>\r
379 \r
380 <procedure>\r
381 <step>\r
382 <para>Click the <guilabel>Table</guilabel> icon in the second row of icons of \r
383 the <guilabel>Visual Editor</guilabel>.</para>\r
384 </step>\r
385 <step>\r
386 <para>You can insert a table or edit an existing table.  This functionality is similar to that of \r
387 MS Word.</para>\r
388 </step>\r
389 </procedure>\r
390 \r
391 <para>If you have specific questions about tables, please submit a ticket to \r
392 <link xlink:href="https://bc.libraries.coop/request-support/">LibPress Support</link>.</para>\r
393 \r
394 \r
395 <note><para>If you don’t see the second row of icons including the Insert Table icon, click the last\r
396  icon on the right of the first row to open the <guilabel>Kitchen Sink</guilabel>.</para></note>\r
397         </section>\r
398         \r
399         <section xml:id="libpress-inserting-anchors">\r
400         <title>Inserting an Anchor within a Page</title>\r
401         \r
402         <para>If you have a page that contains a large amount of content with numerous headings, \r
403         you may wish to build a kind of table of contents at the top of the page that links to the various\r
404         section headings using <guilabel>Anchors</guilabel>.  An alternative is to create new pages of \r
405         content for each heading.</para>\r
406         <para>If you'd like to discuss the best option in your case, please submit a ticket to <link xlink:href="https://bc.libraries.coop/request-support/">LibPress Support</link>.</para>\r
407 \r
408         <para>Inserting anchors requires some comfort with HTML.  To insert anchors, please see the \r
409 <link xlink:href="http://en.support.wordpress.com/splitting-content/page-jumps/">WordPress Support guide: Splitting Content > Page Jumps</link>.</para>\r
410         \r
411         </section>\r
412 \r
413         <section xml:id="libpress-graphics-guidelines">\r
414                 <info>\r
415                         <title>Graphics Guidelines</title>\r
416                 </info>\r
417                 \r
418                 <emphasis role="bold">Filetypes:</emphasis>\r
419                         <itemizedlist>\r
420                                 <listitem>JPEG(.jpg, or .jpeg) - Recommended</listitem>\r
421                                 <listitem>PNG (.png). Recommended</listitem>\r
422                                 <listitem>GIF (.gif)</listitem>\r
423                         </itemizedlist>\r
424                         \r
425                 <emphasis role="bold">Maximum File Size:</emphasis>\r
426                         <itemizedlist>\r
427                                 <listitem>2MB - maximum</listitem>\r
428                         </itemizedlist>\r
429 \r
430                 <emphasis role="bold">Image Dimensions for Photos and Graphics:</emphasis>\r
431                         <itemizedlist>\r
432                                 <listitem>Slideshows: 1000px wide × 300px high</listitem>\r
433                                 <listitem>Highlights: 335px wide × any hight up to 335px maximum</listitem>\r
434                                 <listitem>Main content area of pages: these can be any size, but if they are wider than the available area they will be scaled to fit – height will be adjusted proportionally.</listitem>\r
435                                 <listitem>Inner Page Widgets – will vary but will probably never exceed 350px. Images 350px wide would be scaled appropriately by the theme.</listitem>\r
436                         </itemizedlist>\r
437 \r
438                 <emphasis role="bold">Image Resolution:</emphasis>\r
439                         <itemizedlist>\r
440                                 <listitem>Minimum 72 pixels per inch (sometimes indicated as ppi and dpi), 96 is fine too. Resolutions much higher than this (e.g. 144ppi) increase file size and page load times unacceptably.</listitem>\r
441                         </itemizedlist>\r
442                         \r
443                 <emphasis role="bold">Guidelines:</emphasis>\r
444                         <itemizedlist>\r
445                                 <listitem>Use .jpg for most photos. 'Interlaced' option when saving is not required or ideal but not fatal. Apply compression to the point where image is visibly changed, then remove some of that compression for the best balance of quality and file size.</listitem>\r
446                                 <listitem>Use .png for photos or graphics with flatter regions of colour. Designers often test saving a photo as .png and comparing to .jpg for file size. When .png makes pictures, it makes their file size smaller and doesn't affect the visual quality of an image in the same way as .jpg.</listitem>\r
447                                 <listitem>Start large and make smaller. Don't try to make things larger from a small start. This goes for image dimensions as well as file size.</listitem>\r
448                         </itemizedlist>\r
449 \r
450                 <emphasis role="bold">Recommended Graphics Software:</emphasis>\r
451                         <para>Compressing Images:</para>\r
452                                 <itemizedlist>\r
453                                         <listitem>Microsoft Office 2010 aka Office Picture Manager has a compress tool</listitem>\r
454                                         <listitem>Picasa Editor (via the Export tool at the bottom of the screen)</listitem>\r
455                                 </itemizedlist>\r
456                         <para>Image Editing - F/OSS (free and open source software):</para>\r
457                                 <itemizedlist>\r
458                                         <listitem>GIMP: <link xlink:title="GIMP" xlink:href="http://gimp-win.sourceforge.net"></link></listitem>\r
459                                         <listitem>Paint.NET: <link xlink:title="Paint.NET" xlink:href="http://www.getpaint.net"></link></listitem>\r
460                                 </itemizedlist> \r
461                         <para>Drawing - F/OSS (free and open source software):</para>\r
462                                 <itemizedlist>\r
463                                         <listitem>Inkscape: <link xlink:title="Inkscape" xlink:href="http://inkscape.org/download"></link></listitem>\r
464                                 </itemizedlist>\r
465                         <para>Image Editing - Low Cost:</para>\r
466                                 <itemizedlist>\r
467                                         <listitem>Corel Paintshop Pro X5</listitem>\r
468                                 </itemizedlist>\r
469                         <para>Drawing - Low Cost:</para>\r
470                                 <itemizedlist>\r
471                                         <listitem>Corel Draw - now a full blown design suite (illustration, page layout and image editing all rolled into one</listitem>\r
472                                 </itemizedlist>\r
473                         <para>The Adobe Option</para>\r
474                                 <itemizedlist>\r
475                                         <listitem>Adobe design applications are available by monthly subscription: <link xlink:title="Adobe" xlink:href="http://www.adobe.com/ca/products/creativecloud/buying-guide.html"></link></listitem>\r
476                                 </itemizedlist>\r
477                                 \r
478                         \r
479         </section>\r
480         \r
481 </chapter>\r