0

I am trying to add a cover image to user profiles in a block view, the image comes from a user profile field.

The problem is that I need the path to that image because my neede code is like this:

<div class="profile-background"  style="background-image: url('/sites/all/themes/pingu/img/Circles.jpg');">

  • Edit: Nevermind. I didn't realize this was Drupal 7. – mradcliffe Oct 10 '18 at 12:54
  • 1
    @mradcliffe that is for Drupal 8 – staion16 Oct 10 '18 at 12:55
  • drupal.org/docs/7/theming – mradcliffe Oct 10 '18 at 12:56
  • @mradcliffe already checked that – staion16 Oct 10 '18 at 12:56
  • What's the matter with the documentation? You need to provide more information in your question as it's unclear what you're asking or it's too broad to actually answer the question. At the moment your question is "How do I use the Drupal API?" which isn't something we can answer here. There are probably several ways to accomplish this depending on how your site is configured, built, themed, etc... – mradcliffe Oct 10 '18 at 13:01
1

You need to install the Image URL Formatter module

Then in your view, click on your image field and select url as the formatter, so it prints the url rather than the image.

enter image description here

Views doesn't allow to use the style attribute in re-write results.

Therefore, you will need to use a template file. views-view-fields--[view-name]--[machine-name].tpl.php). This file needs to be in /sites/all/themes/THEMENAME/templates folder.

put this inside it:

<div class="profile-background"  style="background-image: url('<?php print $fields["field_image"]->content; ?>');">

<div><?php print $fields["field_other"]->content; ?></div>

...

Clear/Flush all caches to see changes.

  • Thank you for your useful response, but for some reason, when I visit my website the style="background-image: url('[field_image]');" does not show in code... – staion16 Oct 10 '18 at 16:10
  • @staion16 updated answer. Now that I remember views blocks the style attribute for security reason Views removes style attribute in “Rewrite Results”. So you will have to do this via template file. – No Sssweat Oct 11 '18 at 0:57
  • Another option would be to print the image and then with CSS make the row relative and image absolute and then move the contents on top of the image with z-index. – No Sssweat Oct 11 '18 at 0:59
  • Thank you very much, the thing with the template worked, but now I face another problem, the cover prints only if the user has any, otherwise it looks awful. Seems like the default cover which I set on the image field does not print if the user has not set their own cover... – staion16 Oct 11 '18 at 14:59
  • @staion16 copy the default cover url and it to the "No results behaviour" section of the image field settings. If that doesn't work, then you will need to add a conditional to your template if (empty($fields["field_image"]->content)) { ... } – No Sssweat Oct 12 '18 at 12:02

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