Skip to Main Content

Cinema & Media Studies: CIMS 101

Workshop

  1. LARB https://lareviewofbooks.org/article/game-wonder-on-fromsoftwares-bloodborne-and-h-p-lovecrafts-the-haunter-of-the-dark/
  2. AV Clubhttps://www.avclub.com/mean-girls-commercial-wal-mart-canon-1850981301
  3. VOX https://www.vox.com/culture/23914925/fall-of-the-house-of-usher-netflix-review-edgar-allen-poe-references

Review these three pieces and and then discuss the following questions in your groups:

  • How would you describe the writing style for the headline and article? Are the sentences complex? Who would be the reader for the article? Does it convey a feeling or tone?
  • How is the article structured (paragraph length, layout/design, or text elements like quotes)?
  • How are media used? (What types of media are present? Do they illustrate a point? Are they decorative? Do they have captions/credits with them?)
  • Are links present? How are they used in the text?
  • Does your reading experience change when you adjust the size of your browser window?

CIMS 101 WordPress Site

WordPress Site Information

Need help with logging in for the first time? This 2 min. video will review how to login and set your password.

Tutorials and Step-by-Step Directions

Video Tutorials

Digital Scholarship Fellows have created several tutorials that will review what we covered in class on April 7.

Creating and Editing Your Posts

If you've used WordPress before, there is a new editor called the Gutenberg (or Block) editor. By default, the class WordPress site uses the Gutenberg/Block editor. If you have used WordPress in the past and are more comfortable using the Classic editor, then from the WordPress Dashboard, click on Profile, switch to Classic Editor, then click Update Profile.

  1. Login to the WordPress Dashboard.
  2. Click Posts on the left side of the screen.
  3. Click Add New to create a new post, or click on the title of an existing post to edit it.
  4. Enter a Title for your post, one that is descriptive of your topic, and draws the reader to want to click on it. Avoid jargon or specialized scientific terms.
  5. The new WordPress Gutenberg editor uses Blocks to organize content. You can start typing in the block provided, or click the + to add a new block. The block you select will depend on the type of content, such as paragraph, image, heading, etc.
  6. Once you have added blocks to your Post, you can move them around by dragging them up and down.

The same process works for Pages, just select Pages in the Dashboard instead.

When editing a Post pr Page, the right-hand side of the screen will switch between Document and Block tabs. The Document tab affects the entire Post, the Block tab only affects the Block you are currently working on.

Common Block Types

  • Paragraph: Use for text. You can edit the style and add links similar to Word or Pages. Every new paragraph that you write is considered a new block.
  • Image: Adds an image and a caption
  • Heading: Use if you want to have multiple headings to break up your post
  • List: Bulleted or numerical lists
  • YouTube: Embeds a YouTube video in the post
  • Quote: Creates a block quote to emphasize a concept
  • Classic: Creates a block that uses the traditional WordPress editor
  • Embed: Embeds a link inside the webpage so that the content of the page shows instead of the link. There are several pre-determined types of sites that will embed with no extra work, such as YouTube, Twitter, and Flickr. For other types of sites, you may need to find an embed HTML code that starts with something like <iframe> or <embed> and then paste it into the Custom HTML block type. For example, here is how to embed a Google Map into Wordpress.

Using the Media Library

Everyone in the class shares the Media Library for the entire WordPress site. To add images to the media library, you will either need to have the image saved to your computer.

  1. From the Dashboard, click on Media
  2. Drag the file from your computer to the box that says Drop files anywhere to upload, or click Select Files to search for them on your computer
  3. Click on the image after you've uploaded it to add Alternative Text, a title, a caption, and description.
  4. Click on Edit Image to crop the image, rotate it, or adjust its size.

Adding an Image to a Post​

  1. From the editor, add an Image block.
  2. Select Upload if the file is on your computer (this also adds it to the Media Library), Media Library if you've already loaded it to WordPress, or Insert from URL if you have a link to an image that is elsewhere on the Internet. Links to images already on the Internet need to end in .png, .jpg, .jpeg, or .gif in order to work. If uploading or adding from the library, you'll need to select the image.
  3. Your image will appear in the editor. You can then move and resize the image as you see fit on the page, change how it is aligned, and add a caption. 
  4. In the image block, the caption will appear below the image itself.
  5. In the Caption field, enter your caption. This should give the reader some context as to why you are including the photo in the first place. You should also use the caption to provide credit to the original author of the image. At minimum, you should have the title of the image, author, and a link to the original image.

Working with Images

Once you've added an image to the page, you can set the alignment of the image (left, center, right, none) or click on the pencil icon to go into the editing mode. You can change the size of the image, or add a caption here. You can also drag the edges of the image to adjust its size.

Adding a YouTube Video to a Post or Page

  1. Add a YouTube block (under Embeds)
  2. Paste in the link to the YouTube video.
  3. Include a caption for your video.

Finding Media You Can Use in a Public Digital Project

Three good rules to follow:

  1. Always assume you need permission to use media you find on the Internet and work backwards from that assumption. You may find you only need to provide appropriate attribution back to the original creator.
  2. Look for high quality images that are large enough to look good on your project.
  3. Check with a librarian if you have questions about using media.

What is Copyright?

Copyright is a legal concept that protects the rights of authors/creators and their work from being used/copied without permission. It also protects the rights of those who want to use someone else’s work under the concept of Fair Use. In brief, you must have permission to use what belongs to someone else in certain circumstances, such as publishing.

Unlike using images in a paper that only your professor sees, when locating images for use in a digital project, you have to take into account that the general public will have access to the site. In order to respect copyright laws and the rights of creators, the general rule is that for any images published after 1922, you must get the copyright holder's permission. However, if the author has released their work under a license, such as a Creative Commons license, then there is more flexibility in using images for digital projects.

What are Creative Commons Licenses?

Essentially, Creative Commons (CC) licenses are a way to license copyrighted works, meaning that the author is giving permission to use their work in certain ways. There are CC licenses that put a work in the public domain, and some that say you just have to cite the author, and others that say you can remix and remake, as well as determine if you can make money off of their work. The most common CC license is CC-BY, meaning that if you use the material, you have to give credit to the original author. A full list of licenses is available on the Creative Commons website.

  • Creative Commons Search: This is a good place to start looking for images. There are two checkboxes at the top, for the purposes of this project, you can uncheck use for commercial purposes. If you are not planning on editing an image, you can also uncheck modify, adapt, or build upon. Enter your search terms in the box, and click on the service you want to search (Flickr, Google Images, etc.).
  • Google Image Search: When searching, click Tools, then click Usage Rights, then check Labeled for Reuse (this will likely produce the most results).
  • Flickr: After searching for images, click where it says Any License and change to All Creative Commons. You can also change to No Copyright Restrictions but that may result in fewer usable images.
  • Wikimedia Commons: After searching for an image, click on Multimedia to only show image files. This one can be a bit confusing. If you do a Google Image Search with Usage Rights = Labeled for Reuse (see above) then you should get results from Wikimedia Commons.
  • YouTube: After searching, click on Filters, then click on Creative Commons.

Finding High Quality Images

It's not enough to just find images that you have the rights to, but you also need to find images that are high enough quality that they will look good.

Never do a Google Image Search, click on an image, and then save the image or link to it that way. ALWAYS click View Image to get to the actual image, otherwise you may end up with a link that doesn't work, or an image that is too small.

A link to an image from a website has to end with one of the following to work properly:

  • .jpg
  • .jpeg
  • .gif
  • .png

If your link doesn't end with this, then the link has been set up to prevent people from downloading images from their website.

When doing a Google Image Search, you can click on Tools, then Size, then select Large to find images that will be of higher quality.

Hotlinking vs. Downloading Images

When creating something that is online, there are 2 options to add images to a website: adding a link to an image, or uploading an image. If you add a link to an image, you are usually taking a link you found via a search and copying and pasting the link; this is called hotlinking. This method has the advantage of letting users click on the image, and be taken to where the image was originally found, so the original creator of the image is connected to it. However, if the website takes down that image, you have a broken link, and it will no longer show up on your website. Hotlinking is generally frowned upon unless the creator of the media has given permission, and some websites are programmed to prevent this behavior. It is probably not a copyright violation, but it can be considered rude.

If you download an image from one site and upload it to your own, you have the advantage of making sure it stays up on your website; however, doing so implies that you have the right to use that image however you want. So if you are downloading images and uploading them to your own site, then you need to make sure that the image is either in the Public Domain (published before 1923), or you have permission from the image creator, or that there is an appropriate license (such as Creative Commons) that gives you the right to do so.

Attribution vs. Citation

While attribution and citation are often used interchangeably, they have subtle differences. Attribution is usually more focused on giving credit to the source of images, texts, ideas, etc., while citation is more focused on helping scholars trace back ideas through their development in various scholarly and primary resources. There is no single way to provide attribution, while citations have specific requirements and structure depending on the style guide you are using. Both are acknowledging that someone else contributed content that you are using in your material.

What is Required for an Attribution?

There are best practices for giving attribution for materials you find online. This is different than citing a source in a bibliography or works cited. There is no correct way to attribute, but there are better ways than others. Ideally, in a digital project, if you are using something you found online, such as an image, video, audio, or text, the following elements are crucial: titleauthorsource, and license, collectively known as TASL.

  • The title of the media, as best as you can determine it. If no title, it’s not required.
  • The author‘s name. Sometimes you will see a screen name or other pseudonym, so use that.
  • The original source. You need to provide a link to where the media lives on the Internet so others can find it as well.
  • The license. If the media includes a Creative Commons or other license, include the specific license as well. If it’s in the public domain, you can simply note that.

It is usually best to include the attribution in the caption for media, if that is available. For example:

Ellora Caves (INDIA) by William Muzi is licensed under CC BY-NC-ND 2.0

Finding Information for Attributions

Sometimes finding information for attributions is easy, other times it can be a bit tricky. It depends on the website where the original media was hosted. Some websites, like Flickr and Wikimedia Commons make it easy. Other times, you just have to use your best judgment. The most important piece of information is the Source part of the attribution, so a user can trace back to where you found it.

Attribution for Images that You Have Taken Yourself

Images that you have taken yourself and uploaded directly to a project can be handled as easily as:

Photo by Abraham Lincoln (Own work)

If you put the image on Flickr or another online repository, or added a Creative Commons license, you can treat it like any other image. Adding a title to the image may help identify it.

Best Practices for Accessibility

Considering accessibility for different users of your site means that it will be accessible to as many people as possible from the start.

Text

  • Bold/strong can be used to emphasize text. Use sparingly.
  • Italics should be reserved for citation purposes. If you have to use italics for emphasis, consider bold/strong as well.
  • Never use underline for emphasis or as part of a citation, as it can be confused with a link.
  • Sub or superscript and strikethrough should be used sparingly.
  • When creating a list of items (2 or more items), use the bullets or numbered lists. Numbered lists should be used for 2 or more items if sequence matters, bullets if there are 2 or more items and the sequence doesn't matter. If there is only 1 item in your list, it isn't a list and use the indent function if you need to offset something from the main body.
  • Do not change text size or color.
  • Keep text left-aligned.

Linking

  • Link text should indicate a specific destination and usually be a phrase, not a single word. Do not use “Click here” or similar directions to indicate a link. “More information” or “Read more” may be used as long as there is context prior to the link.

Images

  • Center images instead of trying to stagger them left and right. Trying to align left and right may make text appear strange on a smaller screen.
  • Use the Alt Text field in WordPress to describe the image so screen readers can provide a description.
  • Always provide a caption and attribution for images you use.

Headings

  • Headings should be used to identify hierarchy on a webpage, not for emphasis. For emphasis, use bold/strong text instead.
  • Do not use bold/strong or italics on headings.
  • Headings should be in order, so do not go from h2 to h4 (meaning you would be leaving out h3).

Getting Help

If you're having any issues with using WordPress, don't hesitate to reach out.

For help with WordPress, email R.C. Miessler, Digital Initiatives Librarian (rmiessle@gettysburg.edu) or Kevin Moore (kmoore@gettysburg.edu) to receive an email response to a question or schedule a time to meet.