thank you wombatbuddy !
I got the Jquery stuff working, but my offset problem does not go away.
now I run this rather neat piece of code to set dimensions on lazy-loaded pictures that use CSS aspect ratio:
(function ($, Drupal) {
Drupal.behaviors.myBehavior = {
attach: function (context, settings) {
$(context)
.find('div.css-aspect-ratio--theme')
.each(function() {
var img = $(this);
var width = img.width();
var ratio = parseFloat(img.css("--css-aspect-ratio"))/100;
var height = width * ratio;
$(this).height(height).width(width);
$(this).find('img').height(height).width(width);
})(jQuery, Drupal);
it's quite nice, it sets dimensions on all my lazy-loaded responsive pictures, but what baffles me, is that even then, the offset anchors don't work correctly when a picture precedes them :-(
I also tried to add the offset via JQuery after running the above code, and that doesn't do the trick either:
(function ($, Drupal) {
Drupal.behaviors.myBehavior = {
attach: function (context, settings) {
$(context)
.find('div.css-aspect-ratio--theme')
.each(function() {
var img = $(this);
var width = img.width();
var ratio = parseFloat(img.css("--css-aspect-ratio"))/100;
var height = width * ratio;
$(this).height(height).width(width);
$(this).find('img').height(height).width(width);
$(context)
.find('a.anchor')
.each(function() {
$(this).css('top','-250px');
})(jQuery, Drupal);
what's funny is that it works *sometimes* ... sometimes I get 4 or 5 correct renders in a row, and then it will come out wrong again, just by clicking on the same link again and again
Is there something I can do to force the browser to calculate heights and widths of all the divs?
Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
You don't have to change the code, just add it to the body of the following function:
attach: function (context, settings) {}References
1. Drupal.behaviors .
2. Understanding JavaScript behaviors in Drupal .