CODEWITHSUNDEEP
javascriptjqueryhtmljekyllliquid
Adriano Monecchi
Adriano Monecchi

Reputation: 1210

How to get an image's width and height within a for loop in Jekyll Liquid syntax and translate it to a js $variable?

Would be there a way to define (assign or capture) a variable where I'd be able to get an image's width and height using Liquid logic? I'd expect to pass those values to a js $variable later.

Bellow are the steps my site takes until the moment I expect to use the image size values... E.g:

On each .markdown document's front-matter definitions I have a list of associative arrays such as follows:

single_module:
  - url: 'anchor-480x480.jpg'
    width: "480"
    height: "480"
    alt: 'An image's alt text'
  - url: 'kart2.jpg'
    width: "1300"
    height: "1300"
    alt: 'An image's alt text'

...

On a page's html layout I have a for loop which grabs all the values I need from the document's front-matter. At this point I'm translating the width and height values of each image defined in the front-matter as the url: key to a data-attribute within the html.

{% assign modules = page.single_module %}
{% for module in modules %}
<div class="module default-module" data-bgimage="{{ site.baseurl | prepend: site.project_upload_path }}{{module.url}}" data-width="{{module.width}}" data-height="{{module.height}}">
</div>

The above would result in something like:

<div data-bgimage="/uploads/projects/anchor-480x480.jpg" data-width="480" data-height="480">
</div>

...

From here on I'd expect to use the data-width and data-height values in the following js function:

The javascript function bellow takes account of images width and height through an $img variable. This is not the complete function, it is just the part that uses the $img variable, Please see bellow:

$(document).ready(function(){ 

var moduleImage = $(".module");
// Create the $img variable
var $img = moduleImage.data("bgimage");

...

ui : {
resizeElement : function($img, h){

// This function resizes a given element over a certain height. It also centers the element...

var maxHeight = h,
maxWidth = $(window).width(),
oldHeight = $img.height(),
oldWidth = $img.width(),
ratio = Math.max(oldWidth / oldHeight, oldHeight / oldWidth),
newHeight = 0,
newWidth = 0;

// Complex calculations to get the perfect size

if(oldWidth > oldHeight){

if ( maxHeight * ratio < maxWidth ) {
newWidth = maxWidth;
newHeight = maxWidth / ratio;
} else {
newHeight = maxHeight;
newWidth = maxHeight * ratio;
}

} else {

if ( maxHeight / ratio < maxWidth ) {
newWidth = maxWidth;
newHeight = maxWidth * ratio;
} else {
newHeight = maxHeight;
newWidth = maxHeight / ratio;
}

}

// Apply the correct size and reposition

$img.css({
'width': Math.ceil(newWidth),
'height': Math.ceil(newHeight),
'top': Math.round((h-newHeight)/2),
'left': Math.round(($(window).width()-newWidth)/2)
});

},

});//end document.ready

This seems to go beyond my programming skills as I'm not a dev, but a designer who like to do some coding. Anyway, How in the world could I pass to the js $img variable the values from the jekyll for loop syntax stored in the data-width and data-height attributes.

extracted from the function above, I've tried the following: ...

var moduleImage = $(".module");
// Create new offscreen image to test
var $img = moduleImage.data("bgimage");

oldHeight = $img.height(),
oldWidth = $img.width(),

Upvotes: 4

Views: 1654

Answers (3)

Shane Brinkman-Davis
Shane Brinkman-Davis

Reputation: 699

You could use this jekyll plugin jekyll-image-size. It lets you add liquid tags anywhere in your templates to extract width and height information from local assets and output it in many different formats. For example:

<script>
let {width, height} = {{ imagesize /assets/image.png:json }};
</script>

Upvotes: 1

Mr. Hugo
Mr. Hugo

Reputation: 12610

I assume you want a full-screen background-image. If you are OK with not supporting IE8 you can use the CSS commands background: url('yourimage'), and background-size: cover. That seems like the simplest solution for your problem. Less (code) is more...

Upvotes: 0

Nick
Nick

Reputation: 1024

Since you've already gotten the data into your HTML using Liquid, now (if I understand correctly) you just need to get the data from your HTML DOM into your script. You can get it the same way you're getting the bgimage.

Is this what you're looking for?

oldHeight = moduleImage.data('height'),
oldWidth = moduleImage.data('width'),

Upvotes: 1

Related Questions