
September 28th, 2010 |

terri
- Look for a menu with your username on it. If you see it, skip to step 3. If not, look for a login box and log in.
- If you don’t see a login box, look for the word "login" and press it.
- If you don't see a login box, we may have hidden that feature for only Editors and Administrators to see. No problem, just go to your website URL and add “/user” to the back of it. Hit enter.
- Log into your web site using your username and password.
- If not logged in, Log in.
- A menu with your username on the top of it should show up on either the left or right side of the front page. Click on “Create Content”.
- Options of various content types will be displayed. Click on “Image” (either on the menu or the page -- both will work)
- Type in a Title -- how you want to find the picture
- Select an Image Gallery to place it in (if one doesn’t exist yet, you can always edit later)
- You don’t need to add menu item or body content. Instead, next to the image text field there is a “Browse” button. Click it. It will take you to your computer, and let you find where the image is. Select the image just like you were opening a word doc.
- Click “Preview” if you want to see if you got the right image. If not, repeat step 8.
- PRESS “SAVE”.
- If not logged in, Log in.
- A menu with your username on the top of it should show up on either the left or right side of the front page. Click on “Create Content”.
- Options of various content types will be displayed. Click on “Page” or “Blog entry” (either on the menu or the page -- both will work)
- Type in a title and add content in the “Body” of the page. If you are cutting and pasting from another web site, you might want to clear out their CSS code first. To do this, first paste the content into a new Notepad page, then re-cut it and paste it into Body. This will make sure that no dangling unclosed “div” tags don’t temporarily break your site.
- If you want this page to show up in a Menu, click the “Menu Settings” link. A sub form will show up.
- Add Menu Link Title (what you want the menu to say -- KEEP IT VERY SHORT! A short title with simple words -- think 20 letters or less).
- Select where you want this Menu Item to live -- usually under the Menu with your website’s name on it -- and which sub-menu to place it under.
- You can safely ignore the rest of the settings with one exception. If you DON’T want this content to be promoted to the front page, click “Publishing Options” and un-select the box stating “Promoted to Front Page”.
- Click “Preview” if you want to see what it looks like and make corrections before pressing “Save”. You can make changes as needed.
- PRESS “SAVE”.
- But what if it doesn't look right?
If you need to edit, just press the “EDIT” button at the top of the page and repeat the above steps.
- But wait! I want to add an image or two!
See “How To Add Pictures to Content”.
- Ask yourself if the image you want to add lives on your server already.
- If not, add the image to Drupal using the “Add Single Image” instructions. After pressing “Save”, continue.
- If so, navigate to the image page and right-click the picture itself and choose “view image”.
- Select the URL after the domain and copy it. (It should look like “/sites/default/files/images/xxx.jpg”).
- Navigate back to the content you want to add the image to. Press the “Edit” button.
- On top of the Body, you’ll see an icon that looks like a picture of a tree. Press it.
- A form will appear that allows you to set parameters around your image.
- In “Image URL”, paste in the the URL you just got from the image. Make sure that it starts with “/sites” or it won’t work.
- Add an image description that uses some of the keywords of your site. This is what a user will see when they mouseover the image. It also is a cool SEO (Search Engine Optimization) opportunity. You do not have to be brief here, use as many letters as it allows.
- Select where you want to place the image. “Left” or “Right” usually work best. Experiment freely.
- If the image shows up, you’ll know because it will automatically load in the dimensions. You can resize this image using the block later (instructions below), so leave these defaults.
- I like to set the following: Border: 0, Vertical space: 5, Horizantal space: 10. This gives the images some breathing room, without making them look clunky. I recommend the same for consistency, but whatever you choose here -- do the same thing every time. It keeps your site looking elegant.
- Press “Insert”. The picture should show up in the box. It might be a bit too big.
- Give yourself more room in the box, by pulling on the bottom-right corner of the “Body” box.
- Now, click on the image and use the bottom-right corner to resize it to what looks good. These dimensions will automatically be saved.
- Click “Preview” if you want to see what it looks like and make corrections before pressing “Save”. You can make changes as needed.
- PRESS “SAVE”.
- If not logged in, Log in.
- A menu with your username on the top of it should show up on either the left or right side of the front page. Click on “Create Content”.
- Options of various content types will be displayed. Click on “Event” (either on the menu or the page -- both will work)
- Type in a title and add content in the “Body” of the page. If you are cutting and pasting from another web site, you might want to clear out their CSS code first. To do this, first paste the content into a new Notepad page, then re-cut it and paste it into Body. This will make sure that no dangling unclosed “div” tags don’t temporarily break your site.
- If there is a cost associated with this event, please add that into the “Cost” or “Love donation” area.
- If you want this page to show up in a Menu, click the “Menu Settings” link. A sub form will show up.
- Add Menu Link Title (what you want the menu to say -- KEEP IT VERY SHORT! A short title with simple words -- think 20 letters or less).
- Select where you want this Menu Item to live -- usually under the Menu with your website’s name on it -- and which sub-menu to place it under.
- Scroll down past the Body area and you’ll see date pull-down boxes. Put the date and start time of the Event here. This is what will show up on the Calendar. If the event is longer than one day, put the finish time and date as well.
- You can safely ignore the rest of the settings with one exception. If you DON’T want this content to be promoted to the front page, click “Publishing Options” and un-select the box stating “Promoted to Front Page”.
- Click “Preview” if you want to see what it looks like and make corrections before pressing “Save”. You can make changes as needed.
- PRESS “SAVE”.
- If you don’t know how to log into your server space, you aren’t ready for this…
- Drupal has a file upload limitation of 2M, so if your images come off your camera bigger than that, you’ll need to re-size them before moving them to the server. I like a free File Resizer package downloadable here: http://www.vso-software.fr/products/image_resizer/ You can keep your originals for print work, if you want and just rename the resized images -- or you can overwrite them for efficiency on your computer as well as the server. Your choice.
- If you don’t have an FTP software package loaded on your computer, we need to schedule some installation time to get this established for you. You can give yourself a head start by downloading and installing a free version of WinSCP.
- Assuming you have an FTP package and have configured it to log in to your server space properly, navigate to the directory “tmp”, and then click “image” in the server portion of your FTP package (right side for WinSCP).
- NOTE: Sometimes when you go back to FTP images a second time, you’ll see the last directory you uploaded in the server area with a couple of non-image files in them. If you do encounter this, feel free to delete the entire directory. They are useful to MS but useless to Unix. (You don’t need to know why, you can trust me on this one.. )
- Next, move over to the local (left in WinSCP) side of the FTP package and navigate to where you are storing the images on your home computer or laptop.
- Select the images on your local computer and move them to the server area. This may be a mouse-move or an arrow click, depending on the FTP package used.
- Wait for them to move -- you may want to stay close to the computer so it doesn’t log you out mid-upload.
- Once complete, log out of the FTP package. That’s all! To get these files in Drupal, see “How to Upload Many Images”.
- TIP: I personally prefer to FTP about 25 images at a time and import them rather than hundreds of images at once because it makes things easier on the Drupal “Image Import“ side of things. Many steps often better than clumsy giant step.
- Login
- In the menu with your username on it, click “Administrater”
- Under the Content Management section in the top left, find and click “Image Import”
- You should see a big list of all the images you just FTPed up to the server.
- This will make your life easier: Think about what images will go into which Image Gallery. Select one image gallery at a time, and move the images belonging to that gallery up to the server.
- If you upload one directory at a time, you can use the checkbox on the top left next to “Image” to select all the files. Much easier than one at a time.
- I always check both check boxes, I like to have the Subdirectories match what’s local and I like deleting what’s no longer needed. Cleaner, more organized that way.
- Press “Upload Images”
- You’ll know you’ve been successful, because Drupal will show you a pretty green box telling you so. If you get a pink box, something has gone wrong… it will tell you, but usually it’s a file size issue (I warn you about that in the How To FTP page)
- Sometimes, you can fix a pink box problem with a simple page refresh, so try that first. It works a lot, because Drupal retains state after timing out (which is the usual cause of the error). So, if you know you resized your images, this should do it.
- Iterate as necessary until all images are in their proper place on the server.
- To see that the images arrived, go to the Image Galleries page and they should automatically be displayed in slideshows corresponding to the galleries selected.
- Alternately, you can press “Content” and see the Image file listings themselves (although this is less fun).
- Login
- Under the menu with your username on it, click “Administer”
- Under “Content Management”, Click “Image Galleries”.
- There they all are, in all their nested glory. Now chose the gallery you wish to look at first, click the name on the left.
- You’ll be taken to the slideshow associated with that Image Gallery. If you see an image you want to move to a different (maybe “not hidden”) gallery, click on the picture.
- This will take you to the image content page, click the “Edit” button.
- Now you can use the pull-down menu to select a different Image Gallery for that image to reside.
- Scroll down and click “Save”
- Rinse and repeat as often as needed.
- Login
- Click “Administer” on the menu with your username on it.
- Select “Blocks”
- You’ll see a regular page, with some yellow areas on it. Every see one of those picture frames at Target geared towards lots of pictures? Blocks are like that, each of your webpages is a multi-picture frame and the yellow areas show you where to put the pictures, or menus, or advertisements, or whatever other content you can think of.
- You’ll also see a listing with the names of each of the yellow areas and a “disabled” list. These are site building blocks that are available for you to use and the listings indicate where they live. The order of the listing is the same order these blocks are displayed on average pages.
- To move blocks around, use the arrows on the left hand side and mouse pull the block to whatever order you want. Once you have it ordered properly, press “Save blocks”. The sort order won’t change unless you save the changes to the sort order (if you‘ll pardon the obvious).
- One cool thing about blocks is that you get to chose what pages they appear on. Maybe you want a block only on one page -- or on all of them (with a few exceptions). Drupal provides the flexibility to tailor these blocks like that.
- Pick any block (you’re just looking!) and press “Configure"
- Perform the following steps for the resulting form
- Block Title: input just like any other title
- Custom visibility settings: I prefer to select the first one, since most folks want to retain control of their site.
- Show Block for Roles: This is useful as sites get really big and international -- it allows you to have translation blocks or blocks for users with different skills. Most folks don’t need to worry about this one
- Click “Save block”