Using Media & Links

Using Media in WordPress

When uploading an image, please fill in the Title, Alt Text & Description box. These are useful later for when we search the media library for images to use in articles and Search Engine Optimization (looking good in Google). Typically the Title & Alt Text can be the same.

Links

Creating/Editing Links

  1. Highlight the text or media you wish to turn into a link.
  2. Use the chain “link” icon in the visual editor to create a link.
When you create a link or edit it, look for the gear icon. Clicking on it brings up more link options.

Open in a New Window

This setting is located in the link options (gear icon) feature of a link in the WordPress visual editor.

Use the “Open in a New Window” checkbox when linking to a source outside of RDW.

We don't want casual users to loose us in their browser cache. So instead us this option to open the link they are interested in in a new tab or window. We'll still be open in their browser and if they want to return to our site to read more content, we'll be easy to find.

If you are linking to content on RDW leave this option unchecked.

Text link to a YouTube Video

There are two urls you can use when linking to a video:

  • The browser address url (ex: https://www.youtube.com/watch?v=S2W2RzuRux0 )
  • The sharing url (ex: https://youtu.be/5PWrYrLsIVE )

In order for the video to appear on the RDW site in a nice lightbox popup, link to the browser address url.

Click HERE for an example of a YouTube video in a Lightbox.
If you use the sharing url, the plugin will fail to display the video in the popup.

Text Link to a Youtube Video To Start At A Specific Time

Again use the browser address url for the video and add the following at the end of the url: 
&start[time in seconds]
Example
https://www.youtube.com/watch?v=FRP0MBNoieY&start=90

Text link to a Vimeo Video

coming soon

Linking in WordPress Tutorial

Embedding Media

Embedding media is the process of displaying video, audio or images within your content. There are typically lots of different ways to go about it, and we’ve listed the preferred methods below.

Please use these methods below as it will ensure visual continuity of the site and future-proofing of the site.

 

Embedding Videos

Embedding YouTube Videos

By default, Wordress will automagically display YouTube videos and a player for them if you simply paste the browser address url (see above example) into a page/post.

However, this player does not display properly on smaller devices and can actually break the look of the site. So…

DO NOT EMBED YOUTUBE VIDEOS USING THE URL!

How to Properly Embed a YouTube Video

Instead of simply pasting an url, use the RDW Video Shortcode method instead.

It will allow us to control the player code easily and instantly update all references that use this shortcode across the entire site. Plus, it looks great on all devices!  And because I said so… 😉

Embedding a Youtube Video To Start At A Specific Time

See the RDW Video Shortcode method instead.

Embedding Vimeo Videos

Just like the problem we have with the YouTube player – so goes it with the Vimeo Player as well. So use the RDW Video Shortcode method for them too.

 

Keeping Videos From Opening In Lightbox

Add the following to the HREF link:

data-rel="norl"

Embedding NextGen Galleries

Because the NextGen gallery “wizard” is a little buggy, we suggest using a shortcode to manually call a gallery. It will also allow you to pull images from multiple galleries by using the shortcode method.

[[ngg_images gallery_ids="#,#,#..." image_ids="#,#,#,#..." display_type=photocrati-nextgen_pro_horizontal_filmstrip]]

NextGen Gallery

Albums

[[ngg_images album_ids="###" display_type="photocrati-nextgen_pro_grid_album"]]

Galleries

[[ngg_images gallery_ids="###" display_type="photocrati-nextgen_rdw"]]

 

When using an NGG Gallery in a podcast article use the following:
[[ngg_images gallery_ids="#,#,#..." image_ids="#,#,#,#..." display_type=photocrati-nextgen_pro_horizontal_filmstrip]]

 

When in a normal article and you want a set of thumbnails use this:
[[ngg_images gallery_ids="#,#,#..." image_ids="#,#,#,#..." display_type=photocrati-nextgen_pro_thumbnail_grid]]