Posted by bob_irving on May 19, 2008 at 3:49pm
I'm looking for an "easy-peasy" way to put photos into posts. Since I work mostly with middle school students, it's got to be pretty simple. They're all used to finding a browse button, and hitting upload or something similar.
I have tried the image_assist module, the image module, and the IMCE module. All with TinyMCE editor. The closest one is the ICME, but that still takes about 3 more steps than I'd like.
I'm posting here because I figured some here would understand the middle school mind!
I'm using Drupal 5.7.
Thanks!
Comments
CCK and
CCK and imagefield.
Easy-Peasy!
If you want to get automatic scaling of images, use imagecache in conjunction with imagefield -- more complexity for the site admin, but this complexity is invisible to the end user, and makes it impossible to break a layout with an oversized image.
Cheers,
Bill
FunnyMonkey
Tools for Teachers
FunnyMonkey
how much processing overhead?
I'm curious how much processing overhead goes into imagecache. Currently we're using pre-sized images, the down side being many images, but no extra work done by processor. Is imagecache robust enough to handle sites with large traffic? (assuming that decent server is in place, good bandwidth, etc).
We have used imagecache on a few reasonably busy sites with
We have used imagecache on a few reasonably busy sites with no issues -- we have never seen any performance hits with it, and consequently have never needed to benchmark it in an effort to reduce bottlenecks.
This probably gets at the quality of your server, etc -- I also did a quick google on imagecache and scalability issues, and nothing came up.
I'd say tentatively, yes, it is.
Cheers,
Bill
FunnyMonkey
Tools for Teachers
FunnyMonkey
Yeah I'm interested to see
Yeah I'm interested to see an ImageCache benchmark as well. Long term I want ot know if it will give me scalability issues.
Imagefield
Get CCK, get imagefield and maybe some related projects to it if you want. This will allow you to add an imagefield to whatever posting it is. You can restrict the file size or dimensions. You can also allow multiple or only one. It's also ajax'ed so it's purrdy. If you get some accompanying modules
like imagecache. It'll automatically resize files and some other fun stuff. We're using these in some new sites and have in some past ones, perfect solution :P.
This is for 5.x branch of drupal.
"Moodle? What's moodle?"
http://elearning.psu.edu/
http://elearning.psu.edu/projects
http://drupal.org/project/outline_designer
http://drupal.org/project/html_export
Ex Uno Plures
http://elmsln.org/
http://btopro.com/
http://drupal.psu.edu/
Inserting into text
Does this option allow to insert images inline with text? Or do they just show up below the actual content?
This would display them
This would display them below by default but paired with something like Content Template (Contemplate) you can control where they show up a bit more. If you need them to be truely inserted into the content I'd get FCKEditor (what we DID use) or TinyMCE (what we're moving towards) with the Filemanager plugin (costs some money but is killer and easy to use / integrate with drupal). I've also been told Asset can do something like this too but I've never played around with it...and I don't entirely believe the person who told me that ;)
"Plaguing the world with Drupal; One Plone, Moodle, Wordpress, Joomla user at a time since 2005." ~ btopro
http://elearning.psu.edu/
http://elearning.psu.edu/projects/
http://elearning.psu.edu/drupalineducation/
Ex Uno Plures
http://elmsln.org/
http://btopro.com/
http://drupal.psu.edu/
Why TinyMCE?
I'm interested to hear why you have chosen to change from FCKeditor to TinyMCE? I've tried them both, and I have to say I like FCKeditor more. I've seen some discussion on this matter, and it seems that quite many prefer FCKeditor over TinyMCE.
BTW, does Filemanager help you to create thumbnails of uploaded images and maybe even link them to the original? This seems to be really difficult to achieve in Drupal (cannot find a solution/module). Then if a rel="lightbox" attribute could be automatically embedded to links, that would be just mind-blowing :)
I'll try out Asset soon.
ImacheCache :P
In terms of setup and configurability I've found Tiny to be muuuuch more well designed then FCK from a module implementation side of things. It's much easier for us to throw it into our courses / sites and get going then FCK was when we used it. I've also found it's lighter weight so it loads faster and has been better on compatibility then FCK. This could go away as time goes on but...I'm moving everything to Tiny cause we're having much better success with it. It's mostly a usability issue, which do you like more. I have no problem with FCK, I just like Tiny more.
I'm not sure if the drupal filemanager project does anything with auto thumbs. I think maybe something you should look into is Imagefield, Imagecache, and jQuery media plugin. This might be able to help you cause imagecache is amazing (simply put) with this sorta thing. We're using it in a course we're developing and it's making everyone's life easier. jQuery media is interesting too if you're doing media other then images. I believe imagecache also can do the auto lightbox (i'm almost positive it can actually). OR you could do this with a simple line of jQuery and / or contemplate. I've been told Asset can fit into this w/ the images but...again I haven't played with it yet.
"Plaguing the world with Drupal; One Plone, Moodle, Wordpress, Joomla user at a time since 2005." ~ btopro
http://elearning.psu.edu/
http://elearning.psu.edu/projects/
http://elearning.psu.edu/drupalineducation/
Ex Uno Plures
http://elmsln.org/
http://btopro.com/
http://drupal.psu.edu/
I have on my todo list to
I have on my todo list to customize FCKEditor Image upload to do exactly what Bob Irving describes above.
I am basically just going to take the file browser functions out. I am then going to make the "browse server" button into a browse local computer button.
I'll post here when this is done (hopefully within about 2 weeks)
Sam Rose
Social Synergy
Open Source Ecology
P2P Foundation
Sam Rose
Hollymead Capital Partners
P2P Foundation
Social Media Classroom
A WYSIWYG-agnostic solution
Hello, Sam,
Given that text editors are unreliable at best, why not use the imagefield/imagecache combination, and have code in your theme to handle it effectively?
It will probably require less code, and will be reusable with other text editors, or with no text editors.
Given that WYSIWYG editors are generally the weakest link in creating content, standardizing a solution around one seems like a short road to user heartache :)
Cheers,
Bill
FunnyMonkey
Tools for Teachers
FunnyMonkey
Bill, what you say makes
Bill, what you say makes sense.
But, the particular application that I am working requires FCKEditor specifically, which itself already implements image uploading, and needs only mild improvement to have better usability. Plus, there is now way that I can see to easily get imagefield and imagecache to inline images into comments. So, this rules out using imagefield/imagecache as a way to inline images in forum topic replies, for me.
I have not yet experienced the problems you are referring to with FCKeditor in terms of image uploading inline in posts. And, so far I am looking at decreasing the code in FCKeditor, vs. generating lots of new code.
All that being said, if I have sites where wysiwyg is an option vs a requirement I can see that imagecache could work better
Sam Rose
Social Synergy
Open Source Ecology
P2P Foundation
Sam Rose
Hollymead Capital Partners
P2P Foundation
Social Media Classroom
Thanks to all who replied. I
Thanks to all who replied. I have downloaded imagefield, imagecache, imagefieldlightbox, and imagefieldlgallery2_lightbox. Also Jquery__interface and jquery_update.
I think I've go them all. Now I'm a complete newbie with CCK. How do I go about making adding an imagefield to content? I understand that CCK is way powerful, but I've only used it to create organic groups (and I'm still not sure how that worked).
Bob
In the interest of keeping it simple
In the interest of keeping it simple, I'd recommend starting with imagefield. Get that working on a ckk node -- add tags if you want to.
Then, install imagecache -- get the presets sorted, so your images are scaling the way you want them.
The other modules are all related to image display using jquery effects -- there is a lot of repetition/overlap among these modules, and this creates the potential for js conflicts, particularly if you are already using the js tools module.
In particular, lightbox2 has some subtle issues with IE -- they are a nuisance to debug, particularly in conjunction with WYSIWYG editors. Trust me on that one :)
Cheers,
Bill
FunnyMonkey
Tools for Teachers
FunnyMonkey
CCK & View
Bob,
Check out this article from the Imagefield documentation:
http://drupal.org/node/609628
The article describes Imagefield, CCK, and Views.
Brylie Christopher Oxley
A good teaching opportunity
I know your goal is to put pictures into posts with as few steps as possible. That sounds like a reasonable request, but you won't go very far before your realize the process is a little more complicated that it may appear at first. There are a lot of questions to answer that you may not have thought of at first:
1) is the photo used once and never re-used, or does each user have a private pool of photos they may re-use in the future, or are all photos shared by all users who can use them at any time?
2) do you need to tag the photos with titles, keywords or captions?
3) do you want to limit the number of photos per post or allow a person to include as many photos in a post as they want?
4) do you want to place the photo in-line with text? have text to wrap around the photo? place the photo on the page in an area separate from text? present the photo as part of a slideshow? a photo gallery? search for photos? sort photos into categories? Something else? All of the above?
One way to help you define what you want is to think of a website that already does what you are asking for. Do you want to handle photos like Fickr?, like a blog?, like a school newspaper? Looking for a place that already does what you are expecting may help you realize that either A) what you want is impossible and nobody else is doing it or B) you only need a small number photo functions and the example site will help you define what those functions are.
If you really do want to make it as simple as possible, you need to clearly define the things you want to do with the photo and realize the limitations that you are placing on yourself by doing so. Once you get a clear definition of what you want, feel free to share it with us and get more tips on how to implement it with the tools that have already been discussed. But your goal will have to be more clearly defined than "put photos into posts".
Photo handling is much more complicated than it appears on the surface. Rather than trying to dumb it down for the students, this may be a good opportunity to teach the students how photos are handled on the web. Once a student realizes all of the issues involved, they may not mind the three or four steps it takes to put a picture into a post.
At this point, I just want
At this point, I just want to do #4 above, or to be more specific, 4A: photo inline with text.
If I had to define what I want, I would say that I just want people to be able to upload a single photo and be able to resize it within a blog post.
Naturally, that may expand as time goes on. However, I'm taking the approach of "learn what I need when I need it." And truthfully, though I'm all for teachable moments, that isn't the purpose here. There are any number of web apps that allow one-click uploading (well, maybe 2 clicks). Since the students are used to this functionality, it's a step backwards for them to further complicate it, which leads to less participation on their part. I want to make it as easy as possible for them to do this (see my original post).
Thanks for your detailed reply, cwgriesel.
Imagefield
In that case, I agree with Bill that Imagefield and Imagecache would be the simplest way to go. There is a video on how to install and use them at http://blip.tv/file/316842
Thanks for the video. It
Thanks for the video. It certainly helped me get that set up.
My problem (and it's not really a problem) is that I always have to UNDERSTAND what I'm doing. I suppose that's one reason I'm a teacher, because once I get it, I like helping others get it.
I'm trying to wrap my head around the logic of CCK. I understand how an image, or a text field, or a checkbox, is a content type, and I see how those are fields that you can add to another content type, like a story. What I don't get is how a GROUP is a content type.
Am I the only one confused by this?
Thanks again.
I understand what you mean
I understand what you mean. Drupal does have its own terminology, which takes a while to grasp. But once you learn the vocabulary it is actually quite logical and consistent, which is what makes it so powerful.
I first found it easiest to understand Drupal terms by comparing them to database terms, which I was already familiar with.
By doing this, I understood
Drupal content type = a database record definition
Drupal node = an instance of a database record, or one "row" in a database
Drupal content types consist of several fields, just like database records consist of several fields -- the "columns" of a database
Drupal view = a database query or report
CCK is the tool you use to create and modify content types in Drupal. With CCK, you define both the fields that will be in each content type, but you also define the form that the user will use to create or edit a node of that type.
The groups he is using in CCK are not content at all. Groups in this context simply refer to how the fields should be presented, or "grouped" to the user when the user fills out a form. In this example, he created a separate group called "extra" and hid or "collapsed" the group so it would not normally be displayed to the user unless the user clicks on it. Groups are used to simplify the form for the user.
Like many terms in Drupal, "group" has another meaning when used in the context of Organic Groups. You can read up on Organic Groups if you want to, but that is not what he is referring to here. He is simply referring to how to "group" or organize items on a form so the form is easier to use.
Hope that makes sense. I know it may be frustrating to ask for the simplest way to do something, and end up with extensive instructions and a 20 minute video to watch. But you have to understand that Drupal is more of a framework to build things with than it is a final product. The power of Drupal is not that it is a polished, finished product that users can use out of the box. The power of Drupal is that you can use it to build polished, finished products that users can use. And you can build them much quicker and maintain them much easier than you could if you had to build them from scratch.
It won't take too long before you start to sort out Drupal terminology and understand the power and flexibility that Drupal gives you in building web-based applications.
Look at the database
Hello, Bob,
This is actually one of the times where looking at the database can help --
I'm referencing D5 table names here.
If you look at the node_type table, you will see the definitions of all your content types, or node types (and in this context, content type == node type ).
Then, look at your node table. Each row is a node, or a piece of content. The node table stores the node type, and different types of nodes can do different things, as determined by modules.
So, when you install organic groups, you can create nodes that are groups. The group functionality comes from the code within the og module. In most cases, node == content (ie, something you can read, comment on, listen to, watch, etc) but (as with organic groups) nodes can have other uses as well.
With all that said, yes, it's confusing, because "nodes" can do different things in different contexts. Parent/child relations can exist between nodes, you can have one node reference another nodes (which, to an extent, mimics taxonomy), etc. The flexibility of the node system is simultaneously an enormous asset, and an enormous barrier to understanding exactly what it is.
Cheers,
Bill
FunnyMonkey
Tools for Teachers
FunnyMonkey
OK,starting to sink in...
Thanks CW and Bill. The database explanation helps a lot!
Repeated applications to the frontal lobe will help me, I hope.
And yes, I am amazed at the power, flexibility, and potential of drupal. I can see how it can do some truly awesome stuff. I just want to make sure I understand what I'm doing, so that I can make it work!
Thanks again for the newbie help.
CSS to your aid too
Once you have the upload/resize issue clear the easiest way to deal with how the image is placed in the text is to use your style sheet to control the behaviour. That way your students don't have to worry about it: the CSS manages it for them. Float your image to the right or left, set margins, padding, borders and stand back.
how to auto-organize when uploading?
Do you guys know how to auto-organize uploaded pictures by date automatically? just like they do in Wordpress.
Images/Year/Month
I need that because I'm building an online magazine and want to purge the images easily by month
Views
Depending on how you are organizing and storing your images, you can do this using views.
Also, if you are using Filefield/Imagefield with the token module, you can have your directory structure organized by date. Just set the storage path using date tokens.
Cheers,
Bill
FunnyMonkey
the objective is having an
the objective is having an easily managed file structure
So when you upload picture1.jpg it automatically creates the file structure
Images/Story/Year/Month/picture1.jpg
I need that because I'm building an online magazine and want to purge the images easily by month, and having them organized like that is SUPER HANDY
I want my files to be something like
Images/story/2010/01
Images/story/2010/02
Images/story/2010/03
Images/pages/name_of_page
Images/blocks/name_of_block
Is it possible to have several imagefields and have the pictures uploaded-organized-and inserted in the WYSWYG??
I'm kind of new in drupal, so I could use some guidance on the modules I may use
Thanks!
Here are a few modules to
Here are a few modules to look at.
http://drupal.org/project/insert -> Allows you to take an uploaded image and insert it into a text area
http://drupal.org/project/filefield_paths -> Allows you to set the path where the file is stored. It uses tokens to set the path the way you want.
http://drupal.org/project/image_resize_filter -> Allows you to take whatever size image you insert into the wysiwyg and when you resize it in the wysywig it'll use imagecache to permanently resize it so the file size isn't as large.
wrong place
wrong place
great!
Great! thanks!