Blue Mass Group

Reality-based commentary on politics.

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

By

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://bluemassgroup.com/upload/audio/player.swf” id=”audioplayer1″ height=”24″ width=”290″ >

    < param name=”movie” value=”http://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.

Please share widely!
fb-share-icon
Tweet
0

Comments

  1. 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.

      • 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.

        <

        p>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.

    • 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.

      <

      p>Let me know if you have problems or questions!

      • 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.

        <

        p>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 ;).

        • 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.

  3. 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.  

Archives