This list is currently aspirational, although it is meant to be achieved fairly soon.
You will notice that some embedded images have caption lines, and some do not. None of these images comes with metadata, so you don't see attributions or hover text.
For each site discussed below the code for embedding is given along with the embedded example.
Images
Log in. On their Web site, navigate to a folder with an image or document. (They provide a Sample Album folder in the Photos folder.)
You would think that you should use their share links: Click Share to the right of the desired file name, or click the file to view it, and then click Share at the top. Copy code. Embed as usual.
https://www.dropbox.com/s/j9wun21qjofuhe0/Costa%20Rican%20Frog.jpg?dl=0
[Error: This is an invisible image in the Story Editor, with the caption strung out vertically. On first publication in the Beta, it appeared as a blank line with the caption shown as plain text. On second publication, it appeared as in the Story Editor.]
So forget Share. Just go to the page for the image, and copy the image location. Embed as usual.
https://www.dropbox.com/home/Photos/Sample%20Album?preview=Costa+Rican+Frog.jpg
[Error: This image displayed at normal width in the story editor, but much bigger on first publication. The caption displayed in the Story Editor rendered as plain text on first publication. This is true for all other captions below. Image size here, and captions everywhere, fixed automatically on second publication.]
Embedding documents such as PDFs, either with share links or page URLs, fails completely. It just pastes in the URL.
Click the Direct box to the right of any Photobucket image to copy the URL. Embed as usual. Unless you have just thought of something better to do with your time.
http://i1285.photobucket.com/albums/a587/Ladylong1/Dolphins/270315_402647266481427_1192238321_n.jpg
http://i1151.photobucket.com/albums/o632/bowietvc15/bowietvc15003/funny-dolphin-animal-brain-fart-animated-gif-pics.gif
Click Share Photo button. Click Embed. Choose an image size. Click URL to copy. Embed as usual.
<a data-flickr-embed="true" href="https://www.flickr.com/photos/orangebuzz2000/22058032650/in/photolist-dhgGwT-zBcbBL-oSPmB8-aJ4GRP-gp7jrA-dbAPTV-pLahKK-p95gZG-doRf8j-fPC3H1-k1swwF-5ks3T6-doxKye-diPdbT-rMUz4y-pWrEwE-doT9Zn-3KNjka-dpxBNC-mEA87y-99aT1y-5ks3Ai-pAAun7-5xHU2m-5Lpjaz-awHTBk-yCUkCK-yh3db5-oyhNKz-cTngMu-7h6Pyd-ddAq2a-gAS1bo-74KC8M-74PpZL-iX6boz-5kwjeL-pZUkfj-ai6ZnE-bspjL2-5kwj6L-bspgAV-deodXw-bspfAP-5nXM55-7aXxSf-5PTZTL-dbuEuJ-qFuNK-asgK4d" title="Sheathed Woodtuft - Kuehneromyces mutabilis"><img src="https://farm6.staticflickr.com/5646/22058032650_601d89b573.jpg" width="500" height="375" alt="Sheathed Woodtuft - Kuehneromyces mutabilis"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
Subscribe to upload images. Log in to be able to select from the full range of sizes.
Click Get Links/Image Sizes. Set Type to Direct. Choose size. Copy URL. Embed as usual.
http://imagizer.imageshack.us/v2/640x480q90/537/WMpVX5.jpg
Login required to use site. Click Share icon, then copy URL for size desired. Embed as usual.
https://mardenpix.smugmug.com/Travel/Tanzania-safari/i-zwSFV7F/0/M/IMG_6930-M.jpg
Copy image location. Embed as usual.
http://pic20.picturetrail.com/VOL63/16892/174125/1101432.jpg
Copy Direct Link for Layouts. Embed as usual.
http://i62.tinypic.com/20fqat3.jpg
This is the dKos Image Library, http://images.dailykos.com (which gives a 404 Not Found error if you don't supply an image path and name), as distinct from the DK5 Beta Image Library, which will turn into pumpkins when we cut over.
Open the image library, select an image, and click the Choose button.
http://images.dailykos.com/images/170640/large/MudPiePumpkinSocks.png?1446949894
Here is an image from the Image library inserted with the Image Editor. It shows a description if you hover over it with your mouse cursor.
http://images.dailykos.com/images/55551/large/livingwage.jpg?1446939987
and here is the same image with only the bare URL embedded, and no hover text.
We have a license to use these images on Daily Kos, including the Beta. Click the embed link, labelled </>. Choose an image size. Copy the embed code. Embed as usual.
[Error: This image displayed correctly in the Story Editor, but rendered as a blank rectangle on first publication. It appeared correctly on second publication.]
<div class="getty embed image" style="background-color:#fff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#a7a7a7;font-size:11px;width:100%;max-width:594px;"><div style="overflow:hidden;position:relative;height:0;padding:54.713805% 0 0 0;width:100%;"><iframe src="//embed.gettyimages.com/embed/174475542?et=GinzHMYMSPJaPFHRblzHHQ&viewMoreLink=off&sig=IqLWMAOUYzNO0_CreVPHdNKGRcK5h57Z9rwoWmDilcs=&caption=true" width="594" height="325" scrolling="no" frameborder="0" style="display:inline-block;position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><p style="margin:0;"></p><div style="padding:0;margin:0 0 0 10px;text-align:left;"><a href="http://www.gettyimages.com/detail/174475542" target="_blank" style="color:#a7a7a7;text-decoration:none;font-weight:normal !important;border:none;display:inline-block;">View image</a> | <a href="http://www.gettyimages.com" target="_blank" style="color:#a7a7a7;text-decoration:none;font-weight:normal !important;border:none;display:inline-block;">gettyimages.com</a></div></div>
Water on surface of Greenland glacier.
Iframes
Click the icon of three dots below the tweet, and select Embed Tweet. Copy the embed code. Embed as usual.
[Error: Tweets have been vanishing from the Story Editor. Here is a new one.]
<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Iceland does what the US won’t: 26 top bankers sent to prison for role in financial crisis <a href="https://t.co/qr6E2cRnIw">https://t.co/qr6E2cRnIw</a> <a href="https://t.co/YuMkh8Ohip">pic.twitter.com/YuMkh8Ohip</a></p>— Raw Story (@RawStory) <a href="https://twitter.com/RawStory/status/657267742475730944">October 22, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Pull down menu at left of toolbar at top left. Select Share or embed map. Select Embed. Copy code. Embed as usual.
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d98943.85121178195!2d-85.89951849999999!3d39.197554399999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1447141033613" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
My home town, Columbus IN. We live above the Flatrock River, just north of Noblitt Park. Zoom in to see that. A flood once reached our driveway, but unlike many of our neighbors did not come in the house.
and, as it turns out, text documents as well.
Choose a document that has sharing permission on. Turn on the menus if necessary. Click Share. Copy link code. Embed as usual.
https://docs.google.com/document/d/1cKPmJxnH9PQPpW-tS7gtHg3aUp79K_vhAD48Xq51z_0/edit?usp=sharing
Brief against Katie Lang, Hood County TX County Clerk, for refusing to issue marriage licenses to same-sex couples. Scroll down to see the text. This document is in View Only mode, which does not allow selection and copying. Editable documents can also be shared in this way.
I don't know how to enlarge the viewing area to a usable size. Hiding the menus helps a little.
Click Share This Chart. You can use either the embedded script code from the Embed box, or the URL from the Link box. Either will put the graph in a window with a scrollbar. Embed either as usual. I don't know if there is a way to resize the window to show the whole graph, or to show the graph as a plain image.
</> Embed (with Javascript)
<script type="text/javascript" src="http://elections.huffingtonpost.com/pollster/john-boehner-favorable-rating/embed.js#!maxdate=2015-11-10&estimate=official" data-width="570" data-height="400"></script>
Link (URL)
http://elections.huffingtonpost.com/pollster/john-boehner-favorable-rating
You can tell Huffington Post to generate an image of a chart, but you can't embed it here.
http://e.huffpost.com/screenshooter/elections.huffingtonpost.com/pollster/embed/ss2/john-boehner-favorable-rating/20151110175345184.png
Image Removed
Click the </> Embed button. Make format choices. Copy code. Embed as usual.
Yes, Maisie Williams (Arya Stark on Game of Thrones) has become a Viking girl in the episode The Girl Who Died on Doctor Who. Deal with it. He can't. Next week, spoiler right in the title: The Woman Who Lived.
I don't know how to make this frame smaller.
Full Header
<div class="storify"><iframe src="//storify.com/ellardent/tweetnotes-doctor-who-the-girl-who-died/embed?border=false" width="100%" height="750" frameborder="no" allowtransparency="true"></iframe><script src="//storify.com/ellardent/tweetnotes-doctor-who-the-girl-who-died.js?border=false"></script><noscript>[<a href="//storify.com/ellardent/tweetnotes-doctor-who-the-girl-who-died" target="_blank">View the story "Tweetnotes: Doctor Who – The Girl Who Died" on Storify</a>]</noscript></div>
<div class="storify"><iframe src="//storify.com/ellardent/tweetnotes-doctor-who-the-girl-who-died/embed?header=false&border=false" width="100%" height="750" frameborder="no" allowtransparency="true"></iframe><script src="//storify.com/ellardent/tweetnotes-doctor-who-the-girl-who-died.js?header=false&border=false"></script><noscript>[<a href="//storify.com/ellardent/tweetnotes-doctor-who-the-girl-who-died" target="_blank">View the story "Tweetnotes: Doctor Who – The Girl Who Died" on Storify</a>]</noscript></div>
Videos
Click Share. Click Embed. Copy code. Unlike in DK4, it is not necessary to remove the 's' in "https". Embed as usual.
<iframe width="560" height="315" src="https://www.youtube.com/embed/AuN6I30NNa4" frameborder="0" allowfullscreen></iframe>
Why Won't Bernie Sanders Take "Socialist" As An Insult?
- Sometimes there is a Link button near the top of the frame, offering a URL to copy. Embedding it as usual inserts a link.
http://www.cc.com/full-episodes/bi3jq2/the-nightly-show-with-larry-wilmore-october-20--2015---toddlers-with-guns---wealth-therapy-season-2-ep-02014
- On other video pages there is an embed link marked </> below the frame. Click it, click the Embed tab, and copy the embed code. Embed as usual. This one actually works.
<div style="background-color:#000000;width:648px;"><div style="padding:4px;width:640;height:360"><iframe src="http://media.mtvnservices.com/pmt/e1/director/edgeplayer.html?uri=mgid:arc:video:comedycentral.com:85e43aad-aa26-48cf-b370-3dd59cf41fc1" width="640" height="360" frameborder="0"></iframe><p style="text-align: left; background-color: white; padding: 4px; margin-top: 4px; margin-bottom: 0px; font-family: Arial,Helvetica,sans-serif; font-size: 12px;"><b><a href="http://www.cc.com/shows/the-daily-show-with-trevor-noah">The Daily Show with Trevor Noah</a></b><br>Get More: <a href="http://www.cc.com/shows/the-daily-show-with-trevor-noah/full-episodes">The Daily Show Full Episodes</a>,<a href="https://www.facebook.com/thedailyshow">The Daily Show on Facebook</a>,<a href="http://www.cc.com/shows/the-daily-show-with-trevor-noah/video-clips">The Daily Show Video Archive</a></p></div></div>
Redirects to Comedy Central. Click the </> embed button. Copy the embed code. Embed as usual.
Pasting in the code directly from the site gives this useless result.
Pasting into a text editor and then copying and pasting it here gives the code.
<div style="background-color:#000000;width:520px;"><div style="padding:4px;"><iframe src="http://media.mtvnservices.com/embed/mgid:arc:video:comedycentral.com:6e5b7fd3-023d-44c3-b85a-b60cc14b62da" width="512" height="288" frameborder="0"></iframe><p style="text-align:left;background-color:#FFFFFF;padding:4px;margin-top:4px;margin-bottom:0px;font-family:Arial, Helvetica, sans-serif;font-size:12px;">Get More: <a href="http://www.cc.com">Comedy Central</a>,<a href="http://www.cc.com/funny-videos">Funny Videos</a>,<a href="http://www.cc.com/shows">Funny TV Shows</a></p></div></div>
Get More: Comedy Central,Funny Videos,Funny TV Shows
WØRD: Truthiness!
Click the paper airplane icon to share. Copy the link. Embed as usual.
<iframe src="https://player.vimeo.com/video/45869701" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/45869701">Using the Images Function on Daily Kos</a> from <a href="https://vimeo.com/user11941641">dailykos</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
Using the Images Function on Daily Kos from dailykos on Vimeo.
How-to on embedding photos in DK4. Compare that with this Diary, and this how-to on the new DK5 Story Editor. We have a promise from elfling of an updated version with the latest changes, such as the enhanced toolbar.
<iframe src="https://player.vimeo.com/video/132794894" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/132794894">Using the Daily Kos DK5 Beta Editor</a> from <a href="https://vimeo.com/user11941641">dailykos</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
Using the Daily Kos DK5 Beta Editor from dailykos on Vimeo.
Not all browsers support logging in at MSNBC with the user's cable or satellite supplier. I can't use Firefox on Ubuntu Linux for this, but Chrome on Linux works. The rather limited browser built into our Sharp Aquos TV can't even get to the login, but it can display videos from our computers.
Log in to be able to see whole show videos. Clips are more generally available. Click the menu at the left below the video frame. Its icon is a rectangle with an arrow pointing up out of it. Select Embed. Copy the embed code. Embed as usual.
<iframe src='http://player.theplatform.com/p/7wvmTC/MSNBCEmbeddedOffSite?guid=n_mtpd_mobrooks1_151019' height='500' width='635' scrolling='no' border='no' ></iframe>
Sound
Click Share. You can use the URL from Share or the HTML for the iframe from Embed. Embed either as usual. Can you tell the difference?
Share
https://soundcloud.com/iraklibai/eric-clapton-bb-king
Embed
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/116505062&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
Failures, or Not Successes Yet
Non-existent sites, sites that do not host image collections, lack of embedding controls, failure of URLs and code to embed correctly or at all…or maybe just ignorance on my part, and someone will help us out. Or the developers still have some work to do. Plus there are subscription services that I am not willing to subscribe to, but somebody here uses. Give us a sample in the Comments, and I will see whether I can add it to the Diary.
Goes to AZDispatch.org, which is not an image or video sharing site. What can dKos Diarists do with this?
Server not found.
This site, started in 2006, does not exist any more. This URL used to redirect to Webshots.com, starting in 2008, according to the snapshots of the site from then in the Internet Archive Wayback Machine.
AllYouCanUpload.com is no longer accepting uploads.
But you can join Webshots for free and upload 1,000 photos plus more each month!
Registration and login required. None of the Share buttons work for embedding here. The image links on the site are to cloudfront.net, which is not accepted here.
Redirects to apple.com, an Apple Computer site, not an image source.
A search site, not an image source. Google Images lets you find images at other sites, but hosts none itself.
The first time I tried it, I got this error message.
404. That’s an error.
The requested URL / was not found on this server. That’s all we know.
Today, it is worse.
Server not found
Firefox can't find the server at googleusercontent.com.
I’m happy to announce that we have reached an agreement with Twitter to give them the Twitpic domain and photo archive, thus keeping the photos and links alive for the time being.
This does not appear to be the case. There is nothing else there.
Twitpic mages and URLs are available via the Internet Archive Wayback Machine in snapshots of the site up to October 24, 2014. Since they point to files at the Internet Archive, which is not whitelisted, they do us no good there.
http://twitpic.com/dqpf04
https://web.archive.org/web/20140104062714/http://twitpic.com/dqpf04
Mt. Fuji aka Hujisan 富士山 ふじさん
That's Mr. Mt. Fuji to you!
MST3K
But you can download image files from the archive and upload them elsewhere. This is now in the DK Image Library.
By Japanese astronaut Soichi Noguchi
野口 聡-
ActBlue is a fundraising site for Democratic candidates and Progressive causes. You can now post images here from ActBlue. This did not work in the Beta, and is not enough to make the embeds useful without the forms for contributing to campaigns. Or have I misunderstood? I don't see any ActBlue graphics or forms anywhere on Daily Kos.
Examples from active campaigns would be welcome in the comments.
Contribute Now to I Support ActBlue
https://secure.actblue.com/x/object/actblue-badges/page/supportactblue/thermometer/dark-short.png
Which images can we embed? What I see there is hosted at https://s3.amazonaws.com, which is not whitelisted here.
https://s3.amazonaws.com/dk-production/campaigns/wide_images/000/001/501/large/ben-carson.jpg?1445892977
These don't work either, without the Take Action button.
<iframe width='275' height='' src='https://www.dailykos.com/campaigns/1501.embed' style='box-shadow: 0px 3px 10px 6px #EBEBEB;margin: 0px 15px 10px 15px;float:right;' overflow=false frameborder=0></iframe>
I see no Share control. Embedding the location of the graph image fails.
http://a1.img.talkingpointsmemo.com/image/upload/jhqoajiktx6ss3rklkv1
From the article This Chart: Support For Gun Control At Highest Level Since Right After Newtown.
Subscription service at $8.99/mo for downloadable e-books, comics, audiobooks. 14 day free trial. Credit card data required for free trial.
Can we get a member to give us an example?
Subscription site with 30 day free trial. Anybody?
What Next?
Some sources are easier to use than others, while some currently fail. Maybe the devel team can tell us what is going to make the cut, or give us workarounds, and I can update this.
As usual, everything we know goes into the draft DK5 Click by Click Reference Manual. This material will be divided between the Embedding Images and Embedding Videos and Iframes chapters.
Comments from the Beta
Comments 17 Recommended 5 on original publication in the Beta.
Not all of those are meant to be places people would routinely use or upload to, and that’s OK. With ActBlue the typical use would be embedding one of their fundraising thermometers or other site elements, for example. A typical user won’t care about most of them.
elfling Oct 22 · 01:12:43 PM
• Recommended 2 times
Obviously all of these sites are for whoever uses them, and don't matter to others. I have no problem with that. What I am trying to do here is to let people know exactly what is available, and provide instructions for how those users would in fact use those sites. Where I am unable to do so, I am asking for those who do know to give us instructions and examples.
Can you explain any of them?
I still don't get ActBlue. I just now tried to embed a thermometer image, with this result.
1 non-whitelisted image(s) have been removed from your story:
https://secure.actblue.com/x/object/actblue-badges/page/supportactblue/thermometer/dark-short.png