So you want images and thumbnails for your blog/magazine
Hello all. :) After wrestling with this and reading many posts, I thought I'd ask the Drupal community for an update on this seemingly classic problem.
I decided to build my new blog on Drupal 6, and I want to add "Stories" to it. Not only that, though, I wanted to be able to add images to the content of my "Stories." Graphically, if possible, and with the ability to float them left or right to make it look like I know what I'm doing.
Ok, doing good so far, lots of options here. Ended up using Image, FCKEditor and a module called Image Browser because, well, the UI was just darn handy. Lets me easily upload, browser, scale/crop, insert, and move images around to get my "Story" just the way I want it. I thought I was home free!
BUT... I also wanted thumbnails on the front-page teasers.
...and that's when the nightmare began.
This is where the question begins, if you wanna skip the backstory:
1. My current solution is to use the setup above, and then use Image Attach to add a separate image that I can dedicate as a thumbnail to my "Story" and modify through Views to appear in a field-based Teaser. I've already got it sort of set up, but the fact that Image Attach makes me pick my existing image from a drop-down menu drives me nuts. Is there any way I can modify the Image Attach "widget" from drop-down to something else? Like entering the path instead?
2. And second, a more general question. If you're reading this and have figured it out in a better way, please share. The only unfortunate requirement I have is that I'd prefer to select/insert my images from thumbnail-galleries as often in the process as possible.
If you've got a blog/magazine like this, let me know how you solved this problem. :)
Checkout the
Checkout the http://drupal.org/project/imagebrowser module.
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
Already using that one for
Already using that one for inserting into content, but I don't see a way for doing thumbnails via Image Browser.
I've not tried it, but the
I've not tried it, but the project page says it supports imagecache and the demo allows you to select which size image is inserted so it appears to work.
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
The imagecache support is
The imagecache support is good, but it still only appears to do inline images.
My problem is, all the images disappear into the content. I need one in a separate field somehow so I can single it out in Views and use it as a front-page teaser-image.
Sorry... i missed that you
Sorry... i missed that you were already using image browser. I don't use image so i'm not familiar with all the intregrations it provides. The only other thing i can think of is to use the imagefield module to add a field for the thumbnail image.
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
Unfortunately, ImageField
Unfortunately, ImageField doesn't let me select an existing image from the server. ;) It only lets me upload a new copy.
Looks like this one's still
Looks like this one's still kind of a pain. :)
Currently looking into Computed Field to see if it can extract an image-url from the body, and maybe get treated as an image-field in Views 2. But it's a long shot.
The only other thing I can
The only other thing I can think of, is to use a nodereference field to a view of the images you want users to select from. Then you'd have to theme the teaser to display that nodeference as the image instead of the nid.
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
Good call. :) I already
Good call. :) I already tried that though, and it was only because of a specific requirement I had that it didn't work for me. But definately an option to be considered.
If I were you I would
If I were you I would consider doing it with Jquery. Only thing you need a function triggered when page loaded which search for "#teaser img" take width of each image and scale it to desired width. If you don't want such a hacky way try using CCK, imagefield, imagecache and a filter doing samething with "{mosimage}" in joomla. Maybe there is already a module doing that but writing a new one wouldn't be that hard.
Something that works ok
Alright, closing my thread since I've found a workaround that works okay. If anyone's reading this later looking for the same thing, here're basics.
1. Download and install the Computed Field module.
2. Edit the content type of your article, and add a new field of the Type "Computed." I labeled it "Thumb" and named it "field_thumb".
3. Configure the field. Under "Global settings" -> "Computed Code" add this code:
$pattern = "/src=\"(.+?)\"/s";preg_match($pattern,$node->body,$match);
$node_field[0]['value'] = $match[1];
Under "Global settings" -> "Display Format" add this code:
global $base_url;$display = $base_url . $node_field_item['value'];
Set data type to "varchar" and data length to "255" and save.
6. Go to "Display fields" and alter the values as desired.
5. Put some images in the body of your story-node, either by hand or using your favorite WYSIWYG editor. Any valid IMG-tag will do.
---
You now have a field that automatically grabs the FIRST (aka topmost) image in your story, and spits out the image URL in raw text format. Not very useful on its own, but you can combine this with Views and theming to render the image along with i.e. a teaser.
Benefits: Flexibility. You can combine this with imagecache, views, themes, whatever. You have absolute control over how your thumbnail ends up looking.
Drawbacks: Only the first image in the story gets selected as a "thumbnail-candidate". And all you're getting is a URL; you still have a lot of coding to do. For instance, you may end up wanting to strip the IMG-tags out of your node-teaser so an image doesn't turn up twice.
Also, the code will break if the first HTML tag in your story has a "src=" value but is not actually an image. It's an easy fix, but I can't read PHP regular expression syntax to save my life. If you're a PHP ninja, pass me the code.