将图像添加到块html [英] Adding images into blocks html

问题描述

我在块内容中添加了一些html代码，并启用了完全HTML过滤器。

我为图片使用了相对路径，例如站点/ all / themes / zen / zen / image.png

我想这是不正确的，因为我需要根据自己在首页中的位置更改路径，或者节点/ ID页面。

我想我不能在块内使用PHP，因此不能使用$ base_url ...如何仅使用html添加图像路径？ / p>

谢谢

解决方案

前面的答案提供了解决方案的一部分，但这是一个更全面的消息：

手写HTML

如果您的网站位于example.com（即这是根网站），然后在相对路径中添加一个斜杠即可解决该问题，就像其他人建议的那样：

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

但是，如果您的网站位于 example.com/my-drupal-网站，则需要这样写：

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

如果可以使用PHP确定合适的路径，那就更好了。如果从主题调用图像，则可以使用Drupal函数 drupal_get_path 来获取如下路径：

  $ img_path = drupal_get_path（'theme'，'zen'）。 ‘/zen/image.png’； 
  

然后您可能真的很喜欢Drupaly并使用 theme_image 函数生成图像的HTML：

  $ img = theme（'image'，$ img_path， 我的图片-替代文字，我的图片-标题文字）； 
  

其中 $ img 现在保存HTML < img> 标记及其 src ， alt ，以及 title 属性。有关 drupal_get_path 和主题图像以获取更多信息。

点击解决方案

正如jeffreymb所指出的那样，最简单的选择就是结合使用WYSIWYG编辑器和内置的文件处理模块IMCE为您覆盖所有这些细节。 如果您无法访问 PHP代码输入格式，这是最好的解决方案。

因此，执行以下步骤：

1. 安装WYSIWYG模块以及WYSIWYG编辑器（建议使用CKEditor）。


2. 安装IMCE模块和IMCE WYSIWYG Bridge模块，并在其可用按钮的配置设置中为所见即所得编辑器启用IMCE按钮。

请参阅此帖子以获取有关该设置过程的更多详细信息，并确保请阅读所见即所得模块在其配置页面上显示的文档。

一旦安装了IMCE并与所见即所得集成，则单击所见即所得中的图像按钮工具栏上，应该会出现普通对话框，但带有一个新的小图标，以打开IMCE文件浏览器。使用此文件浏览器，您可以浏览文件文件夹中的图像或上载新文件。它还支持少量的图像处理，并且一旦选择了图像，就会自动生成必要的HTML。

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

解决方案

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.

这篇关于将图像添加到块html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！