By hayskelly on

I have a multi user blog, what I want to do is make a view that shows the first image from body. The thought process I have so far is, find the first img tag in the body, extract the src, wrap the src in an img tag, show that on the /blog page so when people visit it they see a nice photo from the body.
Is that possible? ok, I know its possible, its Drupal. Does anyone know how to do this, or where I can go to find out some info on this.
Thanks

⋅ Categories: Drupal 6.x

Comments

Anonymous’s picture

Anonymous (not verified) commented

Not to sure how you could do about doing this. I normally create a image field before the body tag and assign that image as the blog image on the list page, but that might not suit your sites needs.

aschiwi’s picture

aschiwi commented

This is not possible. Use a separate image field if you want to use the picture elsewhere.

hayskelly’s picture

hayskelly commented

What do you mean this isn't possible? This is Drupal, everything is possible.
I was looking on a few php sites, and I think all you have to do is search the body array for the first img tag, extract the text inbetween the quotes on the src part of the image tag (src="the url of photo").
From there it is a simple image cache theme to make it the size I am looking for. I just don't know how to do the first part. Any ideas?

aschiwi’s picture

aschiwi commented

That's the right mindset :)
I guess lots of things are possible if you know your way around php (which I don't). Just saying you can't do this with Views out of the box.

Diegen’s picture

Diegen commented

Not sure if this is what you mean but I was sure I had done this in an experiment with the timthumb script and then later as another test using methods wordpress dev's used to find and extract the first Only local images are allowed. from the body. This I did in the node tpl. I'll see if I can get it, I remember searching for this "get first image in node body" and found this http://bit.ly/AIave on which I based it. I think :)

ralt’s picture

ralt commented

Hello,

The link you showed is exactly what's needed, but I don't know how to adapt it to Drupal.

I have exactly the same problem as OP.

Ideally, the PHP code snippet should be in a computed field. The thing is, I don't know either how to call the node's body variable (is it $node->body[0]['value'] ?), or how to use Imagecache to display this image.

Any help would be greatly appreciated.

Regards,
Ralt

ralt’s picture

ralt commented

Here's what I've done up until now.

I've created a computed field.

Computed code :

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $node->body, $matches);
$node_field[0]['value'] = $matches [1] [0];

Display format :

$display = '<img src="' . $node_field_item['value'] . '" alt="' . $node->title . '">';

This works great. It does take the first picture of the node, and prints it.

But I can't get it to work with Imagecache. In my view, I can choose the field, but it's treating the field just as any other text field, and it's not leaving me any option to choose an image format.

ralt’s picture

ralt commented

Ok, found it!

The thing is, Imagecache does not accept external urls.

I had to install Imagecache external (v1, because v2 is still in dev). After configuring this properly, I changed a little bit my computed field according to Imagecache external instructions.

New Display format :

$display = '<img src="/external/mypresetname/' . $node_field_item['value'] . '" alt="' . $node->title . '">';

And it works like a charm!

Anonymous’s picture

Anonymous (not verified) commented

Nice one Ralt! This is going to be very useful.

ralt’s picture

ralt commented

Update. Actually, the not-dev version of ImageCache External is kind of buggy. Returning 404 errors when there is special characters in the URL.

I used Imagecache External 6.x-2.0-beta2, and it works great. Looking at the code, I don't know why it's just in dev version, but anyway this just works.

Though, there is a little change to do in the computed fields.

Computed code :

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $node->body, $matches);
$node_field[0]['value'] = imagecache_external_generate_path($matches[1][0],'preset-name');

Change 'preset-name' to match your own imagecache preset.

Display format :

$display = '<img src="'. $node_field_item['value'] . '" alt="' . $node->title . '" width="" height="" />';

Change the values of width="" and height="" to match the ones of your imagecache preset.

I'm glad it helped you bukem :)

Taesto’s picture

Taesto commented

Hi Ralt,

Is it possible to take the image that you extracted from the body and put it in into an image field?

This would be the most flexible solution I guess.

I insert images in cck text field with wysiwyg editors, but then these images can't be used with imagecache and views, because they are considered text.

With the cck computed field, and your code, I am able to display the extracted image in the computed field, under the text field. What I would like to do is put that image in a cck image field.

ralt’s picture

ralt commented

Hi Taesto,

I guess that to do this, you should do everything in the computed code's part, something like this :

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $node->body, $matches);
$node->your_image_field[0] = imagecache_external_generate_path($matches[1][0],'preset-name');

Change 'your_image_field[0]' with your image's field. I'm not sure about the '[0]' part, though, need testing.

Then, don't put anything in the display format, since your computed field should not display anything.

Tell me if that works!

Taesto’s picture

Taesto commented

The code you wrote in

http://drupal.org/node/1045712#comment-4300894

works well, I see the image displayed in the computed field.

But, what you wrote in

http://drupal.org/node/1045712#comment-4311020

does not work for me. I only see the alt text. Too bad, because after some thought I think this would actually be better than adding an image field. Maybe Imagecache external has a problem because I am in "private download" mode? The problem is that I must have private IMCE folders for each user, and I think for this I must have private download.

I also have filesize() errors when I try to use the solution
https://drupal.org/node/991586

This is really confusing. Maybe I should try version 1 of Imagecache external, to see if it works any better.

I can see the image file is fetched by the computed field, but then I can't do anything with it at the moment...

ralt’s picture

ralt commented

Hi,

Our problems are very different. Indeed, I used Views with Imagecache preset to display the collected images. You can choose to display a computed field as raw text, which I did and works great.

I think your field is well populated, but can not be displayed as full HTML, so only the ALT text appears. You should check out on this side.

With Firebug, can you see what HTML is outputted in your ALT part?

Taesto’s picture

Taesto commented

Following the instructions in http://drupal.org/node/1045712#comment-4311020 , it seems to work. Selecting raw-text option in Views, I can now see the thumbnails displayed in my Views. This is a huge step forward! By the way, I have no idea why it works now and why it didnt work before... Just glad the pics are showing. However, the thumbnails are distorted :S

Do you have the same issue?

I put the preset 'crop' and width = 150 , height = 150. This preset is supposed to do a scale & crop, but it looks like something got lost on the way.

It is usable as is, but if I could get the preset to work like it should, it would be PERFECT.

ralt’s picture

ralt commented

Have you set width and height correctly in the Display format ?

BTW, Crop and Scale&Crop are two different presets in ImageCache.

Taesto’s picture

Taesto commented

Hi Ralt,

Just thought I'd let you know of the solution I finally found.

I was trying to take the inline image and save it in an image field. But I just found out about the Insert module. It seems a much easier and future proof solution than using IMCE to upload the file into the textfield, and then a computed field to put it into the imagefield, to be used with imagecache. Just installed Insert module and it is PERFECT! And works with Views also! And I'm switching back the filesystem to public (had to put it in private because with IMCE, users could see each others' folders by default). So a much leaner website also.

So after spending almost a week trying to make things work with a custom module or a computed field, I stumbled upon mustarseed's podcast on Filefield Insert, totally by chance (I was looking for a way to get the fid of IMCE uploaded images). Whew!

ralt’s picture

ralt commented

Hi,

Glad you found a solution!

You also had me discovering this module, so thank for your feedback!

protools’s picture

protools commented

I look solution for Drupal 7

this code don't work for me in computed fields.

can you help me ?

robin van emden’s picture

robin van emden commented

Thanks, Ralt. Quite useful.

rodmarasi’s picture

rodmarasi commented

i like you comment. "What do you mean this isn't possible? This is Drupal, everything is possible." yes. never tell drupal cannot do this and that. you can say no programmer is thinkin about doing it yet.

belajar drupal, makan drupal, tidur drupal

Anonymous’s picture

Anonymous (not verified) commented

http://drupal.org/project/insert

voughndutch’s picture

voughndutch commented

So glad that I came across this post, I have exactly the same issue and have been looking for a solution. Being new to Drupal and web dev as a whole, I did not know if this was possible, it obviously is. My issue now is how I would go about implementing this. I have a front page view that displays tumblr posts, some images are too big or dont display properly due too image size. Sometimes it comes off as stylish and other times it leaves much to be desired. In newbie terms how would I get this done.

www.hoodhippeez.com

Lythimus’s picture

Lythimus commented

In D7, if you don't need to apply image styles or anything like that you can simply inset the body field and select to only allow Only local images are allowed. tags in the rewrite results section. It's quite simple actually, I'm not sure why everyone is complicated the process.

sonicthoughts’s picture

sonicthoughts commented

Just want image tag!

mani_kandan’s picture

mani_kandan commented

I dont understand what you want exactly.
Which image do you want to display?
If you explain i ll try to find the solution.

Thanks
- - -
Mani

dan.mantyla’s picture

dan.mantyla commented

filtering out all tags except img tags would be a nice elagant solution... if it worked. But for me, there's multiple images and theres text outside of p tags that gets mixed in with the images. Just need one image! 

tludemann’s picture

tludemann commented

Hi All,

I am working on making a website ADA Compliant and through doing that we are creating views in the dashboard to pull all images to easily update alt and title tags.

My issue is the body content, Is there an easy way, using views, to pull <img/> tags into a view and see if they have alt tags?

Any help would be appreciated!

Thanks!