Flickr

Flickr is a non-Williams service that hosts photo collections and video for sharing on the web.

Automatic embedding

WordPress can automatically embed Flickr images, slideshows, and videos in your page/post- all you have to do is put the correct Flickr URL on a line by itself.

Getting a Flickr URL

Image or video

1. Find your image/video on Flickr.

2. Copy the URL in the location bar of your browser (outlined in red below).

flickr-share1

Slideshow

1. Go to a Flickr user’s photostream, set, or favorites (see blue arrow below).

flickr_share

2. Click on the share icon on the right side of the page (red arrow above).

3. If you do not see any options under “Grab the link” click on it to reveal them (orange arrow).

4. Copy the URL from the text box (green arrow).

5. Before this will work, you will need to add “show/” to the end of the URL. The URL you will paste into WordPress will look something like this:
http://www.flickr.com/photos/conradflicker/show/

Overview

WordPress allows you to automatically embed video, audio and other content from most popular media hosting sites simply by placing a URL on a line by itself in a page or post.

Full list of supported sites

Getting the URL

Finding the URL to paste into WordPress is a bit different for each media hosting site. In most cases, you’ll be looking for a share icon that looks something like one of these:

shareicons

More specific instructions for finding the correct URLs, and demos of the embedded content, can be found on these pages:

Inserting the URL

This example uses a YouTube video, but the process is the same for all automatically embedded media: simply paste the URL on a line by itself, as shown in the “correct” example below.

embed1

Preview

If you are editing your page/post in visual mode (orange arrow, below), you will see a preview of your movie (or other type of content) where you placed the URL.

Embedded content toolbar

Click on the preview of your embedded content to reveal a toolbar, outlined in red below. To edit the embedded content’s URL, click the pencil. To delete the content, click X.

embed2

  • This is useful if you don't want to clutter your page with videos, or if you have a gallery of screenshots you want to link to the corresponding videos. Important: Be sure you use the 'embed' version of the URL.

    • For a text-only link, use the text editor (rather than the visual editor) and add the following to the link HTML: data-featherlight="iframe"

    <a href="https://www.youtube.com/embed/sIpBh3-hb2s" data-featherlight="iframe">Youtube</a>

    Youtube

    • For an image link, add the following to the link html (make sure there is only one 'class' attribute or the link will break): class="type-video" 

    <a href="https://www.youtube.com/embed/sIpBh3-hb2s" class="type-video"><img class="alignnone size-thumbnail wp-image-4447" src="https://admission.dev.williams.edu/files/Zach-Babat-150x150.png" alt="" width="150" height="150"></a>


Demo

Here's what embedded Flickr content will look like on your page:

Image

Mesquite Flat Sand Dunes, Death Valley National Park [Explore]

Video

https://www.flickr.com/photos/davidmichaels/4051796636/

Slideshow