Imagery International website manual Prepared for: Imagery International Prepared by: Jenn de la Fuente Rosebud Designs http://www.jrosebud.com/designs designs@jrosebud.com 916.538.2133
A brief introduction The Imagery International website uses WordPress, a blog software readily available on the Internet. Though WordPress (www.wordpress.org) was originally intended to be used for blogs, it is flexible enough to power most websites that aren t blogs. WordPress gives users the ability to easily edit page content and add photos or internet links to the text. It uses an interface that looks similar to Microsoft Word or other word processing software. You can simply type in your text, select anything that needs bold or italic, make headlines bigger and hit one button to save and see your content instantly change on the website. Other great resources http://www.wordpress.org - - WordPress site http://www.wordpress.tv - - Video tutorials on how to use WordPress Google has also answered something like 90 percent of all my WordPress questions. Questions/Comments? I m always available if you have questions about how something on your site works. Just drop me an e- mail and I will happily answer your questions. No charges involved. I understand WordPress can take a little while to get the hang of. If I can t answer your question, I will find someone who can or find a web resource you can look at. 2
Logging into the Imagery International site Go to the following URL: http://imageryinternational.org/wp- admin Login: imagery Password: im8g3ry You can change the password if you wish. Go to Users and click on your profile (it should be the only one listed). Scroll all the way to the bottom where the New Password section is and change your password there. - - When you first log in, you will see this screen: The two items you will use the most are under the Posts and the Pages panels. All Blog entries are under Posts. All the other website pages are handled under Pages. You can moderate comments on blog posts in either the Comments panel or right on the front page where it says Recent Comments. 3
The Posts Panel The Posts panel is where all the blog posts They are listed in order from the newest post to the oldest post. In this view, you can also see what categories each of the posts are in. These categories correspond to the pages each of those posts show up in. You can do quick edits on the posts. For instance, you can change categories or change the date of a post. To do this, mouse over the project whose info you want to change. You will see this menu come up: Hit Quick Edit and the following will pop up: You can quickly edit the title, the date or the categories. Editing the slug is not recommended. Once you re done editing, hit Update Post. 4
The Pages Panel The Pages section is where you ll be editing the content on the Imagery International website. When you click on Pages in the left bar, this is what you ll see: You ll notice that some pages have dashes next to their titles. These are the pages that are under the main navigational buckets on the website. For instance, the Case Studies page shows up when you roll your mouse over About Guided Imagery on the website: 5
The listing of pages here tries to match the hierarchy found in the main menu on the website. (The News/Blog pages are the exception everything found in that section is not nested under the News/Blog page.) Please note that there are a lot of pages on the Imagery International website. The first page of the Pages section only shows 20 pages. The Quick Edit technique explained in the Posts Panel section also works here in Pages. But do not change the page slugs or the navigation may no longer work. You can add a page much like you can add a blog post; however, unlike blog posts, the pages do not automatically show up in the navigational bar. You will have to contact Rosebud Designs to put a new page somewhere in the navigation on the main website. Adding a Page to the Members Only Section The Imagery International website has a section that only members can access. If a member is not logged in, he or she will have to log in before viewing any of the content on these page. You can see which pages are members only by going to the Pages section in the Dashboard and looking at the pages under Members Only Section. You can add members- only pages to the site with just a couple of extra steps. First off, create a Page like you normally would. Write all your content as necessary. Before saving the page, look for this section in the right sidebar: Please choose Members Only Section from this dropdown menu. This will help keep track of which pages are members- only. 6
To actually make the content viewable only to members, scroll past the editing area until you see this section: Check the first box called All Members Can Access This Post But Must Be Logged In First. This means any paid, active member of Imagery International can view this page. If you wanted to restrict a page to say, Honorary members only, then click that box. Save your page and you ll be covered. Editing a Page (or a Post) To edit content, simply find the page (or post) you want to edit in the list and click on its name. The editing panel will appear. You can edit using either the Visual or HTML tabs (it s easy to toggle between both modes). You can edit or add text as needed. Just type as you normally would. Just remember that there is no indent tab if you re typing paragraphs you have to double- space in between paragraphs. 7
One very important note: While for the most part the editing panel (in Visual Mode) is WYSIWYG (What You See Is What You Get), don t trust it wholly. Always preview your changes by hitting the Preview Changes button in the upper right, or refresh whatever page you edited to see what it looks like. The reason the two views don t always line up is because the actual website has certain styles applied to it, while the editing panel doesn t reflect those styles. When you re creating a new blog post, the only other extra step you ll have to take is adding the post to a category. To choose a category, look for this menu on the right side: Just click the checkmark for the category you want the post to go in. 8
The Editing Tools This editing panel is available in the Visual editor. It looks slightly different in HTML mode, but the bold and italic buttons are pretty self- explanatory in HTML mode. The first three buttons bold (B), italic (I) and strikethrough tools are self- explanatory. The next two buttons, with the dots and the small numbers, are for creating bulleted lists and numbered lists. (The button with the dots is for bulleted lists, the one with the small numbers is for numbered lists.) To make a list, simply type in your list in the text area without numbers or bullets. Then, highlight the entire list and click one of the formatting buttons. The bullets and the numbers will automatically be added. The button with the quotation mark is for blockquotes. Say you want to set off a certain paragraph from the rest of the text (maybe it s a quote you want to emphasize or something like that). Highlight the paragraph you want to emphasize and press the blockquote button. It will automatically indent that paragraph. You can also highlight more than one paragraph and use the blockquote button to indent all those paragraphs. The next three buttons are alignment buttons: left align (the default), center align, and right align in that order. You can use these to align photos, but it s recommended you align any photos using their own special panel (will be explained later). We ll skip the next three buttons: the chain links and the broken piece of paper for now those are WordPress- specific functions that will be covered later. 9
The ABC and checkmark button is a spellchecker. The blue button with the white lines in it toggles fullscreen mode (so your editing panel becomes larger if you need it). The next button, with all the small colored squares is called the kitchen sink button. Press this and you get more editing options, including the ability to change text color and designate headings (using Heading 1, Heading 2) for large text. These correspond to <h1></h1>, <h2></h2>, <h3></h3> tags in HTML. Adding a Link Sometimes you might want to add a link to another page within your text. 1. Highlight the word or phrase you want linked, like in the example below (See Amazing Facts Ministries): 2. Next, click the chain link button in the editing panel: 3. The following dialogue box will come up: 10
Where it says Link URL, put the web address you want to link to (don t forget the http://). Target determines what happens when a person clicks on a link whether a new browser window opens with the new page or whether the new pages open in the same window. If you leave it at Not set, the default is to open the page in the same browser window. In general, if you are linking to a site outside of the Imagery International website, it s probably a good idea to have it open up in another browser window. That way, people can easily return to the Imagery International site. So in that case, you d choose the option that says Open in a new window. You don t need to worry about the Title and Class fields. Once you ve put in the web address and determined whether it will open in a new window or not, hit Insert. Your link is automatically made. Editing a Link At some point, you may need to change the web address for a link. To do that, find the page that the link is on and then find the link in the text. Just put your cursor anywhere in the blue underlined text and hit the chain link button. The same dialogue box that popped up when you first made the link will pop up again, except it should already have something filled out in the Link URL field. Change what s in the URL field and hit insert and your change is automatically made. 11
Deleting a Link If you need to delete a link, you can just erase the text with the link. But if you want to keep the text but remove the link, put your cursor within the link text and hit the unlink button: Your text will now show up without the blue color or the underline. Adding a Link to a Document (for example, a PDF or Word Document) If you have a PDF or a Word Document or some kind of file (like a PowerPoint file) that you want people to either read or download from the website, you can insert a link to it in the text area. This is how you would upload a new membership form or a new newsletter. It could be a PDF or a Word Document, though PDFs are preferred because they can be read by almost everyone (not everyone has Microsoft Word, nor does everyone necessarily have the fonts you used in a Word document). To upload a file, look for this bar above the text editing panel: Click the icon on the far right (the one that looks like a star). 12
The following dialogue box will pop up: More often than not, you ll be using the From Computer tab because you ll be uploading a file from your computer. Hit the Select Files button and find the document you want to upload. NOTE: If for some reason the Select Files button does not show, do not worry. It only means your browser is having trouble reading Flash media. You can still do the upload. Just hit the option that says Try the Browser uploader instead. It works more or less the same the only difference is that you have to upload one item at a time instead of being able to upload multiple items. 13
After you select the file to be uploaded, you will get a screen similar to this: Make sure you give your file a title. This title is what will show up on the website as a link. You don t need the Caption and Description fields. In order for people to be able to open your file or download your file, you have to make sure the actual file is linked! To do that, make sure you hit the File URL button. That will automatically create the link to the file. Hit Insert into Post and the link to your file will show up in the text, like this: (See the Volunteer Coordinator Handbook Form link.) Now, when people go to the site and click that link, a PDF (in this case) will come up on their screen. 14
PDFs and Word documents aren t the only types of files you can upload. You can upload mp3s and video files as well using the same techniques. For mp3s, you can also click on the music note to get the upload dialogue. Adding a Photo to the Text You can add photos within your text. First, in the text area, put your cursor where you want your photo to go. Then, return to the handy upload bar: Click the first icon (the one that looks like a photo in a frame). You will get the same upload window as explained in the previous section. Find the photo you want to upload and select upload. You will then get a different dialogue box than when you try to upload a file: You will see a thumbnail of the photo you uploaded. 15
You can leave the title alone. You will have to remove it later in code anyway. You don t want to add a caption to your photo. You can leave the description blank. For the link URL, the default is to have the link to the actual file in the link URL field. This means that if people click on the photo, it will open another page with just the photo on that page. You can either choose to have no link (click None ) or you can put a link to something else in that field (don t forget the http://). Putting a link somewhere can be useful if say, you re putting the logo of another organization in your text somewhere and you want people to visit that website when they click that logo. For the alignment, you have four choices: None: The default. This puts the photo on its own line and aligns it to the left. Left: This aligns the photo to the left and lets text wrap around the photo to the right. Center: This centers the photo on its own line. Right: This aligns the photo to the right and lets text wrap around it to the left. For size, you can choose from four sizes. For most purposes, the medium size will do. If you want the photo to be bigger, use the large size. Do not use anything larger than the large size, though it will be too wide for the site. For the sidebox pages on the front page, use the thumbnail size for those photos. You can also upload more than one photo at a time using the Flash Uploader. Just select more than one file using the command key on a Mac (control on a PC). When you insert the photos, insert them one at a time. When you re ready to insert the next photo, click the photo icon in the Upload/Insert bar. One of the tabs should say Gallery. Click that tab and then click Show next to the thumbnail of the next photo you want to insert. Make any changes you need to and then hit the Insert Into Post button to insert the photo. Once you place a photo into a page or a post, you can still edit it if you wanted to. Simply click the photo in the editing panel (this only works in Visual mode). Two icons will come up in the upper left: one of a photo and one with a red circle with a slash through it. Click the photo icon and an editing panel will come up: 16
You can change the size of the photo by using the percentages, add a title or a caption, etc. Advanced settings has some other styles and settings, but you generally don t need anything in that tab. If you click the button with the slash, it will delete the photo. Using the Calendar There is a calendar plugin on the Imagery International site where events can be posted and displayed. You can post the title of the event, a brief description, and a link to a website for the event (if applicable). To view the actual calendar, go to this link: http://imageryinternational.org/calendar/ 17
Adding Events To add an event, go to the admin Dashboard. Look in the left side navigation for the Calendar link. It s near the bottom and looks like this: Once you click on the Calendar link, you ll see this at the top of the next page: The fields are pretty self- explanatory. The title and description have limited characters and will stop typing when you ve hit the limit. For the Start and End Dates, simply put in the dates. If it is an event that is more than one day, it will be listed in each day on the calendar between the start date and the end date. The Event Link is where you would put a link to an external website or a link to the event. 18
The Time must be entered in military time (22:00, for example is 10:00 p.m.; 06:00 is 6 a.m.). The clock is set to Pacific Standard Time. Only use the Recurring events for things that happen either weekly or monthly or yearly on the same date. Editing an Event You can edit an event that is already listed in the calendar. Just below the Add Event section is a list of events already on the calendar. Simply click the Edit link for the event you want to edit. Fix the fields as necessary and hit Save. To delete an event, look for it in the list and click the Delete link. Using the Photo Gallery As part of the WordPress installation, a photo gallery was added so you could upload photos from events, create photo albums and get more of your images out there. To use the gallery, click on the Gallery link in the left sidebar: This is what the front page of Gallery looks like: 19
To make things a little easier to navigate, let s explore the Gallery navigation on the left side of the page: IMPORTANT NOTE: It s important to take some time to understand two of the definitions the Gallery portion uses. Hierarchy is important so that things show up correctly on the Imagery International website. Definitions: Album: This is the highest level. An album contains a collection of galleries. Gallery: A gallery contains a collection of photos. You must create an album first before you can create a gallery. Think of the album as a basket you put all the galleries in. And then think of the galleries as different baskets that you put photos in. (It s like one of those Russian nesting dolls.) Knowing the structure of the photo gallery portion really comes into play when you want to display groups of photos (say, different galleries for different events). The easiest way to start using the photo gallery is to create one Album and just put a bunch of different Galleries in it. In the future, you could create different Albums based on different themes, but again, it s easier to just have one Album and name the Galleries within it accordingly. Creating an Album Again, you ve got to create an album before you can display anything on the Imagery International website. Click on Album in the Gallery navigation on the left side. You ll go to the album page, and the top looks like this: 20
Where it says Add new album, type in a name and click Add. After you do that, you can select the album name from the dropdown next to it. You ll notice there is already an album and several galleries created in the Imagery International photo gallery. You could just keep this existing structure or create a new album. Again, it s much easier to have just one album. Creating a Gallery This is you can actually start uploading photos! Click on Add Gallery / Images in the Gallery navigation. You will be taken to this screen: This is where you create a Gallery first. Once you ve named it and hit Add gallery, you re ready to upload photos. Click on the Upload Images tab to do that. This is the screen you ll get: 21
This works much like the photo uploader for WordPress. Find the file you want to upload, then choose a gallery from the dropdown menu and your photo goes into that gallery. The only downside is that using this tab, you can only upload images one at a time. If that s too tedious for you, you can use the Upload a Zip- File option. That will require you to put all the photos in a Zip file before uploading. The other option is Import Image Folder. To use this option, you must know how to FTP things into a server. If you have the ability to use FTP, find the wp- content folder in the public_html directory. From there, look for the gallery folder. Once you find this folder, create a new folder within it (make it one word and something easy to remember). Once you ve created this folder, go back to the WordPress screen and go to Import Image Folder. Enter the path where the images are (for example: wp- content/gallery/conference). Hit import folder and all the images will be imported into the chosen gallery. Editing a Gallery Once you have a gallery with photos set up, you can edit the photo titles, add photos to a gallery or delete photos from a gallery. To do this, go to Manage Gallery in the Gallery navigation. You will see a list of your galleries here, and some other information, such as how many photos are in a particular gallery. Click on a gallery title to see the list of photos in the gallery. From there, you can add titles and captions. OK, so now you ve got an album set up and it s got galleries in it. And your galleries have photos in them. Now you want to make sure people can see these galleries and photos. 22
Displaying a Gallery on the Photo Gallery section of the website The Photo Gallery section of the Imagery International website (under the News/Events navigation item) is actually set so that it displays all the galleries in one particular album. Every time you create a Gallery, you have to make sure you put it in the Album so that the Gallery shows up on the website. (A thumbnail and the title of the gallery show up on the page.) To do this, go to Album in the Gallery navigation. Remember this panel? If you have at least one Album created, select it from the drop down menu at the top. If you have at least one Gallery created, it will show up in the center column (where it says Select gallery ). To put the Gallery in the Album, simply drag it over to the first column (if you selected an Album, it won t say No album selected! ) You can keep dragging galleries into the album this way and even re- order them if you wish by dragging one name on top of the other in the first column. Now, people can see all your galleries and photos. 23
Dropping a Gallery into a Page or Post You have the ability to put a gallery into a page or post. (See the Past Events page, http://imageryinternational.org/past- events/, for an example of this.) To do this, either navigate to the page or post you want to add a gallery to, or create a new page or post. Put your cursor at the place you want to add the gallery, then click the Gallery button in the editing bar: The following dialog box should come up: The tabs are pretty self- explanatory. To drop in a gallery, select the Gallery tab and find the gallery in the dropdown menu. You ll want to keep show as at Image list. This will generate rows of thumbnails that people can click on. Hit insert when you re done, and the code for the gallery will be generated automatically in between some brackets. Do not delete this code. Continue with your post as normal and when you save it, the gallery will be there. 24
Other Administrative Tasks Occasionally, when you log into the WordPress admin panel, you may see a little message across the top informing you that a new version of WordPress is available. It s important to keep your WordPress software up to date; its developers often put out updates to fix security holes or improve peformance. If you see one of these messages it usually says something like A new version is available. Click here to upgrade. just click on the link to upgrade. You will be taken to a screen that has a brief explanation of what version is available and a button that says Upgrade Automatically. Hit the button and WordPress will do the upgrade for you. Occasionally, you will also see an orange dot with a number inside it next to the Plugins section in the left- side navigation. That usually means a plugin requires an update. These are not as important to update as the WordPress software itself. If you click on Plugins, you ll see a list of plugins. There s usually a gray bar telling you which plugin has an update. There is an option to upgrade automatically as well, and you can just click that link. 25