For a better user Experience in our backend, I want to enable content managers to select the picture, that will be set as background-image for a specified content-type.

Background-story: To add picture as background-image for our content, we use a file-upload image provided by the 'fieldfield_sources' module. Sometimes this process is very annoying. In order to improve the process of 'content creation/edition/' instead of using the file upload each time we create/edit a content type, we want to add a new field that already holds the needed images when creating/editing a content type. The content manager can choose per checkbox which image will be set as background-image.

Please have find in attachement how the solution could looks-like (here blue and orange image, blue is selected per default).

Now my questions: - Is there a module that can handle this feature for me? - May I have to extend the 'fieldfield_source' module to behave like I want (I'm not sure how to) - Could some one give me some advice how to implement this feature?

Thank you in advance

H.enter image description here


There are many ways to do this, but if you want a way that doesn't require writing extra code or installing a new module you can start with this logic and create a view. https://drupal.stackexchange.com/a/218882/21300

The answer there shows how you pass the node from the url to the view. That way you can get fields from the node, like image fields or body text based on the current node that you're on. Then inside the view you can add a custom text field where you can write the html for how you want the background image and text to be displayed.


If you would like to perform this using code you could create a module with a block plugin.


namespace Drupal\your_module\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\node\Entity\Node;

 * @Block(
 * id = "your_block_id",
 * admin_label = @Translation("Your block name"),
 * )

class YourBlock extends BlockBase {

    public function defaultConfiguration() {

        return array();

    public function blockForm($form, FormStateInterface $form_state) {

        return $form;

    public function build() {
        $current_node = \Drupal::routeMatch()->getParameter('node'); 
        $image_style = \Drupal\image\Entity\ImageStyle::load('machine_name_of_image_style');
        $image_url = $image_style->buildUrl($node->image_field_name->entity->getFileuri());
$text = $node->text_field_name->value;
        $render = [
            '#markup' => '<div style="background:url("'.$image_url.'");">'.$text.'</div>',
        return $render;

I haven't double checked the syntax but that's the idea. This will add a new block available for you that will return html containing the image and the text based on the fields of the current node. You should be able to alter the html however you want.

NOTE: This is assuming that you want the content of the current node, if you're trying to get content that isn't the current node you'll have to retrieve that info in another way, based on a query or a queue or however else you may have it set up. Either way this is an example of displaying content in a custom way based on the info you retrieve from within a function.

  • Hey Matt, thank you for your answer. This method looks interesting but I will prefer the other ways (installing a new module or extending it or writing some code). I'm looking for a logic (like pseudo-code) to solve the problem. Thank you in advance.
    – Hermann
    Jan 16 '18 at 10:51
  • Okay added a way to do it with a custom made block plugin.
    – Matt
    Jan 16 '18 at 18:34

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.