2

I have a Views grid that contain images in DIV containers. I want these containers to have one of two possible heights 60px or 104px, depending on the images height. So I came up with this function (contained in a $(document).ready function()) that I have added in my theme's JS file.

  $('div.givarbild img').each( function() {
    var container = $(this).closest('div.givarbild');
    var pic = new Image();
    pic.src = $(this).attr("src");  
    var picHeight = pic.height; 
    console.log(picHeight);
    if(picHeight < 60){
        container.height(60);
    }else if(picHeight > 60){
        container.height(104);
    } 

  });

Now, my problem is that this only works once, after clearing the caches in Config -> Performance. If I simply reload the page after clearing all caches in Drupal all DIVs are 60 px high and the container.height value is zero in the js console (Firebug).

How can I force this little function to run after every page load?

EDITED: Hmmm, I am obviously doing something wrong here :-)... but with this code:

(function($) {
    Drupal.behaviors.related_content = {
        attach: function (context) {            
            $('div.givarbild img').each( function() {
                var container = $(this).closest('div.givarbild');
                var pic = new Image();
                pic.src = $(this).attr("src");  
                var picHeight = pic.height; 
                console.log(picHeight);
                if(picHeight < 60){
                    container.height(60);
                }else if(picHeight > 60){
                    container.height(104);
                } 
            });     
        }
    }
})(jQuery);     

... I get the exact same result. It works immediately after clearing all caches in Drupal 7 but not when I reload the page after that. Is there something fishy with my custom script itself?

EDITIED AGAIN: I post this change to my js code in case anyone else is having the same issue. This code does the same thing as the previous one, except that it works every time, and not just the first time after clearing all caches in D7. The only thing I changed was the method for getting the natural image height. It would be interesting to know why this latter code works though and not the first one... it actually works every time even without the added Drupal.behaviors rows.

(function($) {
    Drupal.behaviors.related_content = {
        attach: function (context) {            
            $('div.givarbild img').each( function() {
                var container = $(this).closest('div.givarbild');
                $("<img>").attr("src", $(this).attr("src")).load(function(){
                    var picHeight = this.height;
                    console.log(picHeight);
                    if(picHeight < 60){
                        container.height(60);
                    }else{
                        container.height(104);
                    } 
                });
            });     
        }
    }
})(jQuery);

2 Answers 2

3
(function ($) {
  Drupal.behaviors.custom_scripts = {
    attach: function (context) {

      //write your custom code

    }
  }
})(jQuery);

Along with this for the first time you have to clear cache, and this will work in all pages and all the times.

4
  • It would be good to mention that "custom code here" will run every time Drupal behaviours are attached, not just on page load. That could be after an AJAX call on the same page, for example. If that's not desirable, $.once should be used
    – Clive
    May 20, 2016 at 10:02
  • That looks like the right answer, but at my first try, I didn't get it to work. Should I replace custom_scripts with something?
    – TBJ
    May 20, 2016 at 11:36
  • Yes you can write anything there.
    – NTT
    May 20, 2016 at 11:37
  • OK, thanks a lot! I have edited my question, I still don't get it to work more than once and I am beginning to think it also has something to do with my code... maybe I should try to find some other method to get the natural height of the image.
    – TBJ
    May 20, 2016 at 12:03
-1

You could try to disable the caching of the view. To do this go admin/structure/views and edit your view under the advanced section there is a caching option.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.