I like to implement this codepen into drupal but the images in the background should come from a ctype within Drupal.
The codepen example: http://codepen.io/AmeliaBR/pen/myPBNg
So basically how to get this line dynamic in a page?
article { background: url(https://foo.com/fooimage.jpg) no-repeat center; } Can you point me to the good direction? Is there a module which support this? What tags should I look?
You could use:
// replace this with the url from the node object $imgURL = 'https://foo.com/fooimage.jpg'; $style = 'article {'; $style .= 'background: url(' . $img_url . ') no-repeat center;'; $style .= '}'; drupal_add_css($style, array('type' => 'inline')); For the $img_url though you need to fond out how to get the image url. You would need to load the node using node_load() then use dsm() from the Devel module or just use print_r() to display the field array.
I'm assuming by the "article" css that you want the background image on the on the markup which wraps the content in a node.tpl.php. You can add the style attribute directly to the attributes array in a node preprocess. This example also gets the path to a specific image style for control over the image.
This would go in your template.php with the proper names swapped out to pull in your specific image field and image style.
/* * * Override or insert variables into the node templates. * * @param $variables * An array of variables to pass to the theme template. * @param $hook * The name of the template being rendered ("node" in this case.) */ function THEMENAME_preprocess_node(&$variables, $hook) { $type = $variables['type']; $view_mode = $variables['view_mode']; switch ($type) { case 'CONTENT_TYPE_MACHINE_NAME': // Ensure we only effect the node page if ($view_mode == 'full' && node_is_page($variables['node'])) { // Adjust to your specific image field. // This may be different apart from swapping field names. // Use Devel module and dpm($variables); to find your field's uri in the $variables array. $field_uri = $variables['FIELD_MACHINE_NAME'][0]['uri']; // Assuming you'll have an image style for it. Enter the machine name in here. $image_url = image_style_url('IMAGE_STYLE_MACHINE_NAME', $field_uri); $variables['attributes_array']['style'] = 'background-image: url(' . $image_url . ');background-repeat: no-repeat;'; } break; } } The switch statement is for code readability should you preprocess other node types in the future. Just add another case & break.
