Posting Images to the Macaulay Gallery

Photo Gallery Instructions

We’ve set up a gallery for the class in the Macaulay system, which will allow you to upload your pictures, comment on each others pictures, even rate which ones you like the best.

If you’re having trouble seeing it, it’s because you need FIRST to follow these simple instructions.  The only trick is that this is a two stage process, involving registering, emailing me, then reentering the platform to upload your photo/make comments/etc.

1.  Go to http://macaulay.cuny.edu/gallery/index.php/ and register for the site, giving yourself a password.  You can use any username/password for this site, and connect it to any email address (this is where you’ll get your new password if you forget yours).

2.  Email your ITF with your username.  They don’t need to know your password, just the username. They will need to know your username to add you to the class gallery. You should register and email your ITF as soon as possible.

3.  Receive an email from your ITF indicating that you’ve been added to the group gallery.

4. Go to http://macaulay.cuny.edu/gallery/index.php/ to find the correct album.

5. Log in. Search for your class/topic/assignment.

6. Click on the gallery image.

7. Add images.  You can add images to the gallery by hovering over “Options” and clicking “+ Add a photo” or by using the top menu bar and hovering over “Add” then selecting “Add photos.”

8.  Upload your picture, or pictures.  “Select file” which will prompt you find your file on your computer and hit “Open,” then you can add a caption, then hit ‘Done.’  To change the title, type a title in the ‘Caption’ field, then choose ‘caption’ under ‘set item titles from.’

9. Comment on or rate photos on the site! Yes, it is just like Facebook! Join the fun!

10. You’re done!  Email your ITF with any questions/problems/etc.

Embedding Wix, Tiki-Toki

Here is a basic guide on how to embed Wix or Tiki-Toki within your sites.

Embedding Wix
To embed Wix, you can insert this very simple line of HTML code into the HTML view of your page: <center><iframe height="430" scrolling="no" width="530" frameBorder="0" src="YOUR WIX URL"></iframe></center>. This code creates a frame area for the Wix page that you paste where it says YOUR WIX URL, making sure to keep the quotations around the URL. Once you have the page location specified, you should see the embedded Wix page once you publish your page.

However, depending on the dimensions of your Wix, you may want to finesse the code a bit more. The height and width suggestions in the code provided here will ensure that the Wix fits snugly on pages with sidebars, but that may not be ideal. You can change scrolling to “yes” to enable allow users to scroll within the frame, which will help viewers see your entire Wix. A better option may be to increase the size of your Wix frame and hide the sidebars to give yourself more space. To hide your sidebars, you will want to select “Hide Primary Sidebar” and “Hide Secondary Sidebar” in the PageLines Section Control area that you will find under the Page Attributes area on the right side of the Page Editor.

Embedding Tiki-Toki
To embed Tiki-Toki, you select Embed from the top of the timeline menu. A Timeline Embed Code pop-up will appear on your frame with these instructions: “Enter the width and height you want for your embeddable timeline. You should then copy the code from the ’embed’ box and add it to your website or blog.” Tiki-Toki provides a suggested width and height, which is a good place to start and can be edited later, so you need only copy the code and paste it into the HTML editor view on the page where you want to show the timeline. Once you paste the code, you will notice that width and height are specified within the first bit of code, which is where they can be edited. Note that the default width will render a timeline a bit wider than fits with sidebars, which means that you might want to use the trick above or reduce the width to around 530.

Mapping, timelines, video, audio, plugins, etc.

Here’s a list of resources particularly useful for Seminar 2, but likely useful for other courses, as well.

Making Radio
This American Life has a page of extensive resources about how to structure/write engaging audio.

Mapping Software Other than Google Maps
Google Maps, linked above, is often the go-to for map-making on the web, but it is not ideal for every use. Here’s a list of some other options that you can also edit and embed on your site. (If you want to extensively use maps on your site, you should activate the UMapper plugin that supports easy embedding of certain online map formats.)
ArcGIS Online
GeoCommons
Social Explorer
UMapper

Timelines
To make timelines, you might request a class version of Tiki-Toki that will allow for the creation of 5 embeddable timelines for the class under one account. For some basic information on how to use different media in Tiki-Toki, visit the FAQ page.

Audio
For those of you looking to use audio clips on the website, you should activate the podPress plugin.

Images
NextGEN Gallery is the one of the best plugins to use when presenting images. There are capabilities within this plugin to create the pop-up style image viewing you’re familiar with on Facebook.

Flash
If you want to have a Flash portion of your website, Wix is likely your best bet. You can create a page on there that can be embedded in the class site. You can see Wix in action on the main page of a past Seminar 2 East Harlem site.

For those of you who wanted to make a recipe book, this might be the best way to achieve that. Check out this book-like template on Wix. To access those kind of pages, once in Wix, you go to Add > Page Parts > Page Groups > More > Sketchbook. More information about Page Groups in Wix can be found here.

How to Use WordPress!

The links that follow are largely a collection of very short videos (around 1 minute) that walk you through how to perform different tasks on WordPress. I’ve collected them together intuitively in groups of increasing complexity. You’ll want to review the links in “Ready?” as you start writing, move onto “Set.” as you begin to customize and add flavor to your content, and continue on to “Go!” as you further branch out with your eportfolio.

Ready?
Writing and publishing a post
Adding categories and tags to your posts
Saving and returning to draft posts & pages
Embedding photos, video & audio into your posts
Previewing and activating themes

Set.
Creating an image gallery
Choosing a theme for your blog
Adding and deleting categories
Using Quick Edit and Bulk Edit to manage your posts in half the time
Adding an ‘About Me’ (or any other static) page

Go!
Changing your default media settings
Customizing your header image
The Text Widget for WordPress
Import your WordPress blog into Facebook
How to embed a YouTube or other off-site video into a post

How to Modify Your Images

Image Manipulation Programs from simple to more complex

On your MacBook Pro, you’ll find two programs that more or less obviously deal with photo manipulation: iPhoto and Gimp. As its name suggests, iPhoto is made for tweaking your photographs. Gimp’s great for more powerful image manipulations—it is very much an open-source Adobe Photoshop. However, you may not realize that Preview, which is most often used to view PDF documents, also handles a low level of image manipulation, making it the perfect tool to use when you quickly need to make your image web-ready. In this post, I’ll be discussing how to make all these easy adjustments—namely, rotating, cropping, and retouching— in Preview.

1. Rotating
In Preview, all of the image manipulation you need can be found in the Tools menu. Preview allows you to rotate images in four directions very simply—left by 90 degrees (counterclockwise), right by 90 degrees (clockwise), horizontally (mirror image), and vertically (upside down image). As you can see from the screencapture at right where I’ve highlighted these menu options, you can also rotate left and right using key shortcuts (command-L and command-R, respectively).

2. Cropping
As you may notice in the screencapture in the section above, the Crop option is grayed out in the Tools menu, meaning that it is currently unavailable to use. To activate the Crop tool, you must select an area to be cropped. When you open a file in Preview, you are given a small set of tools directly on the top of the image panel, as seen in the screencapture at right. The dotted box is the selection tool that will allow to select what parts of the image you want to save and what parts you want to crop out. To perform this operation, you click the tool, then click and draw a rectangle in the image that selects the area you want to save. (Note, there are other shapes and ways you can use to crop your images in Preview, but the default rectangle shape will probably be what you use most of the time.) You can readjust the rectangle after you’ve initially drawn it, to modify what it is you’ll be cropping out (i.e. the unselected bits). Once you’re satisfied with the area you’ve selected, click the Crop option in the Tools menu or use the keyboard shortcut, command-K.

3. Retouching
To retouch your images, you select Adjust Color, highlighted in the Tools menu in the screencapture at right. Once you click that, another panel will appear (as seen in the next screencapture). This panel allows you perform a lot of different things that can radically adjust your image. I’ll quickly detail a few here that might be of use to you:
Exposure & Contrast—Both of these tools will allow you to adjust the colors in your image to make them lighter or darker.
Saturation—This tool can increase or decrease how vivid or intense the colors in your image are. If you want to easily convert your image to black and white, you can drag the saturation all the way to the left and dispose of the colors completely.
Temperature—Dragging this tool to the right will ‘warm’ up your colors (increasing the yellowish tone of your image), while dragging this tool to the left will ‘cool’ your colors down (giving your image a bluish cast).
Sepia—Dragging this tool to the right will increase the brownish cast of the image. If you drag the tool completely to the right, you will have a fully sepia-toned image.
Sharpness—Dragging this tool to the left will make your image more blurry, while the rightward direction will sharpen it up.

4. Saving Your Image
In OS X Lion, the way you save your file has changed, and the terminology may be a little confusing to you. Under the File menu, you’ll see Save a Version, which is synonymous with Save, meaning that clicking this option will save your changes over your existing file. You will also see Export, which is synonymous with Save As, meaning that you can save your edited file under a new name and can also change the file extension if you’d like. On that note, most images you create for the web, you’ll want to save as a JPEG. For more information on how to save files in OS X Lion, check out this document.

5. Extra Credit
Check out these posts written by fellow ITFs about how to do even more with your images:
How to Resize Photos (gives directions for both Preview and iPhoto)
Creating a Slideshow (using the NextGEN Gallery plugin—to use this feature on your blog, select Plugins from the options along the left-side of your Dashboard, find NextGEN Gallery in the alphabetized list, and click “Activate.”)

6. Need More Help?
As always, you should feel free to send me an email. However, your issue may be something that other students are experiencing, so you should also feel free to comment here about any image modification frustrations, and I can answer you in the comment train or in a new post.

iMovie Tutorials

via Jenny Kijowski

These “advanced” screencast tutorials will help you add visual and audio effects to your iMovie project. *Note: If the screencast freezes frequently, wait for the progress bar at the bottom to fully load before hitting play.

  • Part 1: How to trim clips, split clips, freeze frames, and add chapter markers, all by right-clicking on the clip in your Project window.
  • Part 2: How to create visual effects for your movie using Clip Adjustments and Video Adjustments.
  • Part 3: How to crop, rotate, and add a Ken Burns effect to your video clips.
  • Part 4: How to add and edit basic audio files, such as sound effects and music, to your project.
  • Part 5: How to create voiceovers, how to detach the audio from a clip in your Project window, how to add just the audio from a clip in your Events window, and how to adjust sound levels.

Video Tutorials

via Jenny Kijowski

WordPress (which hosts our Eport system) has created video tutorials for some of the basics. If you need a refresher, check these out:

Writing and publishing a post

Saving and returning to draft posts & pages

Adding an “About Me” (or any other static) page

Adding categories and tags to your posts

Embedding photos, video & audio into your posts