1

I am using the module Simple Background Image Formatter to convert an image into a div background image. It has two options - one to put as an inline style of a div or to choose a CSS selector which it styles with a background image in the DOM. I cannot use the inline style method in views so that is ruled out. Now as per the CSS selector method, it adds a style directly on the page with the 'selectedclass_id'. I can choose the selectedclass but not the id (appears to be randomly added).

However, since my requirement is through views, it somehow (although with wierd settings) automatically prints the class and adds the id, however, the image for other nodes is not loaded in this node as its html style in not loaded in the current page. That is, the image of every page is converted into a selectedclass_id (background-image:...) and placed in the html of that page but the selectedclass_id of the other nodes which are part of the view in this page are not loaded here with their respective values. Therefore, these images are not being displayed in the view.

Is there a solution here? I want the page to load the css selectors for the nodes which are shown in the view (of the same content type) so that the code for each of the view fields is where the id will be different for each of the nodes. The current page should have the values of all such nodes in the view as it does with regard the value of the current page. Presently, only the selectedclass_id of the current page is being loaded in the head html style.

An alternative for the module is Background Images Formatter but this is dependent on bg_image which does not have a Drupal 8 version and doesn't work without it.

  • Can you reword Paragraph #2, it has me confused. however, the image for other nodes is not loaded in this node "not loaded in this node" I thought you were using views? – No Sssweat Mar 6 '16 at 0:54
  • Also, what exactly are you trying to accomplish here? You want to style the image with css based on their content type? – No Sssweat Mar 6 '16 at 1:00
  • I have a related content section on my page through views in which i want one field to be a div with a background-image. – adhavanjo Mar 6 '16 at 1:11
0

I have a related content section on my page through views in which i want one field to be a div with a background-image.

Ok, then you can use Image URL Formatter. Which will output your image as a url instead of the actual image.

Then add the image field, which contains the image you want to use as background

  • Hide it from display.
  • Select image url as your formatter

Add a custom field OR Rewrite the result of an existing field and use the image replacement pattern.

ex <img class="[YOUR CLASS]" src="{{ field_image }}">

OR if you create a .html.twig template file for your view, then you can use

<div class="[YOUR CLASS]" style="background-image: url('{{ field_image }}')"></div>


Another option

In Style settings you can add a class to your fields.

[enter image description here

Then with css give it a z-index: 0; and give everything else z-index: 1; and move img around by giving it position: absolute; top: -100px; etc..

  • <div class="[YOUR CLASS]" style="background-image: url('{{ field_image }}')"></div> doesn't work because Views strips the style tag because of security concerns and there is no easy way to turn that off. I guess I'll just have to use an image and position it although that makes my whole design a lot more difficult. Thanks for your reply anyways. Much Appreciated. – adhavanjo Mar 6 '16 at 8:25
  • @adhavanjo Views strips the style tag because of security concerns and there is no easy way to turn that off Thanks for pointing that out (forgot about that). If you create a .html.twig template file for your view, it should let you use style. – No Sssweat Mar 6 '16 at 8:35
  • Did it like that using templates. Thanks for your help. – adhavanjo Mar 8 '16 at 1:12
  • @adhavanjo You're welcome, if you feel my answer solves your problem, you can mark it as accepted by clicking on the check mark ✓ – No Sssweat Mar 8 '16 at 1:31

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.