6

In Drupal 7, I want to turn my image field in Views to looks something like

<div style="background-image:url([field_someimgefield_image]);"></div>

so I can apply the JQuery Parallax scrolling effect. However, I'm not able to get the full "absolute path" of my image, even I use the "absolute path" on "output this field as a link" and "strip HTML tags" features. All I got is the file name, not the full absolute path.

Another issue I have is the "Global: Custom text" in fields, it does not has the text filter option, so I would not be able to write the above code.

So far, I only found the "BackgroundField" module for the replacement. Anyone know a better solution for div background image?

PS: the CSS trick only make it looks similar, they are totally differnt.

------ update info on Feb. 2 2015 : 12:58pm ---

The Views that I have is a list of node that contain Title and other fields. Therefore, each node should has their own background from image field.

------ update info on Feb. 2 2015 : 02:46pm ---

Looks like the "BackgroundField" module I mentioned above is similar to Background Images, which does not work too.

4

There is also the Background Images module suite:

Background images is a collection of modules that allows users to add background images to html elements on pages of the site.

There is also a Field Group sub-module for background image support called Field Group Background Image:

This module creates a field group display formatter that consists in a wrapper with a background.

The background can be set from:

  • An image field of the entity being displayed
  • A color field (of Color Field or jQuery Colorpicker modules)

This module can be used alongside Display Suite, and is particularly useful for creating custom Fieldable Panels Panes bundles.

You mention parallax scrolling ... I know what that is, I've never had to implement it -- you may want to try to use Parallex Background:

This a simple module that allows to set a vertical Parallax effect on the background of any element on the DOM.

I kindly suggest you work more on your Google-fu skills.

  • ty for your response. I tried the Background Images module, but it does not work well on my situation. The views that I have is a list of nodes with title and other fields. I want each node has their own background from the image field.(maybe i should provide more info, sorry) – CocoSkin Feb 2 '15 at 17:46
  • what you describe is what Field Group background image is for, an image per piece of "grouped" content (even if the group only has 1 thing). – tenken Feb 2 '15 at 18:27
  • Maybe I'm wrong, but I dont see that in Views. I only see the "Field Group Background Image" feature on Content Type Manage Display. – CocoSkin Feb 2 '15 at 19:04
  • Not wrong. Field group background image is typically used with display suite module, and using display suite in your views. – tenken Feb 2 '15 at 19:46
  • 1
    I found it does not really need the Field Group Background Image at all. It actually can be done by Display Suite, with View Mode and Code Field setting. – CocoSkin Feb 6 '15 at 21:55
4

Instead of using one of those modules, you could override the field output through a theme function like this:

    function MYTHEME_field__field_someimgefield_image($variables) {
        $output = '';

        // Render the label, if it's not hidden.
        if (!$variables['label_hidden']) {
            $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
        }

        // Render the items.
        $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
        foreach ($variables['items'] as $delta => $item) {
            // Generate styled background image.
            $img_uri = $item['#item']['uri'];
            $img_style = $item['#image_style'];
            $bg_img = image_style_url($img_style, $img_uri);
            $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
            // Write image url to inline css and drop the rendered item.
            $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . ' style="background-image:url(' . $bg_img . ')"></div>';
        }
        $output .= '</div>';

        // Render the top-level DIV.
        $output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '>' . $output . '</div>';

        return $output;
    }

In your view, enable "Use field template" in the field's style settings. Thus Views will render your field via the theme function above. Of course, you will have to give the field some width and height to make the background image visible.

2

You need Image URL Formatter module perhaps.

This module add[s] a url formatter for image field. Then you can output image url directly.

Works with Views. It will give you an additional "Formatter" choice, which should say something like "Path to the image" or "URL to the image".

Also regarding "Global: Custom text", I think this is meant to be FULL HTML, but it is run through filter_xss and other various sanitizers. So you can put the HTML directly in the field, you don't need a Text input filter.

  • "The Global: Custom text" field does print class, but not "style="background-image:url()" in div, it gave me the <div> without background style. – CocoSkin Feb 2 '15 at 17:53
  • Ah right, it is in fact run through filter_xss_admin which strips out style attribute, because it's insecure. This has been a long standing issue: drupal.org/node/853880 You might find some workaround here, or see this question: stackoverflow.com/a/3538841/1255004 – Beebee Feb 2 '15 at 18:07
0

Maybe the Dynamic Background module is what you need as it allows you to target a div? It also has a handy Context Background for setting up backgrounds based on context for things like dates, paths, etc. https://www.drupal.org/project/dynamic_background

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.