Jekyll: Get width/height of an image without using an external plugin
I want to automatically add height
and width
attributes to all my images. It is perfectly done via this nice plugin, but I host my site on GitHub Pages where external plugins are not supported.
Question: How to prefill height/width attributes of an image without using a plugin?
Why do I need this?
My site works perfectly even without height
and width
but I want to specify them because it is important from SEO point of view (you can find some details on its importance here).
ruby jekyll github-pages
|
show 1 more comment
I want to automatically add height
and width
attributes to all my images. It is perfectly done via this nice plugin, but I host my site on GitHub Pages where external plugins are not supported.
Question: How to prefill height/width attributes of an image without using a plugin?
Why do I need this?
My site works perfectly even without height
and width
but I want to specify them because it is important from SEO point of view (you can find some details on its importance here).
ruby jekyll github-pages
"where external plugins are not supported.": That is why I recommended recently Hugo: stackoverflow.com/a/53244761/6309
– VonC
Nov 15 '18 at 5:59
@VonC thank you, but as I mentioned before it is not an option for me. First, I'd need to rework my project. Second, I'd need to change hosting as Hugo is not supported on GitHub pages (I would need to commit precompiled html files which I don't want). And finally, quick googling shown up that there is no built in solution forheight
andwidth
calculation so I'd need to figure out that myself. I can't understand how can I benefit from using Hugo. Please explain if I'm missing something.
– Oleksandr Shpota
Nov 15 '18 at 9:40
Why do you need width and height calculations. I have never needed them. Am I missing something?
– JoostS
Nov 15 '18 at 9:51
@JoostS updated the question
– Oleksandr Shpota
Nov 15 '18 at 9:56
1
Still unclear to me what your goal is... prevent reflow? And what has that to do with SEO?
– JoostS
Nov 15 '18 at 10:08
|
show 1 more comment
I want to automatically add height
and width
attributes to all my images. It is perfectly done via this nice plugin, but I host my site on GitHub Pages where external plugins are not supported.
Question: How to prefill height/width attributes of an image without using a plugin?
Why do I need this?
My site works perfectly even without height
and width
but I want to specify them because it is important from SEO point of view (you can find some details on its importance here).
ruby jekyll github-pages
I want to automatically add height
and width
attributes to all my images. It is perfectly done via this nice plugin, but I host my site on GitHub Pages where external plugins are not supported.
Question: How to prefill height/width attributes of an image without using a plugin?
Why do I need this?
My site works perfectly even without height
and width
but I want to specify them because it is important from SEO point of view (you can find some details on its importance here).
ruby jekyll github-pages
ruby jekyll github-pages
edited Nov 15 '18 at 10:02
JoostS
6,14521636
6,14521636
asked Nov 14 '18 at 22:34
Oleksandr ShpotaOleksandr Shpota
3,55131533
3,55131533
"where external plugins are not supported.": That is why I recommended recently Hugo: stackoverflow.com/a/53244761/6309
– VonC
Nov 15 '18 at 5:59
@VonC thank you, but as I mentioned before it is not an option for me. First, I'd need to rework my project. Second, I'd need to change hosting as Hugo is not supported on GitHub pages (I would need to commit precompiled html files which I don't want). And finally, quick googling shown up that there is no built in solution forheight
andwidth
calculation so I'd need to figure out that myself. I can't understand how can I benefit from using Hugo. Please explain if I'm missing something.
– Oleksandr Shpota
Nov 15 '18 at 9:40
Why do you need width and height calculations. I have never needed them. Am I missing something?
– JoostS
Nov 15 '18 at 9:51
@JoostS updated the question
– Oleksandr Shpota
Nov 15 '18 at 9:56
1
Still unclear to me what your goal is... prevent reflow? And what has that to do with SEO?
– JoostS
Nov 15 '18 at 10:08
|
show 1 more comment
"where external plugins are not supported.": That is why I recommended recently Hugo: stackoverflow.com/a/53244761/6309
– VonC
Nov 15 '18 at 5:59
@VonC thank you, but as I mentioned before it is not an option for me. First, I'd need to rework my project. Second, I'd need to change hosting as Hugo is not supported on GitHub pages (I would need to commit precompiled html files which I don't want). And finally, quick googling shown up that there is no built in solution forheight
andwidth
calculation so I'd need to figure out that myself. I can't understand how can I benefit from using Hugo. Please explain if I'm missing something.
– Oleksandr Shpota
Nov 15 '18 at 9:40
Why do you need width and height calculations. I have never needed them. Am I missing something?
– JoostS
Nov 15 '18 at 9:51
@JoostS updated the question
– Oleksandr Shpota
Nov 15 '18 at 9:56
1
Still unclear to me what your goal is... prevent reflow? And what has that to do with SEO?
– JoostS
Nov 15 '18 at 10:08
"where external plugins are not supported.": That is why I recommended recently Hugo: stackoverflow.com/a/53244761/6309
– VonC
Nov 15 '18 at 5:59
"where external plugins are not supported.": That is why I recommended recently Hugo: stackoverflow.com/a/53244761/6309
– VonC
Nov 15 '18 at 5:59
@VonC thank you, but as I mentioned before it is not an option for me. First, I'd need to rework my project. Second, I'd need to change hosting as Hugo is not supported on GitHub pages (I would need to commit precompiled html files which I don't want). And finally, quick googling shown up that there is no built in solution for
height
and width
calculation so I'd need to figure out that myself. I can't understand how can I benefit from using Hugo. Please explain if I'm missing something.– Oleksandr Shpota
Nov 15 '18 at 9:40
@VonC thank you, but as I mentioned before it is not an option for me. First, I'd need to rework my project. Second, I'd need to change hosting as Hugo is not supported on GitHub pages (I would need to commit precompiled html files which I don't want). And finally, quick googling shown up that there is no built in solution for
height
and width
calculation so I'd need to figure out that myself. I can't understand how can I benefit from using Hugo. Please explain if I'm missing something.– Oleksandr Shpota
Nov 15 '18 at 9:40
Why do you need width and height calculations. I have never needed them. Am I missing something?
– JoostS
Nov 15 '18 at 9:51
Why do you need width and height calculations. I have never needed them. Am I missing something?
– JoostS
Nov 15 '18 at 9:51
@JoostS updated the question
– Oleksandr Shpota
Nov 15 '18 at 9:56
@JoostS updated the question
– Oleksandr Shpota
Nov 15 '18 at 9:56
1
1
Still unclear to me what your goal is... prevent reflow? And what has that to do with SEO?
– JoostS
Nov 15 '18 at 10:08
Still unclear to me what your goal is... prevent reflow? And what has that to do with SEO?
– JoostS
Nov 15 '18 at 10:08
|
show 1 more comment
1 Answer
1
active
oldest
votes
This question seems to apply to content images in markdown files. These images have no width or height set by default.
The short answer
You can just set the width and height directly in HTML in your markdown, like this:
# Markdown title
paragraph
<img src="/path/to/image.jpg" width="400" height="300" />
The long answer
You cannot retreive the width and height of the image programmatically without a plugin, so when you use (pure) markdown you get an image without a width and height property. The question is WHY you wanted to add a width and a height in the first place. Setting the width and height prevents reflow, but it leaves a big gaping hole while loading. Is that truly better? It certainly does not look nice. Progressive JPG's are a very nice solution for this problem, but I do not prefer to set the width and height on them, as 'no image' looks good, and a progressive JPG also always looks good.
You say you want it for SEO reasons, but I cannot think of any.
If your website is so slow you actually want to interact with content below the image before the reflow, the logical solution is to make your website load faster.
However, if you have users with a really slow connection, you might want to manually add the image to the markdown in HTML. See the short answer for a code example.
Yes yes... alt attribute is missing... but that is done on purpose for brevity.
– JoostS
Nov 15 '18 at 11:45
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53309750%2fjekyll-get-width-height-of-an-image-without-using-an-external-plugin%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This question seems to apply to content images in markdown files. These images have no width or height set by default.
The short answer
You can just set the width and height directly in HTML in your markdown, like this:
# Markdown title
paragraph
<img src="/path/to/image.jpg" width="400" height="300" />
The long answer
You cannot retreive the width and height of the image programmatically without a plugin, so when you use (pure) markdown you get an image without a width and height property. The question is WHY you wanted to add a width and a height in the first place. Setting the width and height prevents reflow, but it leaves a big gaping hole while loading. Is that truly better? It certainly does not look nice. Progressive JPG's are a very nice solution for this problem, but I do not prefer to set the width and height on them, as 'no image' looks good, and a progressive JPG also always looks good.
You say you want it for SEO reasons, but I cannot think of any.
If your website is so slow you actually want to interact with content below the image before the reflow, the logical solution is to make your website load faster.
However, if you have users with a really slow connection, you might want to manually add the image to the markdown in HTML. See the short answer for a code example.
Yes yes... alt attribute is missing... but that is done on purpose for brevity.
– JoostS
Nov 15 '18 at 11:45
add a comment |
This question seems to apply to content images in markdown files. These images have no width or height set by default.
The short answer
You can just set the width and height directly in HTML in your markdown, like this:
# Markdown title
paragraph
<img src="/path/to/image.jpg" width="400" height="300" />
The long answer
You cannot retreive the width and height of the image programmatically without a plugin, so when you use (pure) markdown you get an image without a width and height property. The question is WHY you wanted to add a width and a height in the first place. Setting the width and height prevents reflow, but it leaves a big gaping hole while loading. Is that truly better? It certainly does not look nice. Progressive JPG's are a very nice solution for this problem, but I do not prefer to set the width and height on them, as 'no image' looks good, and a progressive JPG also always looks good.
You say you want it for SEO reasons, but I cannot think of any.
If your website is so slow you actually want to interact with content below the image before the reflow, the logical solution is to make your website load faster.
However, if you have users with a really slow connection, you might want to manually add the image to the markdown in HTML. See the short answer for a code example.
Yes yes... alt attribute is missing... but that is done on purpose for brevity.
– JoostS
Nov 15 '18 at 11:45
add a comment |
This question seems to apply to content images in markdown files. These images have no width or height set by default.
The short answer
You can just set the width and height directly in HTML in your markdown, like this:
# Markdown title
paragraph
<img src="/path/to/image.jpg" width="400" height="300" />
The long answer
You cannot retreive the width and height of the image programmatically without a plugin, so when you use (pure) markdown you get an image without a width and height property. The question is WHY you wanted to add a width and a height in the first place. Setting the width and height prevents reflow, but it leaves a big gaping hole while loading. Is that truly better? It certainly does not look nice. Progressive JPG's are a very nice solution for this problem, but I do not prefer to set the width and height on them, as 'no image' looks good, and a progressive JPG also always looks good.
You say you want it for SEO reasons, but I cannot think of any.
If your website is so slow you actually want to interact with content below the image before the reflow, the logical solution is to make your website load faster.
However, if you have users with a really slow connection, you might want to manually add the image to the markdown in HTML. See the short answer for a code example.
This question seems to apply to content images in markdown files. These images have no width or height set by default.
The short answer
You can just set the width and height directly in HTML in your markdown, like this:
# Markdown title
paragraph
<img src="/path/to/image.jpg" width="400" height="300" />
The long answer
You cannot retreive the width and height of the image programmatically without a plugin, so when you use (pure) markdown you get an image without a width and height property. The question is WHY you wanted to add a width and a height in the first place. Setting the width and height prevents reflow, but it leaves a big gaping hole while loading. Is that truly better? It certainly does not look nice. Progressive JPG's are a very nice solution for this problem, but I do not prefer to set the width and height on them, as 'no image' looks good, and a progressive JPG also always looks good.
You say you want it for SEO reasons, but I cannot think of any.
If your website is so slow you actually want to interact with content below the image before the reflow, the logical solution is to make your website load faster.
However, if you have users with a really slow connection, you might want to manually add the image to the markdown in HTML. See the short answer for a code example.
edited Nov 15 '18 at 11:56
answered Nov 15 '18 at 11:37
JoostSJoostS
6,14521636
6,14521636
Yes yes... alt attribute is missing... but that is done on purpose for brevity.
– JoostS
Nov 15 '18 at 11:45
add a comment |
Yes yes... alt attribute is missing... but that is done on purpose for brevity.
– JoostS
Nov 15 '18 at 11:45
Yes yes... alt attribute is missing... but that is done on purpose for brevity.
– JoostS
Nov 15 '18 at 11:45
Yes yes... alt attribute is missing... but that is done on purpose for brevity.
– JoostS
Nov 15 '18 at 11:45
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53309750%2fjekyll-get-width-height-of-an-image-without-using-an-external-plugin%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
"where external plugins are not supported.": That is why I recommended recently Hugo: stackoverflow.com/a/53244761/6309
– VonC
Nov 15 '18 at 5:59
@VonC thank you, but as I mentioned before it is not an option for me. First, I'd need to rework my project. Second, I'd need to change hosting as Hugo is not supported on GitHub pages (I would need to commit precompiled html files which I don't want). And finally, quick googling shown up that there is no built in solution for
height
andwidth
calculation so I'd need to figure out that myself. I can't understand how can I benefit from using Hugo. Please explain if I'm missing something.– Oleksandr Shpota
Nov 15 '18 at 9:40
Why do you need width and height calculations. I have never needed them. Am I missing something?
– JoostS
Nov 15 '18 at 9:51
@JoostS updated the question
– Oleksandr Shpota
Nov 15 '18 at 9:56
1
Still unclear to me what your goal is... prevent reflow? And what has that to do with SEO?
– JoostS
Nov 15 '18 at 10:08