0

How do print term image field as background style attribute in views-view.tpl.php or in views-view-unformatted.tpl.php file? I have view which lists terms of taxonomy vocabulary. All terms have title and image fields. I need to lists terms like:

<div style="background-image:url(http://example.com/term1_field_image.jpg);">
<h2>Title</h2>
<div>
<div style="background-image:url(http://example.com/term2_field_image.jpg);">
<h2>Title</h2>
<div>
1

You can achieve this with row style instead. Go to your views advance settings then click on theming information and look for appropriate name for row styling and write something like this.

$uriImagefromView = $row->field_field_image[0]['rendered']['#item']['uri'];
$urlImagefromView = file_create_url($uriImagefromView);

This will give you the url to the path of that image. Now you can easily render it as background.

If you want to render your background image in particular size you created in image style you can do like this

$resized_url = image_style_url('<style_name>', $uriImagefromView);
  • Thanks! It works. But I get new issue. If I print image as style="background image" path to file looks like <div style="background-image: url(" http:="" hosting-test.net="" sites="" default="" files="" styles="" max="" public="" collections="" 12140823_909452152472075_7251903571632437699_n_0.jpg?itok="pten85kT);&quot;"></div> what I missed? – Dr.Osd Dec 14 '15 at 12:04
  • I am not sure I understand. What is your url looks like? – Shabir A. Dec 14 '15 at 16:15
  • <div style="background-image: url(" http:="" hosting-test.net="" sites="" default="" files="" styles="" max="" public="" collections="" picture.jpg?itok="pten85kT);&quot;"></d‌​iv> instead of <div style="background-image: url(" hosting-test.net/sites/default/files/styles/max/public/…‌​iv> In url no any slashes.. – Dr.Osd Dec 15 '15 at 18:08
  • does the function return correct url? – Shabir A. Dec 15 '15 at 18:10
  • Yes. If I render url outside style="" all is ok. If I render url in as style - have no slashes. <?php print '<div class="slide-bg" style="background-image: url("'.$resized_url.');"></div>'; ?> – Dr.Osd Dec 15 '15 at 18:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.