Adding images into blocks html

Question

I've added some html code in my Blocks content and enabled Full HTML filter.

I've used relative paths for my images, such as "sites/all/themes/zen/zen/image.png"

I guess this is not correct because I need to change my paths depending on I'm in the home page or "node/id" page.

I guess I cannot use PHP inside blocks, thus I cannot use $base_url... how can add images path with only html ?

thanks

Answer 1

The previous answers provide a part of the solution, but here's a fuller scoop:

Hand-written HTML

If your site lives at example.com (i.e. it's the "root" site), then adding a front slash to your relative path will solve the issue, as others have suggested:

<img src="/sites/all/themes/zen/zen/image.png">

However, if your site lives at example.com/my-drupal-site, then you'll need to write it like this:

<img src="/my-drupal-site/sites/all/themes/zen/zen/image.png">

It really is better if you can use PHP to determine the appropriate path. If you're calling an image from a theme, you can use the Drupal function drupal_get_path to get the path like this:

$img_path = drupal_get_path('theme', 'zen') . '/zen/image.png';

And then you could be really Drupaly about it and use the theme_image function to generate the HTML for the image:

$img = theme('image', $img_path, 'My Image - Alt Text', 'My Image - Title Text');

Where $img now holds the HTML for the <img> tag and its src, alt, and title attributes. See the API documentation for drupal_get_path and theme_image for more information.

Point-and-click Solution

As jeffreymb points out, your easiest bet is to use a combination of a WYSIWYG editor and a built-in file handling module called IMCE to gloss over all these details for you. If you don't have access to the "PHP code" input format, this is the best solution.

So, steps:

1. Install the WYSIWYG module, as well as a WYSIWYG editor (I suggest CKEditor).
2. Install the IMCE module and IMCE WYSIWYG Bridge module, and enable the IMCE button for your WYSIWYG editor in its configuration settings for available Buttons.

See this post for a little more detail on that setup process, and make sure to read the documentation that the WYSIWYG module displays on its configuration page.

Once you have IMCE installed and integrated with your WYSIWYG, when you click the "Image" button in your WYSIWYG toolbar, your normal dialog should appear but with a new little icon to open the IMCE file browser. This file browser allows you to browse your files folder for images or to upload new files. It also supports a modicum of image manipulation, and will automatically generate the necessary HTML once you've selected an image.

Answer 2

I would recommend using the Pathologic module for this case. It is a filter that you can add to your input formats to convert relative URLs like that into proper URLs using your site's base URL. Plus it's useful if you have images in your RSS content as sites that re-publish the content (like feed aggregators, etc.) have the link to the full URL.