I have a image field that I have added an 'onload' attribute to in template.php.

function mytheme_preprocess_field(&$variables) {
    if($variables['element']['#field_name'] == 'field_images'){
        foreach($variables['items'] as $key => $item){
            $variables['items'][ $key ]['#item']['attributes']['onload'][] = 'imgLoaded(this)';

I have this image field wrapped in <div class="img_wrapper">:

<<?php print $tag; ?> class="<?php print $classes; ?>"<?php print $attributes; ?>>

  <?php if (!$label_hidden) : ?>
    <h2 class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp; XXXX</h2>
  <?php endif; ?>

  <div class="field-items"<?php print $content_attributes; ?>>
    <?php foreach ($items as $delta => $item) : ?>
      <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>>
      <div class="img_wrapper">
        <?php print render($item); ?>
    <?php endforeach; ?>

</<?php print $tag; ?>>

When the image has loaded, the following script adds a 'loaded' class to the img-wrapper div:

function imgLoaded(img){
var imgWrapper = img.parentNode;
imgWrapper.className += imgWrapper.className ? ' loaded' : 'loaded';

Since enabling the Picture module, my markup has changed and images are no longer wrapped in a <img> tag but inside a <picture> tag. Now the 'loaded' class is not being applied to the img-wrapper div.

Inspecting the DOM I can see that firstElementChild is now picture. Without the Picture module the firstElementChild was img.image-style-none cake.png

parentElement and parentNode are the same for both.

From what I have read, it seems that picturefill in the Picture module adds the <img> tag, but I'm unsure of this. I cannot see the <img> tag when inspecting in Firebug.

How can I add the 'loaded' class to the img-wrapper div once the image has loaded now that <img> has been replaced with <picture>?

  • You might want to reorganize this question to get a better answer, as I found it confusing...but are you just trying to go one more parentNode up in var imgWrapper = img.parentNode;? – Alex Finnarn Mar 3 '15 at 23:33
  • Thanks for the reply Alex, I've updated the question to make it clearer. – T Mardi Mar 3 '15 at 23:55
  • cool. A snippet of one of the DOM node(s) once loaded would also probably be helpful. I would add it after "Now the 'loaded' class is not being applied...". Your problem seems to be in the imgLoaded() function, and it is unclear how that function is called. It must be in the global namespace somehow? I'm a big fan of breakpoints/log debugging, and I bet console.log(img.parentNode) would tell you a lot if you added it to the imgLoaded() function. – Alex Finnarn Mar 4 '15 at 0:15
  • I'm out of my depth here to be honest Alex. The imgLoaded() function is being called from the field.tpl [onload]. How would I get a snippet of what you require for debugging? – T Mardi Mar 4 '15 at 0:27
  • If you add console.log(img.parentNode) in the imgLoaded(img) function, you could test whether the function was being called, how many times, and then what parent node was being used. I assume the "loaded" class is showing up on something or that element is being replaced after the function is run with the <picture> tag. So that console log info would help as well as what Firebug says is in the <div class="img_wrapper"> node when you inspect it. – Alex Finnarn Mar 5 '15 at 0:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.