Welcome to our first post on Drupal Trix. On this topic, we will show you how to get inline CSS in any Views field on Drupal 7.
First of all: why would you use inline CSS in a Views field if you can use external files? Well because in some cases, inline CSS is the only way to achieve something. Let’s say you have a blog running on Drupal and would like to display the image from field_image as a background image on field_nothing. In this situation, it is impossible to define every image in your CSS-files.
You would end up trying to Rewrite Results in field_nothing and make something like this with replacement patterns:
<div class=”article-img” style=”background: url([field_image]);”>Title of your article</div>
The idea is simple and it would have been a nice solution. But Views came to shut down that party. As CSS inline styles are filtered by XSS in Views, they will be erased in your display so you would end up with this:
<div class=”article-img”>Title of your article</div>
Oh darn, how do we solve this?
To make inline CSS working in Views, you have to dig in your files via FTP. We are going to work with views-view-field.tpl.php, and put our html with inline CSS there.
To make it easy, let’s say we want to work with a View named Example and we want to put the image from field_image as a background in field_nothing.
I. Get the right template info (Drupal interface)
- Open the View Example .
- Under ‘Advanced’ (top right) click ‘Template: information’.
- Now you see a list with all kinds of theming information. Search for ‘Field Global: Custom text (ID: nothing)’. You will see a long sum up of PHP-files. Copy the text of the last item, views-view-field — example — page — nothing.tpl.php.
II. Copying & renaming views-view-field.tpl.php (FTP)
- Go to /sites/all/modules/views/theme/ and search for views-view-field.tpl.php.
- Copy views-view-field.tpl.php to your default theme directory (/sites/all/themes/<yourthemename>/). Note: in some cases, your theme has a /templates folder. If so, put the copied file there.
- Rename the file views-view-field.tpl.php you just copied to views-view-field — example — page — nothing.tpl.php (As found in the template information).
Note: If you want to make sure you’re ok up to this part, go back to the ‘Template: information’ section of your view, click on the ‘Rescan template files’ button. If you did everything alright, you will now see views-view-field — example — page — nothing.tpl.php become bold.
III. Editing the file
- Open the views-view-field — example — page — nothing.tpl.php file. You will see this file is almost completely empty. Besides some notes, the only thing there is, is the following code:
<?php print $output; ?>
- Now you can put any HTML or inline CSS in this file. Though, we still need to get our field_image. To do so, we will use the below code:
<?php print $view->field['field_image']->advanced_render($row); ?>
- So eventually, if we put everything together, we end up with this:
<div class="article-img" style="background: url(<?php print $view->field['field_image']->advanced_render($row); ?>);">
<?php print $output; ?>
Remind to clear all caches in Drupal and hit ‘Rescan template files’ button in the View’s ‘Template: information’ section to make the changes appear.
Too bad Views can’t handle inline CSS within its interface, though security has priority. The solution provided here takes a bit more time than it should but it’s the cleanest and most correct way to achieve your goal.
Has this been useful to you? Let us know!