State Senate races
We've got two special elections for open Senate seats going on right now. Key dates:

Primary: April 13
General: May 11

Candidates:

Norfolk, Bristol & Middlesex (Brown's seat)
Lida Harkins (D)
Peter Smulowitz (D)
Richard Ross (R)

Middlesex, Suffolk & Essex (Galluccio's seat)
Michael Albano (D)
Dennis Benzan (D)
Sal DiDomenico (D)
Tim Flaherty (D)
Dan Hill (D)
Denise Simmons (D)



Support BMG PAC!
About BMG PAC
Make a secure credit card contribution using Google Checkout:
$
Or send a check to BMG PAC, PO Box 877, Medford, MA 02155.
View BMG PAC's latest disclosure report


Menu

Make a New Account

Username:

Password:



Forget your username or password?



FREE COPY OF BOB'S BOOK Barack Obama for Beginners to every 100th Facebook Friend!

BMG on Facebook

About
About us
Rules of the road - please read!
Formatting and multimedia tips
Email us
RSS feed

BMG TRAFFIC REPORT
Blue Mass. Swag
Creative Commons License

Event Calendar
March 2010
(view month)
S M T W R F S
* 01 02 03 04 05 06
07 08 09 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 * * *
<< (add event) >>

Active Users
Currently 26 user(s) logged on.

Search




Advanced Search


Blog Roll
Massachusetts Left
.08 Acres
Below Boston
Berkshires Blog
Blue News Tribune
Chimes at Midnight
Eisenthal Report
Granby 01033
Health Care for All
Left in Lowell
MA lefty blogs
Marry in Mass.
Mass Engagement
Massachusetts Liberal
Michael Forbes-Wilcox
My Dedham
Progressive Mass.
Quriltai on the Shore
Ryan's Take
Someday I Will
ShrewsBuried
Talking Stoneham
The Fray
Universal hub

Differently-Winged
John Daley
Mass. Pro-Life
No Looking Backwards
Peter Porcupine
Pundit Review
Red Mass Group
Scaling the Hill 2010

Mass. Media
David S. Bernstein
Cambridge politics
CommonWealth Unbound
Globe bloggers
Herald bloggers
Hub Blog
Jon Keller
MassBeacon
Media Nation (Dan Kennedy)
Open Media Boston
Adam Reilly
Toll Talk (Mary Connaughton)
Weekly Dig Blog

Legal
ACS Blog
Balkinization
Election law
How Appealing
SCOTUSblog
Volokh Conspiracy

General
Accountable Strategies
Billionaires for Bush
Blue Works Better
Crooks and Liars
Daily Howler
Daily Kos
Democracy Arsenal
Eschaton (Atrios)
Glenn Greenwald
Grist (environment blog)
Hullabaloo (Digby)
LiberalOasis
MyDD
Oliver Willis
Pandagon
Political Animal
Political Critic
Political Wire
Poor Man
Progressive Blog Digest
Real Climate
Senate Guru
Swing State Project
Tapped
Talking Points Memo
Think Progress
Truth and Progress
Turn Maine Blue
Wonkette

www.BlueMassGroup.com

BMG tutorial: how to embed different media in a post on BMG

by: David

Mon Oct 19, 2009 at 14:47:01 PM EDT


Basic blogging with boring old words is so, you know, 2007 or so.  Today it's all about the multimedia thing.  If you want your posts to stand out from the crowd, you need flashing lights, pretty pictures, and sound.  Many of you know how to do all of this already; some of you may not.  And, as I recently discovered, it's actually quite tricky to embed audio.  So for those who need it, here's what you need to know to include pictures, video, and audio in your BMG posts.
David :: BMG tutorial: how to embed different media in a post on BMG
Pictures

Pictures are the easiest to embed.  First, upload your picture to photobucket, flickr, or some other free file sharing service.  Then, using BMG's WYSIWYG editor, just click the "Insert/edit image" icon in the toolbar at the bottom of the text box (it's the one with the picture of a tree on it, but it also works for images of things other than trees).  Then fill in as much of the information requested as you like -- the image's URL is required, of course, but other options allow you to locate the image at specific places in your post using the "alignment" dropdown, and you can resize the image using the "dimensions" boxes.  The click "insert," and you're all set.

If, like me, you are an Auto-Format rather than WYSIWIG enthusiast, you can use the IMG html tag to insert an image in your post.  It works like this -- remove the spaces before and after the < and > brackets:

< img src="http://YOUR-IMAGE-URL" border="0" / >

You can add optional parameters to left- or right-align or resize your image as follows:

< img src="http://YOUR IMAGE URL" border="0" align="left" [or "right"] height="HEIGHT IN PIXELS" width="WIDTH IN PIXELS" / >

Note: if you resize your image, be sure to keep the ratio of height to width the same as it is in the original image, or it will look very silly.

Video

Video is also quite easy to embed in a BMG post.  First, upload your video to YouTube (there are other video sharing services around, but YouTube is the most popular and works reliably).  Once the video is uploaded, click on the video in the "Uploaded Videos" list on the "My Account" page.  That will bring up the video along with an "Embed" code in the box on the right.  Copy that code and paste it into your post -- that's all you need to do.

You can resize videos if you want to.  It works the same as with images -- you just need to alter the default "height" and "width" parameters that show up in YouTube's embed code.  Note that there are two spots in the code where you must change the values.  And again, it's a good idea to keep the ratio of height to width constant.

Audio

Oddly enough, it is much more complicated to embed audio than it is to do video.  That is because, as far as I know, there is no widely-used service for audio that will both host your file and create a spiffy player for you, like YouTube does for video.  I have cobbled together the following effective but somewhat cumbersome solution:

  1. Convert your file to .mp3 format.  Portable audio recorders record audio in a variety of different formats -- mp3, mp4, Windows Media, and others.  However, our player works only with mp3 files.  So if your audio device records in something other than mp3 (like mine does), you first need to convert your audio file to .mp3 format.

    The easiest way I have found to do the conversion is with iTunes.  To get this to work, you may need to go through several steps:

    1. Open the "Preferences" Menu
    2. In the "General" menu, click the "Import Settings..." button (located next to "When you insert a CD").
    3. From the "Import Using" menu, select "MP3 Encoder."  The "Good Quality" setting for bit rates and so forth is probably OK.
    4. Click "OK" twice to save the settings.
    5. Now, from the "File" menu on the main iTunes page, select "Add to Library..."  This should bring up a list of files on your computer from which you can select the audio file you want to post.  Select that file and click "Open."
    6. Once the file is in your iTunes library, highlight the file, and then from the "Advanced" menu select "Create MP3 Version."  That will create a file with the same name as your original file, but in the mp3 format.  Make sure you know where that file is stored on your computer, since you will need to locate it for the next step.


  2. Upload your mp3 file.  Once you have created an mp3 of the audio you wish to post, you have to upload it to a file sharing site.  I have found that Posterous works very well for this purpose; I'm sure there are many others.

  3. Use BMG's audio player to embed the audio in your post.  Now that you have posted your mp3 file, you need to put the following code in your post to create an embedded audio player.  Replace YOUR-AUDIO-URL with the URL of your audio file as supplied by Posterous or whatever file sharing site you are using.  And, as always, remove the spaces from before and after the < and > brackets:

    < object type="application/x-shockwave-flash" data="http://www.bluemassgroup.com/upload/audio/player.swf" id="audioplayer1" height="24" width="290" >
    < param name="movie" value="http://www.bluemassgroup.com/upload/audio/player.swf" / >
    < param name="FlashVars" value="playerID=1&soundFile=http://YOUR-AUDIO-URL" / >
    < param name="quality" value="high" / >
    < param name="menu" value="false" / >
    < param name="wmode" value="transparent" / >
    < /object >

Questions?  I hope this is helpful.

Tags: , (All Tags)
Print Friendly View Send As Email
suggestion (6.00 / 2)
Once this diary drops off the front page, add it to the list of diaries permanently archived on the "About" menu in the left margin.

It's already linked (6.00 / 2)
on the "write a new post" page, right after "formatting tips."

[ Parent ]
Thanks... (6.00 / 1)
...but I could use guidance on how to "upload your picture to photobucket, flickr, or some other free file sharing service." Any pointers?

The timing of this post is uncanny. Yesterday, I was trying to put my first picture on a BMG comment--a Che Guevara mokney to go with Bob's monkeys in Kyledeb's post.

TedF


That's not a monkey (0.00 / 0)
to pick nits, that's an ape from Planet of the Apes...

[ Parent ]
The Librarian from Discworld would tear his face off ... *lol* (0.00 / 0)
In Terry Pratchett's Discworld, the Librarian (of the library of Unseen University) is an orangutan who was transformed from a wizard in an unfortunate magic accident and preferred to remain in his transformed state.

From the above link:

Being an ape, he is known for his violent reaction to most people calling him a "monkey". He speaks a language whose vocabulary consists primarily of the single word Ook, inflected for simple affirmations and negations. Eeek is also occasionally heard, particularlly in moments of panic or rage. Nonetheless, most people seem able to understand him.


"If the Republicans will stop lying about the Democrats, the Democrats will stop telling the truth about the Republicans" -- Adlai Stevenson

[ Parent ]
Uploading pictures (0.00 / 0)
should be pretty easy.  With your Che Guevara monkey ape, what you'd need to do is, first, copy the photo to your hard drive (first of course being sure that you are not committing any copyright violations).  Second, create an account on flickr, photobucket, or the file sharing site of your choice.  Once you have created an account and have logged in, there should be reasonably easy-to-follow instructions on how to upload photos from your hard drive to the site.  And once you have uploaded a photo, the site should assign a unique URL to that photo, and that's the URL you use for posting purposes.

Let me know if you have problems or questions!


[ Parent ]
another picture option (0.00 / 0)
If the picture is already out there in the Internets, you can just reference the URL of where it exists. Google is good at finding images.

For example, recently I wanted to find a picture of William Shatner as Captain James Kirk. Once I found one I liked, I obtained the URL (in Firefox on a Mac, CTRL-click and "Copy Image Location" copies the URL; others might chime in on other OS/browser combination). Then I pasted that URL into the "src" field of an img tag (see David's description in the main post) and viola! I earned eleven sixes for that bit of work ;).


[ Parent ]
Trouble with that (0.00 / 0)
Two problems:
  • It's like stealing bandwidth. Especially if the image is on a site whose traffic is much slower than BMG's. That's why the procedure David describes has become required, say, on Daily Kos.
  • Mischievous hosts have been known to make the URL point to a different image. Your picture of a princess could later revert back to being a frog.


[ Parent ]
Didn't RMG learn... (0.00 / 0)
... that lesson the hard way?

"It is not because things are difficult that we do not dare, it is because we do not dare that things are difficult." - Seneca (5 BC - 65 AD)

[ Parent ]
trial and error (0.00 / 0)
I think that's one of the most important things to posting anything on the internet. Code can be a finnicky thing; I won't pretend to be a master at it. Just keep toying with the code and press preview; if it works, you'll see it on preview. If it doesn't, erase some more of that useless muck in the code that gives Soapblox tummy aches and try again.  

---
My thoughts are mine and mine alone. They should not be considered representative of any other organization, group or person - save me.

~Ryan.


should this be linked (0.00 / 0)
in the left column under formatting tips. so we can locate it when we need it?

www.bit.ly/7Wousr - "Must include a public option"
www.bit.ly/7yaoMv - Coakley shifts, backs abortion curb
www.bit.ly/5f8CVb - John Kerry reporting for duty!
www.bit.ly/6rJnZU - Questions for Martha Coakley on Civil Rights  


Any way to embed google maps? (0.00 / 0)
I tried the embed code, but it didn't work.  Anyone know how to insert an embedded google map into a post?




I support WWF


Political insider ad network Law blog ad network
Advertise Liberally









Powered by: SoapBlox