Wikimedia Blog/Guidelines/How to post

From Meta, a Wikimedia project coordination wiki

This page includes documentation for Wikimedia blog administrators explaining the steps of how to add a post drafted on Meta to WordPress. In this case, we assume that a community member has drafted a post on Meta. You have reviewed the post and made any necessary copy edits and clarifications. You have scheduled the post on the calendar for today. Now, here's how you get the post live.

If any of the fields in the WordPress interface are not visible to you, be sure you click "Screen options" at the top of the page and select the fields you want to see.

Moving from Meta drafts to posting on WMF blog[edit]

Use script to move draft from Meta to WordPress
  1. Follow the directions for converting wiki pages to blog posts.
  2. Paste the .html file's output into the "text" editor version of WordPress. Note that occasionally (especially when using video), the WordPress visual editor can break the text code; it is recommended that you only use the text editor for any edits.
  3. Click "Save draft".
Adjust URL slug

Once you've saved your post for the first time, you'll see a field called "Permalink" below the title. It will have automatically pre-populated the URL with the title of your post. Often, titles are long and not the most descriptive. We suggest updating it to something more descriptive, like "firstname-lastname-profile" or "results-fall-2014-us-wikipedia-education-program".

Add photo licensing information

Next, you will need to add licensing information for any photo in the post. All photos should be on Wikimedia Commons.

Add categories and tags
  • Choose one or more relevant categories from the list (e.g., for education posts, you'll select Education, Wikipedia Education Program, Global). If you've saved the post as a draft before adding categories, remember to remove the check box from "Uncategorized".
  • Add appropriate tags, such as chapter names, "multilingual post" if it's in more than one language, the name of the additional languages it's in, etc.
Add author

Look through the list of authors. If the person who wrote the post is not listed, you'll need to add a guest account for them.

Preview post

Make sure you've clicked "Save draft" to save all your changes.

Once you think you're ready to publish, click "Preview". The blog post will open in a new window. Follow these steps:

  1. Read through the post one last time for any typos.
  2. Click through on all links to make sure they go where they are supposed to go.
  3. Click through on the image files to make sure they go to the file page on Commons.
  4. Click through on the links in your copyright notes to make sure they go to the right pages.

Make any edits you need to make, click "Save draft" and preview again.

Publish post

Once everything looks good, click "Publish"! Go look at the live post and make sure it looks good.

Propose social media

Propose social media for your post (checking if the authors have already made suggestions in the corresponding section of their draft here on Meta), then send an email to social-media(_AT_)lists.wikimedia.org with the text of your suggested social media.

Archive draft on Meta

On the draft page on Meta:

  • Replace the draft note on top with a link to the published version
  • Clearly mark the content as outdated by e.g. greying it out (enclosing it with <div style="background-color:#bbbbbb; color:#999999">)
  • Remove all of the category information except [[Category:Archived blog posts]]. (Example edit for all three steps)

Additional details[edit]

Copyright templates[edit]

Creative Commons pictures[edit]

CC-BY-SA 3.0
Source

<a href="LINK">"PHOTO NAME"</a> by <a href="LINK">AUTHOR</a>, under <a href="https://creativecommons.org/licenses/by-sa/3.0/legalcode">CC-BY-SA 3.0 Unported</a>, from Wikimedia Commons

Example

<a href="//commons.wikimedia.org/wiki/File:Golden_Gate_Bridge_seen_from_the_Presidio_in_San_Francisco_42.jpg">Golden Gate Bridge seen from the Presidio in San Francisco</a> by <a href="LINK">Guillaume Paumier</a>, under <a href="https://creativecommons.org/licenses/by-sa/3.0/legalcode">CC-BY-SA 3.0</a>, from Wikimedia Commons

Displays

Copyright notes: Golden Gate Bridge seen from the Presidio in San Francisco by Guillaume Paumier, under CC-BY-SA 3.0, from Wikimedia Commons

CC-BY-SA 2.0

<a href="LINK">"PHOTO NAME"</a> by <a href="LINK">AUTHOR</a>, under <a href="https://www.creativecommons.org/licenses/by-sa/2.0/legalcode">CC-BY-SA 2.0 Generic</a>, from Wikimedia Commons

CC-0 1.0 Universal

<a href="LINK">"PHOTO NAME"</a> by <a href="LINK">AUTHOR</a>, under <a href="https://creativecommons.org/publicdomain/zero/1.0/legalcode">CC-0 1.0 Universal</a>, from Wikimedia Commons

Public Domain[edit]

<a href="LINK">"PHOTO NAME"</a> by <a href="LINK">AUTHOR</a>, in the public domain, from Wikimedia Commons.

Adding html5 video[edit]

You can add html5 video to blog posts via two different methods:

Method 1: Reusing the HTML that embeds a video on wiki pages[edit]

The wiki -> blog conversion script handles most embedded videos from Commons automatically without the need for further manual edits, although the resulting HTML code is more complicated than when using method 2.

This method has the advantage that one can select which still from the video is displayed as thumbnail, using the "thumbtime=..." parameter (as of July 2014, this is not possible when using an iframe as in method 2 below, see Bugzilla:67165). Also, one can simply use wikitext instead of HTML to specify size and caption.

The disadvantage is that, as explained by bawolff in Bugzilla:66143#c18:

When using this method, you may prefer removing <span class="mw-tmh-playtext">Play media</span> (which generates the text "Play media" overlaying the play button, which would not normally be visible on a wiki page), and target="new" in the "Play media" link (to avoid opening the video in a new tab when the play button is clicked).

Method 2: Embedding a video as iframe[edit]

Alternatively, you can embed videos from Commons as iframes. It's pretty straightforward; here's how to do it:

  • Go to the file page on Commons for the video you want to use. For example: https://commons.wikimedia.org/wiki/File%3AThe_Impact_of_Wikipedia_Poongothai_Balasubramanian.webm
  • Hover your mouse over the video to see the controls at the bottom.
  • Click Menu (lower right corner) > then the Share icon (the one with the 3 silhouettes).
  • Copy the code starting with <iframe src="//commons... etc. (you may have to copy it manually; the "copy code" button doesn't work in some browsers including Firefox).
  • Open your blog post in WordPress, in HTML mode ("HTML" tab instead of "Visual" on the upper right corner of the post edit window).
  • Find where you want the video to be placed and paste the code snippet you copied there.
  • Return to the "Visual" tab: you should see a yellow placeholder at the dimensions of the video.
  • Preview the post: after a few seconds, you should see the video loading, with all the same controls. (If it fails to load in the preview, it might still show up after the post is published/updated - in case it doesn't, consider filing a followup bug to bug 56405/bug 50617/bug 66143.)
Optional steps[edit]
  • If necessary, resize the video; for example, if the video is currently 800 × 450 pixels (the usual preview on Commons). This translates to width="800" height="450" in the code snippet. 800px is too wide for our current blog layout; the max width is 700px or so, depending on whether you add a gray frame around it.
  • Edit the code snippet (in HTML mode) so that the width of the video is 700px, and cross-multiply to get the correct height (in this case, 394).
  • If you want the usual gray frame around the video, and a caption, you have to add them manually. Use the following code around the video code snippet:
<div class="wp-caption alignright" style="width: 702px;">

Insert Your <iframe … code snippet here

<p class="wp-caption-text">Add your caption here</p>

</div>
  • Change alignright to something else if you want your frame aligned differently (aligncenter, alignleft) and change the width of the div (702 in the example above) to the width of your video plus about 2 px or so.