How to use rendered file entity in view header as background image for view

Question

I would like to set a background image on a div in my views-view.tpl.php using the image from a rendered entity field in the View Header.

Something like:

   <div class="group-header" style="background-image:;">
    <div class="group-heading container">
      <?php print render($title_prefix); ?>
      <?php if ($title): ?>
        <div class="page-title">
          <h1 class="l-view-title"><?php print t($title)?></h1>
        </div>
      <?php endif; ?>
      <?php print render($title_suffix); ?>  

      <?php if ($header): ?>
        <?php print $header; ?>
      <?php endif; ?>
    </div>        
  </div>

How do I print just the url of the entity from the header? It would be great if I could pull the image URL and add an inline style on the group-header div. Any ideas on how to accomplish this?

Similar to this question: Use image from view as background image of div in page.tpl.php

Answer 1

Is there something the Background Images Formatter module can do for you?

The module allows you to set a background to any CSS selector(s) you can think of. Combine it with a selector built with NID-token (NID field in Views, excluded from display, and its token used in the selector you assign the background-image to), and it will probably save you some templating headaches.

Answer 2

The simplehtmldom parser will be helpful to render this for you.

https://www.drupal.org/project/simplehtmldom

we can supply the html to this parser and capture the output by the APIs provided. http://simplehtmldom.sourceforge.net/manual.htm

http://simplehtmldom.sourceforge.net/manual_api.htm

      $html_obj = new simple_html_dom();

      $wrapped_header = "<div class='header_url'>{$header}</header>";
      $html_obj->load( $wrapped_header );
     $url_forimage="";
      // use the wrapped class
      foreach ($html_obj->find('header_url') as $plain_text_obj ) {
//get class of the rendered element and use that to capture the src tag.
//check API for more info. you should list them in the DOM hierarchy.
//I have used this DOM hiearchy "div.views-field-field-banner-image > div > a > img" for the below code.

           $url_forimage= $plain_text_obj->find('div[class=views-field-field-banner-image] div a img',0)->src;
          }




      <div class="group-header" style="background-image:<?php print $url_forimage;?>">
        <div class="group-heading container">
          <?php print render($title_prefix); ?>
          <?php if ($title): ?>
            <div class="page-title">
              <h1 class="l-view-title"><?php print t($title)?></h1>
            </div>
          <?php endif; ?>
          <?php print render($title_suffix); ?>  

          <?php if ($header): ?>
            <?php print $header; ?>
          <?php endif; ?>
        </div>        
      </div>

You will need work on this to get it work.