Here we shall place all manner of handy little bits of code for the aspiring web editor to have at hand at a moment's notice.
WIDE-SCREEN VIDEOS embedded in articles
To make a wide-screen video fill the page, don't use the "embed video" icon when you're publishing the story. Instead, go into the video in Pangea and copy the embed code. Paste that into the source code in the story. Then change the dimensions to: width="512" height="360"
You can do the same for standard 4x3 videos, but they'll have black bars on both sides (known as "pillarboxing" in the business.)
Uploading Multimedia To Pangea
- In the box "Multimedia Archives," please check "Video" or "Photo Gallery," depending on what content you're creating. This will add the content to the MM archives. Soundslides projects can be archived as photo galleries.
- Don't forget to give your videos a nice name and description, since those will be visible on the video page. Check to make sure the description/tease isn't too long, because they sometimes get cut off after you save.
Disabling Related Videos In YouTube Embeds
When we embed youTube video, it makes sense sometimes to disable the related stories that appear in a carousel at the end of the video. To do that, just add &rel=0 to the end of the youtube URL in the embed code.
So instead of http://www.youtube.com/v/Yc_J_kXaFSw
you would have http://www.youtube.com/v/Yc_J_kXaFSw&rel=0
Do it for both URLs in the embed.
Inputting Image Maps (This Week In Facebook, etc)
While the code for an image map needs to be made on a special program, actually publishing it is easy.
1. Embed the image you want to use in the article.
2. Go in to the HTML view and replace the image's HTML, which looks like this:
<div style="width: 396px;" class="contentImage floatLeft"><div class="watermark"><a href="http://gdb.rferl.org/B62AAA4E-54F9-47D9-A84D-A16CDA1FEE42_mw800_s.jpg" rel="ibox" title=""><img border="0" src="http://gdb.rferl.org/B62AAA4E-54F9-47D9-A84D-A16CDA1FEE42_w396_s.jpg" alt="" class="photo" /></a></div></div>
with the same image in a table, which looks like this:
<table cellspacing="0" cellpadding="0" border="0"> <tbody><tr><td><img border="0" alt="" src =" http://gdb.rferl.org/B62AAA4E-54F9-47D9-A84D-A16CDA1FEE42_w396_s.jpg" usemap="#Map" /></td> </tr> </tbody></table>
And then below it add the image map code that has been prepared. It should look like this:
<map name="Map" id="Map"><area shape="rect" coords="48,487,391,541" href="http://www.rferl.org/content/Missing_Ship_Critic_Flees_Russia/1814225.html" />
<area shape="rect" coords="11,222,389,326" href="http://www.rferl.org/content/Report_Georgia_Frees_Turkish_Crew_Holds_Captain/1815559.html" />
[etc., one for each link in the map]
</map>
3. The image map refers to a pdf or jpeg. Everywhere you see a link like that, you should replace it with the GDB link to the Facebook page you've just uploaded. So, at the top of the image map info, you'll see this:
<body><a href="../My Documents/Downloads/Facebook_1-10_4.pdf">
And you should cut and paste the GDB link so it looks like this:
<body><a href="http://gdb.rferl.org/B62AAA4E-54F9-47D9-A84D-A16CDA1FEE42_w396_s.jpg">
You might have to do this several times at the top of the image map code.
4. Return to the normal view. It should look like it did before, but with links that work when you save the article.
Where To Complain
To REPORT Urgent/Critical/or non-critical problems with the Publisher (or other Internet Team topics):
http://quickbase.rferl.org/
...if absolutely critical, also (?) send email to site_problems@rferl.org
HTML code for embedded video backgrounders:
<div class="boxcover"><div class="boxheader"><img height="6" width="5" alt="" src="/img/cornerTopLeft.gif" /></div><div class="boxheaderbg"><div class="boxheadlines"><img border="0" align="textbottom" src="/img/icon-video.gif" alt="" /> Video</div></div><div class="boxtxtmiddle"><div class="section-content"><a onclick="window.open('/video/695.html','embededPopupWin','width=390px,height=390px, scrollbars=1'); return false;" href="#"><img width="185" border="0" alt="" class="photo" src="http://gdb.rferl.org/58A5B355-73CC-4DCF-AD93-6B71316A5A86_w185.jpg" /></a> <h6>TITLE</h6><p>Your explanatory introductory text here. Video By Reuters or whatever. <a onclick="window.open('/video/695.html','embededPopupWin','width=390px,height=390px, scrollbars=1'); return false;" href="#"><b>Play</b></a></p></div></div><div class="boxfooter"><img height="5" width="5" alt="" src="/img/cornerDownLeft.gif" /></div></div>
Change the picture and the text, of course. You can then click on the video in text box and choose a new one, and you will need to make sure the video number in the "Click to Play" link matches the new video too.
This is HTML code for two little icons, for placing them is teaser tags, etc:
Video icon:
<img src="http://www.rferl.org/img/icon-video.gif" />
Photo icon:
<img src="http://www.rferl.org/img/icon-photogallary.gif" />
If you put it somewhere and you get a little frame around it, add a border="0", so that it would look like: <img src="http://www.rferl.org/img/icon-photogallary.gif" border="0" />
If you have trouble embedding a video inside an article, you can always add the code from the video entry inside the publisher, which looks like this:
<object><embed src="http://www.rferl.org/flash/MediaPlayer.swf?cache=" type="application/x-shockwave-flash" wmode="transparent" width="384" height="362" allowfullscreen="true" flashvars="configFilePath=http://www.rferl.org/GetFlashXml.aspx?param=317|user|video" /></object>
FOR BREAKING NEWS WIDGETS
English Team -
Please see the HTML codes below. Black text is constant, red text is what you need to modify per article/content. Just click on the source button in the HTML splitnews widget, copy/paste the code and then modify for the links to point to the content you want. You can practice on a private section page to make sure it is correct before posting. Please let me know if you need any further help with this.
Cheers -
Kim
Breaking News WITH PHOTO AND LINK TO ARTICLE -- EXAMPLE http://devel-pangea.od.rferl.org/ :
<h2>Breaking news</h2><div class="photo aligned"><a href="/content/article/1836058.html"> <img src=" http://gdb.rferl.org/47B9CE33-0502-46F9-91F1-1850EE351E6C_w82_h62.jpg " class="imgsmall" alt="" /> </a></div> <h4><a href="/content/article/1836058.html">Headline goes here</a></h4>
Breaking News ONLY WITH LINK TO ARTICLE -- EXAMPLE http://qa-pangea.od.rferl.org/ :
<h1 style="color: rgb(255, 133, 13);">BREAKING NEWS</h1><h4><a href="http://qa-pangea.od.rferl.org/content/Russian_Orthodox_Church_Enthrones_New_Patriarch/1377392.html">Russian Orthodox Church Enthrones New Patriarch </a></h4>
FOR A TWITTER BADGE FOR RIGHT REGION
(this code is to display immediately all "RFERL" tweets)<object height="350" align="middle" width="182" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0" id="TwitterWidget"> <param name="allowScriptAccess" value="always" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#000000" /> <param name="FlashVars" value="userID=29688637&styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml" /> <embed height="350" align="middle" width="182" src="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" quality="high" bgcolor="#000000" name="TwitterWidget" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="userID=29688637&styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml"></embed> </object>