Embedding Rich Media In Your Posts

Lesson Seven of my special Getting Started With Drupal series of videos.

This video tutorial shows you very basic methods for adding embedded video, photos and audio to posts on your Drupal site. FCKeditor and IMCE (which we installed in a previous lessons) are two contributed modules involved in the process.

The Yahoo! Easy Listener music player is used to embed the audio that we upload to the site. You'll also see how the file upload and local php.ini settings are adjusted to support uploading mp3 files up to 10MB in size.

Note: Since the production of this video the Yahoo! Easy Listener music player has been discontinued so you will need to utilize another flash player to successfully embed audio using this method. The MP3 Audio Player is a good option.

Bookmark and Share Bookmark or Share Post

Comments

Anonymous's picture

Hi, I do not have "File

Hi,

I do not have "File uploads" under my Site Configuration. Any idea why?

Thanks,
Jim

Anonymous's picture

File Uploads

I found it! I had to enable Upload Module in the CORE. Found answer here:

http://www.digitalraindrop.com/Drupal-Uploads

Thanks Dave Chakrabarti!

noy's picture

Re: File Uploads

hi,

i tried to check the link you posted but its an error.

i also dont have file upload or attachment.

pls help

thanks

learnbythedrop's picture

Re: File Uploads

What the previous commenter was referring to was enabling the core upload module (/admin/build/modules/list) and then you can adjust the file upload settings and attach files to nodes.

Anonymous's picture

Easylistener no longer exists. Yahoo budget cuts..

http://next.yahoo.com/archives/32/easylistener redirects here:

http://developer.yahoo.com/archives/32/easylistener

Sorry, the page you requested was not found.

Please check the URL for proper spelling and capitalization. If you're having trouble locating a destination on Yahoo!, try visiting the Yahoo! home page or look through a list of Yahoo!'s online services. Also, you may find what you're looking for if you try searching below.

learnbythedrop's picture

AlternativeTo Easy Listener

Well that's good to know. I'm using it on one of my sites. For the moment the following embeddable player looks like a respectable option.

http://www.widgetbox.com/widget/media

Vikas's picture

I do not get a Browse Server

I do not get a Browse Server Button when the Image Properties pops up. Can you help me alter the code or the settings to get this button.

Matt's picture

I don't either

These are great videos, by the way.

I don't get the browse server, either. Did you find an answer?

Thanks

Anonymous's picture

me neither...

I don't see the "browse server" button. I've messed around with IMCE and cant get it to work. Would appreciate assistance if someone figures it out...

p.s. Thanks a lot for these videos! I know you spent a lot of time doing them, and I really appreciate it.

learnbythedrop's picture

IMCE Browse Server Button

The failure to display a "browse server" button is an issue that occurs for a variety of reasons. Here are a few things to check.

1. Make sure that the core "Upload" module is enabled.
2. Check FCKeditor settings to make sure that the "file browser type" is set to IMCE.
3. Check the IMCE settings to make sure that you have a proper "directory path" set up.
4. Make sure that your directory path(s) exists and are writeable.

If you search "imce, browse server button" on Drupal.org you will find some more possible remedies to this issue.

Linds's picture

IMCE Browse Server Button

After doing the above and it not working and deciding I didn't want to do anymore downloading of stuff trying to figure things out I sat for a while and thought why wouldn't it show up.

Well there was another profile(advanced) in the FCKeditor settings and on a whim I checked it. I changed the settings for the file browsing like in the video with the lists: File Browser type to IMCE and allow quick uploads to true. And this worked for me. So give it a try if you are still trying to get this to work.

Try this:
FCKeditor settings:
Advanced profile
File Browser type -- IMCE
Allow quick uploads -- True

Same for me!!'s picture

I had the same issues &

I had the same issues & followed the same steps with no results. Then I tried going into the advanced settings and changed the file browser type as well as allowing quick uploads. After those additional steps, the "browse server" button finally appeared.:)

Larry Z.'s picture

Hooray. Yes, this worked!

I had the same problem and same frustration. Changing the settings on the "Advanced" profile is what finally gave me the Browse button also.

Tim's picture

Missing Browser Button

I've made sure that all the 4 items mentioned above a done and correct. However, the browser button still does not appear. I've clicked on the link for other possible solutions on the Drupal site, but I'm not an experienced programer. Do I need to install the IMCE-WSIWYG API that I read about, and if so to what directlroy path do I copy the files?
Thanks A bunch!

learnbythedrop's picture

IMCE-WYSIWYG API

I think it's worth a try. WYSIWYG API is an excellent module that I found after recording this video. I believe that you would want to remove fckeditor prior to installing the WYSIWYG API and the bridge module.

SteveO's picture

IMCE Browse Server Button

I am really enjoying your videos. well worth purchasing them!

I too am having trouble with getting the browse server button to appear.

I have done all of the above suggestions. I just tried the IMCE-WYSIWYG API but to no avail.

Any other suggestions or ideas?

Do I have to activate these modules in a certain order? I use firefox as my browser, windows xp.

Thanks,

SteveO

learnbythedrop's picture

IMCE Issues

There's been a lot of talk about this issue on this site and on Drupal.org. What I plan on doing is setting aside a bit of time over the coming weekend to try to set this up on a new site to see if I have the same troubles. I'll report my findings on this post.

Darren's picture

Browse button

For me, the browse button didn't automatically appear. When I clicked the "insert/edit image" icon, an inline square popup appeared with the title "image properties". After I clicked "browse server", it opened a new window named "file browser" where you must click "Upload" to have the "Browse" button display underneath. An "Upload" button will appear next to the "Browse" button.
The UI was very confusing but I believe Rob's steps are correct in the video. I know it was very confusing on my first try, and I can't verify that everything worked correctly on my first go, but after fiddling around I did eventually find everything. Also notice that the "file browser" window (if left open) doesn't come to the front once you switch between windows, when clicking the "browse server" button.

learnbythedrop's picture

IMCE and the Browse Server Button

I believe that I have this worked out. First of all I recommend installing FCKeditor via the WYSIWYG API. It appears that you lose control of some of the FCKeditor settings in doing so but you gain in ease of use. I recently recorded a video that shows the process of installing FCKeditor using WYSIWYG API.

The next thing to do is install and configure IMCE as you normally would. Then install the IMCE Wysiwyg API bridge module. All this module does is add a choice called "IMCE" in the Buttons and Plugins section of the profile for FCKeditor. By checking the IMCE box you ensure that the "Browse Server" button is available when you select the image icon in your FCKeditor toolbar.

Remember to make sure that you also have the "image" box checked as well in the buttons and plugins section of your FCKeditor profile.

Jerimee's picture

you also have the image box checked

*Remember to make sure that you also have the "image" box checked as well in the buttons and plugins section of your FCKeditor profile.*

Shame that this has to be done manually. Just spent like half an hour messing around with various settings for lack of knowing this.

akowe's picture

Re: IMCE and the Browse Server Button

After several attempts following the several tips about the locations of the modules (..sites/all/modules....) and ....sites/all/libraries...). I had to manually check all the buttons on my Wysiwyg/Fckeditor....edit tab...to get my Full HTML buttons and IMCE to show the "server browse" option.make sure you check the "Image" and "IMCE" options. Then go to your "Create Content" menu and choose any options to meke sure.
This is sure one of the most confusing steps that I have seen so far.By the way I am training with the latest Drupal 6.16.

Schoder's picture

FCKeditor Icon Display Problem

I installed WYSIWYG API then FCKeditor 2.6.4 (as instructed by LBTD) works fine. Then installed IMCE then IMCE Bridge (all latest modules as of 05 16 09) in Drupal 6.12. Everything looked good with the installs. I see the Browse Server button in the Image pop up window.

However one anomaly, when I set up my FCKeditor in WYSIWYG API, initially all check boxes in "Buttons and plugins" are unchecked. However FCKeditor displays ALL buttons(4 rows of buttons). If I check the check boxes for the FCKeditor buttons I want to display, the buttons will display in a single row and NOT WRAP to 2nd, 3rd and/or 4th rows as needed. So that if I have selected more buttons then what can fit in the width of the FCKeditor, they disappear on the right side as if they are being displayed inline and won't wrap to another row. Toggling the Tool Bar open and shut will not fix it, nor will toggling the "Disable rich-text" link.

Has anyone else seen this issue?

Kung Tang's picture

Dear Rob, I couldn't find the

Dear Rob, I couldn't find the page http://next.yahoo.net/archives/32/easylistener.. So I cannot complete the whole tutorial.. Any suggestion? Thank you very much :)

and Nice tutorial..

learnbythedrop's picture

EasyListener Discontinued

The news came out recently that Yahoo discontinued the Easy Listener widget. There are a number of choices for replacements, including the PodBean player (http://www.podbean.com/podcast-blog-embeddable-mp3-flash-player) or the audio module (http://drupal.org/project/audio) which was recently ported to Drupal 6. The MP3 Player (http://drupal.org/project/mp3player) module is another module that will work for D6 as well.

bradklaver's picture

Browse Server Button Not Showing Up

I used Firebug and found that the Browse Server Button does show up in the HTML but it has a tag style:display-none or the like, when I used Firebug to erase the tag, the button showed up, and IMCE's pop up window informed me that I needed to look at:

/sites/all/modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php

Then I set

$Config['Enabled'] = true;

There is a comment in config.php that helps you out. Try it, I got it to verk!

Antonio Licon's picture

One step closer anyway

I am using Boost, which actually buggered fckeditor's regular upload. Though I got that to work again by bypassing the boost module for fckeditor's path in .htaccess.

Long story short... I would really like to use IMCE. Installed it, and have gone through all the usual setup. Thing is, your post helped me find that IT SHOULD WORK. By removing the 'display:none;' using firebug I got to see the elusive Browse button. AND my file browsing was working... so why then, does the button not show up? Very curious. I am guessing I will have to hack the FCKeditor module to simply include the Browse button.

BTW this is all on a Drupal 5 site. :(

joergen's picture

What can be the final trick to make it work?

With Robs really nice videos it has gone quite smooth until it was time for installing the fckeditor. I spend the most of the day following Robs last directions here. Now the browse buttom shows, but fckeditor filemanager\connectors\php have to have $Config['Enabled'] = true ; else error message. No thumbnail option, and images upload to localhost/userfiles

It may be just a few settings missing, but I'm out of options.

I have had succeded installing fckeditor elsewhere. And I know the files to configure for path and permissions. But since this is not mentioned, I figure that IMCE overrides this?

learnbythedrop's picture

Working Out FCKeditor Issues

There are lots of methods to install FCKeditor and for some reason some people are seeing the missing "Browse Server" issue with IMCE and others are not. I think the best advice if it seems like it just won't work is to install FCKeditor using the WYSIWYG API (as shown at http://learnbythedrop.com/drop/144) and then add the WYSIWYG API Bridge module (http://drupal.org/project/imce_wysiwyg). See the following comment for more information on the process.http://learnbythedrop.com/drop/129#comment-586

joergen's picture

Tricks

Thanks Rob. Really appreciate your lessons here. I have tried everything suggested here. But there seem to be buggs in the modules, and only for some of us, for some unknown reason.
I also found two not so serious bugs concerning this lesson, explained in short terms:
In content editing/new: Post category select box turns to a field and no tag field will show, when selecting Tags in Taxonomy (bug).
When in wYSIWYG settings I select what buttons to show, and when I look at the editor, all buttons are put in one line and hidden, and image upload are disabled.

I understand that I have to let it pass for now, and report buggs to the Drupal community and hope for new updates that fix it.

joergen's picture

I missed something - but still...

I tried again with Robs reccommendation: http://learnbythedrop.com/drop/129#comment-587
It seems I forgot the imce_wysiwyg. Now I am able to use thumsnail creation and insert images. BUT when I save only text remain. No pictures are seen, not even smileys or image placeholders.

Keith Stoddart's picture

upload button

I wonder if my path is incorrect in FCKEditor!!

Path to uploaded files:
Path to uploaded files relative to the document root.
Available wildcard characters:
%b - base URL path of the Drupal installation (/drupal/).
%f - Drupal file system path where the files are stored (sites/default/files).
%u - User ID.
Current path: /drupal/sites/default/files/
Absolute path to uploaded files:
The path to the local directory (in the server) which points to the path defined above. If empty, FCKeditor will try to discover the right path.
Available wildcard characters:
%d - server path to document root (/Applications/MAMP/htdocs).
%b - base URL path of the Drupal installation (/drupal/).
%f - Drupal file system path where the files are stored (sites/default/files).
%u - User ID.
Current path: /Applications/MAMP/htdocs/drupal/sites/default/files/

Should it not be going to the 'sites/all/themes/Ad_novus/.. etc. etc. ??

Keith Stoddart's picture

upload button

OK, I have now lost FCKEditor totally!!
I will re-install and see where I go from there.
Keith

joergen's picture

Reccommended

I will reccommend Robs final method: I tried again with Robs reccommendation: http://learnbythedrop.com/drop/129#comment-587
Though I get no pictures shown in my blog post - yet, I see things uploaded in the right folder with thumbs and all.

prefect's picture

finally got upload button but now photos wont show

Hi,

Thanks for the vids, they are hugely helpful, though this one is driving me crazy.

I have had massive problems with this. Did first half, got video up no problem. Moved onto images; first got no upload button, then after following the 4 steps lost the text editor buttons (where source. bold, align etc are). Then moved onto downloading and installing WYSIWYG and the bridge. After mucking about for ages I got that going. Followed all steps. Finally got an upload button. Went to browse server, uploaded a pik - this is all local server btw- and now the pictures show up in post as I create it, but as soon as I hit preview, publish or save the photos disappear from the entry.

Any ideas why???

Thanks

joergen's picture

Finally another with exact same problem

Let me explain my tests BUT when I save a blog post:
Internet Explorer and Google Chrome: Only text remain. No pictures are seen, not even smileys or image placeholders when saved.
Firefox: I get a series of popup toolbar object errors. But images remain in the post when saved.

Don't know what to do else wait for module updates that fixes the buggs.

learnbythedrop's picture

Perhaps Input Format

Whenever a picture that is in the post won't show up upon preview or publish it's usually because of the selected "input format". Make sure that the input format for your post is set to "Full HTML". The following post and video offers more information. http://learnbythedrop.com/drop/78

prefect's picture

No "source" button for video now as well

I've just noticed now that after doing everything I've listed above there is now no source button for the easy embedding of videos as shown in the first half of the vid. I've checked all the buttons in the admin menu for this module so I"m guessing that there must be a different way to embed the videos?

Still haven;t worked out why the photos wont publish either - even though they show up when I'm creating the post.

Any advice/help appreciated

joergen's picture

No "source" button for video now as well

Sorry, I don't really understand that list, and haven't noticed any special video button, except for the flash button.

prefect's picture

in the first half of the

in the first half of the video it shows that to embed the youtube link you press the 'source' button and then paste the embed code in there. Once WYSIWYG is installed the 'source' button is no longer there. Yes, the 'flash' button is stil there but that doesn't help with embedding videos.

Is there a way to embed videos as easily as in the tutorial? And I've spent hours trying to get the photos to preview and publish and I can't work it out. So the choices are: take out WYSIWYG module and go back to the FKeditor and have no browse button but be able to have videos or keep WYSIWYG and have a browse button but no video or photos.

This part of drupal has me stumped.

Thanks in advance if anyone has any answers.

joergen's picture

In IE I see the button BBcode

In IE I see the button BBcode ("[tags]") instead of html tags ("") and no source code button. In FF I see source code button and it has thrown of a lot of buttons. The whole thing is a wreck, definately there are buggs in the modules. I have set up a number of other portals in ASP, and it has always been very hard to implement fckeditor, but if it succeeds here too it's worth it.

I'm not an expert to help here, but I can just say that with the Flash button I am able to insert all kinds of flash movies and banners, but source code is a must.

I will stumble through with the editor for now and try to get help here or on the forum, and hope for future bug fixes.

learnbythedrop's picture

Disable Rich Text

Beneath the input section (aka the "body") you should see a link that says, "Disable Rich Text". Clicking "disable rich text" provides the same functionality as the "source" button.

joergen's picture

Thanks again, plan B is

Thanks again, plan B is welcome. Plan B solutions are just not known to the comming admins of my portal. Hope for a module update to fix it.

joergen's picture

Disable rich-text link is

Disable rich-text link is visible in Firefox, but not in IE 7.

learnbythedrop's picture

That's strange. I can't speak

That's strange. I can't speak for issues across Firefox and IE7. I always use Firefox to admin my sites so I wouldn't notice that.

learnbythedrop's picture

Also Good To Know

You can add the "source code" button using the WYSIWYG API by going to '/admin/settings/wysiwyg/profile' and then clicking the edit button next to the FCKeditor profile. In the "buttons and plugins" section look for the check box for "source code".

joergen's picture

In my case "source code"

In my case "source code" button i s already selected - everything is selected. Shows only BBcode button in IE, which I have not requested. In Firefox most of the butons are thrown off in the loading.

joergen's picture

Correction, BBcode is

Correction, BBcode is selected. HTML source code button is NOT on the list, must have been forgotten by the developer of the WYSIWYG module.

joergen's picture

Correction2. A button named

Correction2. A button named "Source code" IS on the list of choices, and it is selected though not present in the editor toolbar.

eword's picture

attachments enabled is not there

ok, well, as i get my site back to where i was before a little backup mishap, another thing that worked without a hitch the first time is now not working... this time, under the edit the "blog entry" via content types, there is no enable attachments setting showing up there? the only options under that heading is the default options list.

i suspect this has something to do with having skipped around so as to start out with the wysiwyg/IMCE/fckeditor via wsyiwyg approach that i ended up needing to use to get that browse button to appear.

can't find any setting that turns that on?

learnbythedrop's picture

Upload Module

Check to see if the core upload module is enabled. I don't believe that this module is enabled by default.

joergen's picture

Simple trick was found that made it work

Until now my fckeditor was not working and I saw a BBCode button instead of the Source button. I have been trying everything suggested here. Problem SOLVED. In admin/settings/wysiwyg/profile/2/edit Buttons and Plugins everything was selected. I tried deselecting BBCode, and that did it. BBCode button blocked, so it must be one or the other that has to be selected. What a great day :)

joergen's picture

Thanks to learnbythedrop for

Thanks to learnbythedrop for great service here. For me the final cure was just this little trick.

Columbus Joe's picture

Hey there, everybody. I have

Hey there, everybody. I have Drupal 6.13 installed. After I set IMCE as the default Browser Type and set Quick Uploads to "yes" in FCKeditor's Default settings, I receive the following message in Status Report:

"You are using a feature that requires $cookie_domain to be set, but it is not set in your settings.php (either built-in filebrowser or quick uploads are enabled in the Default profile)."

Can anyone tell me what's wrong? I'm fairly confident that it's my own mistake, as opposed to a bug.

MA's picture

Embedded images and Imagecache & Lightbox2?

Hi Rob,

First of all, thank you very much for your lessons. I'm very new to drupal but finally I think that I'm getting what's is going on thanks to your videos.

I would like to ask you about what I wrote in the topic. In this lesson you shown us how to embed pictures previously uploaded to the server, and how to manipulate them as if we were working like any WYSIWYG text editor like word.

My question is, how can we display embedded the pictures in a lightbox restricted to the pictures we have just in a post? Is it possible to make any kind of slideshow box showing only the pictures embedded in a certain post?

Thank you

learnbythedrop's picture

Grouping Lightbox Images

If you look at the post at http://learnbythedrop.com/drop/60 you should see that the images in the post can all be viewed by opening one of them and then using the navigation within lightbox. I believe that this function is controlled in Lightbox's Automatic Image Handling settings located at /admin/settings/lightbox2/automatic. I have the image handling set to "Lightbox grouped" and I believe that will give you the function you want.

Ali's picture

Embedding IP Camera's Live stream

Hi! I want to emmbed live stream of Ip camera on my nodes, is there any module available for this? Or how can I do that?

regards

spin's picture

Hi, i am having trouble

Hi,
i am having trouble uploading an image. I've downloaded all the modules from the previous tutorials but when i update IMCE and FCKEditor i still don't get any browse button when i click Insert/Edit Image. Is there another setting i need to change??

Thanks.

learnbythedrop's picture

FCKEditor Image Upload

See the following comment which explains steps that I have taken in the past to solve this issue. http://learnbythedrop.com/drop/129#comment-658

Anonymous's picture

Browser button

Hi Rob,

I'm new to Drupal & thanks to your great videos. I followed your instructions to install fckeditor with wysiwyg api, and imce-wysiwyg & imce modules.
The problem is fckeditor has to copied into the sites/all/libraries folder & not the modules folder. I'm unable to see the fckeditor in the modules page on the localhost & I cannot see the browser button.
I'm using Drupal 6.14,fckeditor 2.6.5.

Thanks for your help!

learnbythedrop's picture

Location of FCKeditor

The FCKeditor module, what you downloaded from Drupal.org, goes in the sites/all/modules folder. The FCKeditor files, which you downloaded from http://sourceforge.net/projects/fckeditor/files/FCKeditor/, then go in the sites/all/modules/fckeditor/fckeditor directory. These instructions apply to the module at http://drupal.org/project/fckeditor which is a standalone module. If that's the module that you installed then that should be the location.

If you used the WYSIWYG module, http://drupal.org/project/wysiwyg, then the FCKeditor files would go into the sites/all/libraries folder. If that's what you've done then see this video and the associated comment thread, http://learnbythedrop.com/drop/144#comment-635, for information on the browse server button.

karishmapawar's picture

First Video Test Failed

Hi Rob,

While learning the lesson 7 my video dint get uploaded.
when i go to the preview its not getting done properly.

Please guide me

learnbythedrop's picture

Video Problem

What happened?

karishmapawar's picture

Re: Video Problem

Hey the problem got solved.

I have another problem like my picture now is not getting uploaded coz, when i go the Inser/Edit Image, besides the URl there is no browse buttom and due to that the problem is not getting solved. Please guide me

learnbythedrop's picture

Browse Server Button

Read the comments starting from here - http://learnbythedrop.com/drop/129#comment-488 - to find possible solutions.

karishmapawar's picture

Re: Browse Server Button

hey Rob.... it worked properly.......

Thanks a lot.

Enki's picture

Re: Embedding Rich Media In Your Posts

Hey Rob, Great tutorial, just downloaded the premium version & so far doing good. But as you know there have been quite a few updates made since you made the videos. Could you please start a new topic/post and go through some of the issues that a lot of people have to go through. ie...my browse button didn't come up first like many here, but finally managed to get it trying various paths and of course going through your posts and comments made by others. I'd say it would be a great help if you give an update for everybody who is following/will follow your "Getting Started With Drupal" tutorials. Thanks and keep up the great work.

William White's picture

EasyListener back from the dead...

Hey man,

Really cool video with some great explanations. FYI - anyone can still use EasyListener on their site, they just need to change some of the embed URLs. You should be able to get all the info you need at:

http://musiclibre.org/easylistener/

Cheers.

William.

learnbythedrop's picture

Re: EasyListener back from the dead...

Wonderful, thanks very much for the update William.

sok's picture

Re: Embedding Rich Media In Your Posts - php.ini file

Hi,

After going through your video i discovered that i need to increase the upload size from the default 2mb. In the video, you accomplished this by editing the php.ini file. My question is, where can i find this file? is it in the drupal directory? I host my site on 000webhost.com. Cheers!

learnbythedrop's picture

Re: Embedding Rich Media In Your Posts - php.ini file

That's a question for your web hosting support people. In some cases you might not be able to change it. Your host would know for sure.

sok's picture

Re: Embedding Rich Media In Your Posts - php.ini file

Hi Rob,

Just letting you and everyone here know that this problem was solved by inserting the

php_value upload_max_filesize 10M
php_value post_max_size 20M

into the .htaccess file

This would increase the max upload size from default 2mb to 10mb

Cheers!