drupal - 具有创建自己的 CSS 的字段的自定义内容类型？

Question

我正在寻找一个包含图像文件字段的内容类型 - 很简单。但是，我希望这个图像文件显示为背景图像。我是否必须创建自定义 node.tpl 并将图像源包含在 inlinestyle="background: url(sites/all/themes/theme/images/image.png);"中，还是有更优雅的方法来执行此操作，可能包括使用 JavaScript 从字段写入样式表？

Answer 1

您可以在 hook_node_view 函数、节点预处理脚本或节点模板中使用 drupal_add_css 直接添加样式：

$css = "#bg-img { 
  background: url(/sites/all/themes/theme/images/image.png) left top no-repeat; 
};"
drupal_add_css($css, 'inline');

或者，您可以使用drupal 设置，然后在jquery 脚本中引用它；使用“设置”选项查找drupal_add_js用法和示例：

drupal_add_js(array("moduleName" => array('bgImg' => $absolute_url)), 'setting');

使用 Drupal.settings.moduleName['bgImg'] 在 jQuery 中引用

IMO 按照您的描述调整 node.tpl.php 是非常明智的。使用 drupal_add_css 可以让您在节点外的元素（例如整个页面）上设置背景图像。当我需要更高级的定位/调整大小选项时，我使用了 jquery。

Answer 2

无需阅读文档和深入研究代码，只需使用 Field Formatter CSS 模块 ( https://drupal.org/project/field_formatter_class ) 并在几分钟内完成。这是一颗宝石，您会发现自己一遍又一遍地使用它。它允许您向自定义内容类型的“管理显示”中的每个字段添加 css 类和其他选项。至于这种将用户上传的图像作为背景的特殊情况，这里是一个屏幕截图。在 Field Formatter Class 字段中添加一个类，然后您应该能够使用 css 和 jquery 进一步重新定位和调整大小。