Filefield Inline Images

On this weeks podcast Bob shows you an alternative and forward-looking approach to inserting inline images into your Drupal nodes. Using Filefield Insert and Image Resize Filter we can leverage the power of CCK (and in the future, Media module) to drive our inline images.

Great video tutorial Bob! I've read countless complaints and questions in the Drupal forums about people not having a native (in core) way of doing inline images. This will definitely help a lot of people.
A great module for content inline image. But uploading inline image in this way, same image cannot be used by other content.
Yes indeed...image reuse is one of the things that the new media module will address (which I mentioned in the podcast). The media module will allow you to reuse imagefield images in the future, which is why it's a good idea to start using imagefield now....you'll be building up your image archive in a future compatible format now rather than having to switch everything later.
WOW! What great timing, Bob! I just asked some questions about this on the G&G forums, which you answered very well. Thanks for sharing! This helps point me in the right direction.
Hello Bob. I have a question that is bothering me for quite a time. If you have the time and willing to just give me a hint or something. I want to upload some images external.I mean when i click upload on the imagefiled the image to be uploaded automatically to images.domain.com. How can i achive that? Thanks Bob and a nice day.
Great stuff, thanks Bob!
First, isn't requiring Full HTML to upload images dangerous? I believe the purpose for the input filtering is in part to remove potentially dangerous tags. It's irresponsible in my opinion to put a recommendation in the podcast that the way to attach images is through using full HTML. Isn't it more responsible to suggest adding the IMG tag to the Filtered HTML tag list? I've always been confused why IMG isn't in that list anyway. Second, about the dissing of IMCE ... The solution you present would only work for images attached to a node. What about uploading images into a comment? Since nodes are not comments how can a CCK field based upload method help in that case? I run a busy forum site based on Drupal and the site uses IMCE for image uploads. The users are regularly uploading images into comments and that ability is a core part of their conversation. A typical discussion thread might start with words and pictures describing a question they have, then different people responding with other words and pictures, and they're discussing back and forth using both words and pictures. Drupal is supposed to be "Community Plumbing", right/ Communities talk to each other. Not all conversations are words. Some conversations are pictures or video or audio. If the situation becomes one where those things can only be added to the main body of a thread and not to the comment chain, then it will drastically damage the discussion that's the lifeblood of a community.
Hey David, thanks for the comment. Just a couple responses: 1. If you don't want to require full html to post images, just add to the Filtered. In my situation, most sites build don't allow anonymous users to upload images or access Full HTML, so the use is appropriate. If it's different in your case, just make the necessary changes. Also, I wasn't 'recommending' that people use Full HTML...I was simply doing it because I'm lazy and didn't want to alter my demo site for this one screencast (hey, when the screencast is free, I reserve the right to be lazy sometimes) 2. Sure, if you need to add images to something other than a body field...this isn't for you. But it will solve a problem many people need to solve.
Many thanks for your honesty and this great forward-looking Drupal tip!
Thanks for the video. But I have a problem : When you create a page or modify, how to have the bold, italic, underligned, align left etc... options? Because I don't have them. In the video, those things are in the top of the body but for me, it is impossible to set the text for example or insert an image with the button. And when I insert an image with the "attach button", an html code appears in the body, not the image. Thank you Sorry for my english
You have to use a WYSIWYG in order to get the buttons or display the image..otherwise you're seeing the underlying code.
Related: Bob, Seems that many in the community are using FCKEditor with the WYSIWYG API. Are you moving this way too? I have still been using bueditor/IMCE since you showed me that way years ago, but wonder what your thoughts are on WYSIWYG today. Thank! Shrop
Forgot to mention. Great episode. This is really slick. I agree with you and others in saying that we will want uploaded images to be available to others down the road. The most amazing part is the actual resizing it does. None of that HTML resizing which forces browsers to download the original and the smaller images sometimes looks weird since it hasn't been smoothly resized. Shrop
Many thanks for your honesty and this great forward-looking Drupal tip!
Yup, I've moved over to WYSIWYG API and FCKEditor for now (still not my favorite, but it works for clients best)....things are looking up for WYSIWYG these days!
Thanks for the excellent screencast! I've done this whole demo at a few Drupal meetups and I was planning on making the same "complete package" video on lullabot.com, but seems you beat me to it! Great screencast as always. I've posted this video to the project pages for FileField Insert and Image Resize Filter. Thanks!
aaaah ... i tried it over and over again, thinking of "what could i have done wrong..?!" finally i have figured out, the "image resize filter" doesn't work in safari. :-(
There were so many cool things to see in that video. The themeing of the admin of the site was very nice. The red admin bar at the top caught my eye. :-) The WYSIWYG API is very nice, I hadn't seen that in action, but what a beautiful thing. I can see that making input filters a little more interesting since it is tied in with that. Then, of course, filefield insert and images resize filter are super cool also. Thanks rob, that was a tight package that took very little time to consume, but provided a huge package of info!
wysiwyg api is good and nice, but: i also use the "excerpt module" for individual teasers. and i don't get the fck-editor at the provided "Teaser" field, by the excerpt module. would it be a good idea to additionally install the fckeditor module (http://drupal.org/project/fckeditor), because this provides a activation-link under every textarea?
Thanks for the excellent tutorials, can you make one to site whit multilanguages please? cya!!
Another module that may be of use in this round-up is Filefield Sources (http://drupal.org/project/filefield_sources) which enables reuse of existing images/files in the system, and use of external ones as well. I haven't tried this out yet, but it's sure to be good (go quicksketch!) I'd be interested to know what "bugs" you found in this - the issues queue on drupal.org is pretty empty save for feature requests? Also, I'd like to know how you implement different sets of TinyMCE (or whatever) controls for different input formats? I don't believe I've seen that before. Thanks for a good video, in the mean time! :) Nik
NikLP, Absolutely! Sources is an awesome add-on to this bunch as well. I hadn't integrated it at the time of this podcast but I did immediately afterwards. As for the bugs, they're hard to describe and I'm not sure which module to attribute them to. On multiple occasions when sending the CCK image to the body, it actually has displayed a DIFFERENT image than the one I sent (I can't even figure out how this is possible). It looked like it was caching previous uploads or something. It was doing that and a couple other little buggy behaviors I can't remember currently.
Your podcasts put rivals the ones from Lynda and similar sources. You should put out a dvd or something :). I have a little wish. You did a podcast earlier on the Event/Signup modules. Could you consider doing one on how to allow for payment for sessions as well? Thank you in advance, Marcus
Apart from having a silly name it seems to be the best approach if you wan't to sell something with Drupal (books, records, events etc). I would love to see some indepht casts on this as well.
Hi Bob! It's a great video again! It is very very useful that you show forward-looking methods! (And I really like your dynamic style too! ;o) ) Do you have an idea to the teaser image / full node view image problem which works well with this solution?
This is a little off topic, but I believe you mentioned that you had done some styling of the admin area in this podcast. For example, you have the upload field showing up next to the WYSIWYG editor instead of below it. I would like to add styling to the admin forms on a site I am working on. How do you do this without messing with the core? What CSS file(s) do you edit? Thanks for your help and for all of these wonderful podcasts.
Hey Nancy, All I did here was use CSS in my style.css to override any existing styles. I simply sized and floated both the body and image boxes and that was it. Nothing crazy!
well , this is a great podcast, it reallay helped me a lot in a very smart way, but i have only one problem left, i want to apply the lightbox on the inserted images, when i try to do that , it repeats the images below the post and apply the LightBox, when i check the Exclude checkbox to prevent the the repeat of images , it displays the images in the post but without LightBox, Any Clue ?
http://drupal.org/node/479310 There is something about this here. Maybe Bob could provide a tutorial for this also though :)
Hey Salateenoo, I created a patch for what you asked, it can be found here: http://drupal.org/node/479310 I will be working on the improvements that quicksketch/nathan has asked for so that he will include it in the module. Thanks, pip
The demonstration of Inline images was awesome. Its something that I have been trying to implement for my site for the past week but have not had any success. It was a great relief to see an actual demo. I had given up hope that it is in fact possible. Having seen the demo in your podcast, I tried to re-create your setup, but was once again not successful. Maybe, I am missing some module or a configuration trick. It will be very helpful to see a complete step by step instructions to implement Inline images. Can you please post them? Specifically, which modules are needed and what configuration steps need to be performed? Thanks, Bangalos.
Work is underway in the issue queue for filefield_insert to allow for the use of all CCK field formatters instead of just the imagecache presets.
Does anyone here have a good videocast for these? I have this challenge. I have a frontpage with a totally different layout from the rest. Some have suggested the frontpage.tpl.php but these Panels seem like a much more elegant solution. Still don't know where to begin with this beast. Thanks in advance Marcus
First of all, this is a great podcast. I noticed that you have an "Add another image" link in your UI. I cant find a checkbox or documentation on how to insert that. Could you enlighten me? Thanks, Jason
I figured out my issue! I had it limited to only one upload. Changing it to "unlimited" solved my problem.
I was watching the podcast and a thought crossed my mind: how do you programmers look like? I mean, the guy presenting in the podcast looks punk'ish and if I saw him on the street I wouldn't believe he's into Drupal and other similar things.
can you please post some code here? I am a css noob thanks
have the upload field showing up next to the WYSIWYG editor instead of below it.
it's still in development, but works and i think it is a good initiative. however, fielfield_insert itself is still dev. ;)
I agree with the previous comments. This podcast is particularly well made and very informative. However, I still have one problem. In my own installation, I can't get the HTML insert link to show up during config of the page content type. I have searched up and down but can't find anybody describing a similar problem. Any idea what I could try next?
I too agree with the comments: a very interesting and well made podcast. Thanks! My question is very simple but I can't find where I can define this setting: I would like the inserted image in the WYSIWYG editor to be absolute (containing the domain name) and not relative as they are today. This is because of RSS feeds which may not display the images in such cases. Do you have any idea of where I should look for such an option ? Thanks a lot.
How do you get ImageCache to show up under the Insert HTML Area tag?
Hey Bob I tried to configure the fckeditor with the wysiwyg module, as you've showed in the video. Everything works fine (the image put to text area is really nice), however I have a problem: all my breaks are gone, it outputs my text as one big paragraph, while in the edit screen it shows up right (in fckeditor it shows the breaks normally), now I've read that it is due to a setting for fckeditor, but I can't find it in the wysiwyg module (there is one setting called 'remove linebreaks' but disabling that does not solve my problem), as yours outputs perfectly fine, I was wondering if you could direct me to the right solution :) thx in advance!
seems I had to change the settings for my input format, filtered html didn't allow the fckeditor tags :)
Hi Bob, Thanks for taking the time to create this detailed and very helpful video, really appreciate it. This looks like the perfect solution I was searching for. I have a question though, I currently run a forum on 1 of my sites. Its using SMF Forum software which allows users to attach images to a forum post. Drupal however has a primary node (the original post) followed by comments (which form the thread). Is there anyway you can allow users to attach images to a forum thread (comments in drupal) using this combination of modules? I know of a comment upload module, but not an imagecache module for comments. Cheers Gavin
Thank you for going through the trouble of sharing your knowledge with inquisitive minds. :) I have been searching forever for a convenient way for non-programmers to post images inline with their content without having to send the images to me for sizing, formatting, and uploading... Unfortunately, though, there is one obstacle I have with most of the inline image solutions: the ability to input and display captions relative to each image. I work on a scientific site where image captions are imperative to the understanding of a diagram, graph or image. Perhaps you or Mr. Haug or Sabourin knows how captions can be incorporated with images in this much anticipated module. Thanks to all of you!
Since development of the fileField module was stopped and moved over to Insert where they recommend your tutorial, SWEET. Maybe you should update your tutorial. I'm not sure if I now need the wysiwyg api module. And although I see the image upload and can download an image and insert alternative text. Clicking the Insert button doesn't seem to transfer the image to the body. I'm not sure what I'm doing wrong.
Thanks bob, very useful
This was a terrific video, helped me a great deal. Your tutorials and podcasts have been instrumental in my quest to quickly gain knowledge in Drupal development. Thanks.
Thanks man, your videos helped me a lot with starting drupal and its modules. i like how you do it. thank you very much.