A How To Guide for Editors

How to Post Articles from Web

Copying material from a web site and pasting it directly to the editor carries over all html tags and formatting with it, which may interfere with  the page design of our website. Also the raw HTML code looks bloated in the Text editor, which complicates archival preservation. So a better method of posting is to copy the material from a web page, paste it into a text editor and remove all formatting. Microsoft’s Notepad removes all the formatting automatically. Mac’s native text editor keeps the formatting, it can be removed manually as folows:

  1. Open TextEdit from the Macintosh Hard Drive > Applications > TextEdit.
  2. Copy your text from the source website, then paste your text into TextEdit.
  3. Then choose Format > Make Plain Text (Command-Shift-T). This should strip most of the formatting.

Once formatting is removed, copy the text again and paste it to the WordPress editor. Images can be copy&pasted directly from the original site.

Note that this also removes “heading”, “bold”, “italic” etc. We need to redo these in the visual editor manually.

How to Store a Full Article for Archival Preservation

The goal is to provide an excerpt and forward the readers to the original article, and also save the full article for preservation purposes in case it is removed from the original link in future.

A modern approach:

We are using the Hide This plugin for this solution

  1. Post the full article in the Visual editor
  2. Put a “Read the rest of the story here” link to the beginning of the material to hide
  3. Insert “hide” and “/hide” with in brackets “[ ]” to the beginning and and the and of the material to hide:
  4. It is likely that the example above is not presented properly because of some WP formatting issues. Usually the first “hide” disappears after editting this page. I cannot write the hide code exactly and have to do some tricks, otherwise the example will he hidden :). Go to the Hide This page to see an example.

See Gingersnap’s Life post as an example

This solution does not deliver the hidden content to the reader. If this does not work, we can try commenting out the material to be hidden in the HTML code.

A stone age solution:

Note that, in this case, the material will be “delivered” to the reader.  The reader will not see it on the page, but can see the commented out section if she views the source code.  So this is not a 100% hide.

  1. There are two editors on the “Add New Post” or “Edit Post” page, Visual and Text.
  2. Visual is what we use in general. The Text editor shows the raw HTML code and is difficult to read. We will both editors.
  3. Add the full article to the post, this can be be easily done in the “Visual” editor. (Also see How to Post Articles from Web above to avoid formatting problems)
  4. Determine the excerpt you want to show, this is usually the first one or two paragraphs of the original article along with a picture.
  5. Put a link to the original article at the end of the excerpt.
  6. Then click on the Text editor tab and locate the material that we want to hide. This is right after the link to the original article.
  7. Insert “<!– ARCHIVAL MATERIAL STARTS HERE” without quotation marks  at the beginning of the material we want to hide and insert “ARCHIVAL MATERIAL ENDS HERE –>” without quotation marks at the end. The material in between <!– and –> will be commented out. It will be shown in the Text editor to us, but it will not be published on the page.
  8. If the original article is removed from the link in future, come back to the text editor and remove “<!– ARCHIVAL MATERIAL STARTS HERE”and “ARCHIVAL MATERIAL ENDS HERE –>” in order to publish the rest of the material.
  9. ARCHIVAL MATERIAL STARTS/ENDS HERE is not required, but it will help locating <!– and –> in the code in future.

Tip: It is a good idea to insert <!–more–> for the “Continue reading” link on the home page. This can be done in the Visual editor via the “more button”, or simply inserting <!–more–> in the Text editor. Without <!–more–>, the whole post will be shown at the home page and people will not visit the individual post. Collecting data on individual post views would be valuable in future.

How to Embed a Video

Youtube videos are easiest to embed. Just copy the youtube link and paste it in the Visual editor, adjust the size of the video by resizing it. WordPress automatically takes care of embedding.

For other resources, we will embed it in the Text editor. Let us do it step by step to embed the video at this link: http://teamcoco.com/video/damian-lewis-accent-master

  • Go to the page where you want to get the video from
  • Look for a “Share” button, “Embed” button or “</>” sign
  • Click on these buttons until you see a code that starts with “<iframe”, copy the code. In this case, our code is the following:

<iframe width=”640″ height=”360″ src=”http://teamcoco.com/embed/v/75945#playlist=x;eyJ0eXBlIjoicmVsYXRlZCIsImlkIjo3NTk0NX0″ frameborder=”0″ allowfullscreen></iframe>

  • Go the post, open the Text editor, paste the code
  • Make sure that width and  height is set to  width=”640″ height=”360″ (Some pages set a smaller size, this is what we have been using, feel free to change)
  • Go back to the Visual editor. Most of the time, you should be able to see the video there. But some sites do not allow this while you are logged into the wordpress. In that case, open a different browser and go the post/page as a visitor (i..e without logging into wordpress). You should be able to see the video now. If you still cannot see it, delete http:// in the code above so that the looks like this:

<iframe width=”640″ height=”360″ src=”teamcoco.com/embed/v/75945#playlist=x;eyJ0eXBlIjoicmVsYXRlZCIsImlkIjo3NTk0NX0″ frameborder=”0″ allowfullscreen></iframe>

Here is an example of how to locate the code.

How to Add Photos to Gallery that are NOT Getty Images

ALWAYS GIVE CREDIT AND LINK  TO THE SOURCE

At the moment, we are adding galleries as pages. To do this,

  • Add a new page
  • Select “Gallery” as the parent page
  • Set the order to year+month+day of the event, for example if the event took place on Sep 5, 2016, order number will be 20160905 (DON’T SKIP ZEROS, SEPTEMBER IS ’09”, NOT “9” AND THE FIFTH DAY IS “05”. OTHERWISE ORDERING WILL BE MESSED UP)
  • Insert photos from “Media Library” on left-hand side dashboard the same you did for the Post.

How to Add Photos to Gallery from Getty Images

ALWAYS GIVE CREDIT AND LINK  TO THE SOURCE

At the moment, we are adding galleries as pages. To do this,

  • Add a new page
  • Select “Gallery” as the parent page
  • Set the order to year+month+day of the event, for example if the event took place on Sep 5, 2016, order number will be 20160905 (DON’T SKIP ZEROS, SEPTEMBER IS ’09”, NOT “9” AND THE FIFTH DAY IS “05”. OTHERWISE ORDERING WILL BE MESSED UP)

Getty Images usually provides code for image embedding. As an example,

  • Go here
  • Move the cursor over an image,  a menu at the bottom of the image will pop up
  • Click </>, this will allow to create a code to embed a slide show with maximum of five images
  •  On the pop up window, keep adding images from the selections on the right hand side
  • If you want to remove one of the selections, locate its thumbnail on the left side below, move your cursor on to it and click on X on the right upper corner of the thumbnail.
  • Once you make your selections, copy the Standard Code at the top of the screen
  • Go to your page, open it in the Text editor, paste the code
  • Go to the Visual editor of the page, you should see the slide show there
  • Here is how it looks like

Sometime Getty Images does not provide embedding code. In that case, we need to copy individual images from Getty and paste them to the Gallery page. Here is an example.

Go to the Getty page,  move your cursor on an image, you will see that </> is NOT provided. Here is the challenge: You cannot copy the image directly from there. Click on the image, it will pop up with the Getty Images watermark. The image without watermark is publicly available at their website and it is legal to use it. However, we need to do the following trick to get the links to the images without watermark:

  • This is for Chrome web browser, which is available for Mac and Windows, but the same tools are available at all browsers.
  • Go to the Getty Images page where the recent photos are listed
  •  Somewhere on the page, right click the mouse and click on “Inspect” (or Ctrl+Shift+I)
  • At the top menu of the new window, click Applications, which may be buried under >>
  • Scroll down on the left side bar to Frames, locate “top” then locate “images”. Now you can browse all the images.
  • Once you like an image, click on its link on the left side bar, it will pop up a new window with the image
  • Right click on the image, select “Copy Image”
  • Now copy it to your page/post
  • This will copy the “getty link” to the image without watermark, so no image is being transferred to our site. If you want to get the image and upload it to the site, you will need to select the “Save image as” instead of “Copy image” above, download it to your computer, then upload it to the site.

Sometimes even images without watermark are not available. In that case, we simply get the watermarked images. Here is an example 

How to Add a New Album to “Latest Albums”

  • Go to the “Fan Sidebar” plugin on the left sidebar of the dashboard
  • Click “Featured Albums”
  • Click “Add New”
  • Fill in the following three fields:
    1. Image URL: This is the link to the image that will show up as thumbnail of the album. Try to get the link to  Getty image without watermark as explained above in How to Add to Gallery from Getty Images. If it’s not a Getty image, click on “Media Library” on the left-hand side of the dashboard, find image and click on it, copy the URL on the right hand side.
    2. Date is the date of the event in this form: October 24, 2017
    3. Link is the link to the page where the slideshow or images reside. Note this is NOT a link to “Gallery”. It is the actual page address (the permalink).
    4. Gallery uses the CC_Child plugin to list all the child pages, each with a gallery for a specific event. If you brows the Gallery at the Gallery page, the link to a particular gallery will look something like this: https://www.damian-lewis.com/gallery/?ccpage1=3. At the moment this is the gallery for the Grenfell game, But as new pages are added, “ccpage1” for the Grenfell gallery will increase to 4,5,6 etc. internally and “ccpage1=3” on the page will refer to the new third gallery in order, not to the Grenfell gallery.
    5. So DO NOT ENTER THE LINK FROM THE MAIN GALLERY PAGE
    6. Instead, enter the direct page link like https://www.damian-lewis.com/gallery/damian-lewis-plays-in-game-for-grenfell-at-loftus-road-september-2-2017/