By Anand Parmar on

Hi

I am new to drupal (using drupal 7) and PHP. I am developing a site for vintage bikes company. I have a block on right of home page called 'Featured Bike'. This block displays: one featured bike image and its model name as title at a time, from nodequeue and views.

I am struggling to get this featured bike image (which is image field) as backdround-image of the div which holds it.

I was able to add theme_image() as preprocess function in template.php.

function theme_image($variables) {
  $attributes = $variables['attributes'];
  $attributes['src'] = file_create_url($variables['path']);

  foreach (array('width', 'height', 'alt', 'title') as $key) {

    if (isset($variables[$key])) {
      $attributes[$key] = $variables[$key];
    }
  }

  return '<img' . drupal_attributes($attributes) . ' />';
}

This function is returning the 'img' tag along with 'src, title, alt, height and width' info.
In my views-views-nodequeue-1-fields.tpl.php file, one of the allowed variables is $fields.
When i do something like this:
<div style="background-image: url(<?php print $fields['entity_id']->content; ?>)>
The value of $fields['entity_id']->content prints img src="..." alt="..." and so on..

Whereas I only want to extract the path of the $fields['entity_id']->content and print it in the url of BG image.
I am new tp PHP so kindly help.

⋅ Categories: Drupal 7.x

Comments

john_j’s picture

john_j commented

Things you can try:

a). do a print $fields['entity_id']->content; and see if it is showing a path

b). Is the path displayed correct? If the path is not correct then the image will never show up

c). On the page, if you don't find the background image, do a view source of the page and check if the image is getting picked up from the right place

Anand Parmar’s picture

Anand Parmar commented

Hi John

Thanks for the reply.

when i print $fields['entity_id']->content; it prints the correct image in the block. This is not the issue.

The issue is i want the path of this image without <img src=".." alt=".." title=".."> .

My requirement is to get the value of src=".." so that I can place it in background-image: url('path-of-image').

How to extract this path from the output of $fields['entity_id']->content;

john_j’s picture

john_j commented

$fields is an array. Do a print_r($fields) and print_r($fields['entity-id'] to see that in addition to content there is also the path to the image.

snte’s picture

snte commented

Hi Anand,

i faced a similar problem. I tried to get the path of an imagefield in my page.tpl.php (background css property).

Here is a function i use in template.php to get this path, from first image of the field (THEMENAME -> replace with your themes name):

function THEMENAME_field_imgsrc($field_ar) {
	if (is_array($field_ar)) {
		reset($field_ar);
		$first_key = key($field_ar);
		$uri = $field_ar[$first_key][0]["uri"];
		if ($uri != '') {			
			return render(file_create_url($uri));
		}
		else { return ''; }		
	}
	else { return ''; }
}

This returns the path to the original image uploaded to the field.

In page.tpl.php i call the function (field_headerimage is the machine-name of your imagefield):

$field_headerimage = THEMENAME_field_imgsrc($node->field_headerimage);

Maybe there's a better way to do this, but this works so far...

siilak’s picture

siilak commented

$field_headerimage = THEMENAME_field_imgsrc($node->field_headerimage);

its plays original image, but I liked to use some preset like "large" or "thumb" etc.
How would I change the code?

kytom’s picture

kytom commented

Haven't actually tried this, but wouldn't it be able to configure the view so that it rewrites the output, wrapping the field in a div, something like:

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

where %1 is the original value (model name in your case perhaps), and [entity_id] is a token for the image?
(you'd also have to set the actual image field as hidden, so that it doesn't show up twice.)

Just throwing some ideas.

alltooeasy’s picture

alltooeasy commented

So am trying to get a BG image to attatch to essentially a list of content. So e.g. fields might be image and text.

I want to attach the image field to the be the background image of the text.

Am totally baffled as how to do this. The issue I am having essentially is that the images change size as does the text. So having it attach at the view and take up that amount of space would be great as there are other elements around it.

arthuroliveira’s picture

arthuroliveira commented

Were you able to find a solution? I am having the same issue. Token doesn't work when placing in style="".

knalstaaf’s picture

knalstaaf commented

This module now allows you to add a background-image to any chosen selector, as specified in your view (using an image field): Background Images Formatter