I have a Header image which i can upload per node from my Basic-page Content type. I want to implement this parallax effect, on my Header image section. But I need to add:

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>.

How do I add data-image-src="/path/to/image.jpg" to the wrapping <div>? It has to be dynamic and per node you must be able to attach a specific image.


Where do you need to add that code? Into field.tlp.php, node.tpl.php or page.tlp.php? Is it D7 or D8?

If you need to extract src atribute (/path/to/image.jpg) from some HTML code (for example from the node.tlp.php field) then use Google. When you will have src then you can create desired <div> element in your template files.

As universal answer as detailed question was.


I found that you have attached your site so I suggest this:

  1. Create block in Views for header image field
    • NID as Contextual Filter
    • Enable cache per page
    • Output header image field as src (only image url) - there is such option in views or use this module
    • Override that field (rewrite the output of this field) with something as <div class="parallax-window" data-parallax="scroll" data-image-src="[image_src]"></div>
    • enable block in proper region only for "Basic-page" CT
  • thanks i try it know. But the first step 'NID as argument' how do i do this? – meez Dec 9 '15 at 8:39
  • Check this. It's called like Contextual Filter: Nid. I'm sure you know what it is - it's very common in Views. I just used wrong term from D6. – Jasom Dotnet Dec 10 '15 at 10:03

I fixed it with a much easier way:

1) I installed the Image URL Formatter module

2) now i am able in Manage Display > Full content > Field: header_image > under Format i can choose Image URL

3) Now in my page.tpl.php i can call my header_image URL like:

   <div class="parallax-window" data-parallax="scroll" data-speed="-0.2" data-image-src="<?php print render($page['header_image']); ?>"></div>

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.