I just got started with Markdown. I love it, but there is one thing bugging me: How can I change the size of an image using Markdown?
The documentation only gives the following suggestion for an image:
If it is possible I would like the picture to also be centered. I am asking for general Markdown, not just how GitHub does it.
You could just use some HTML in your Markdown:
<img src="drawing.jpg" alt="drawing" width="200"/>
Or via style attribute (not supported by GitHub)
<img src="drawing.jpg" alt="drawing" style="width:200px;"/>
Or you could use a custom CSS file as described in this answer on Markdown and image alignment
CSS in another file:
img[alt=drawing] { width: 200px; }
With certain Markdown implementations (including Mou and Marked 2 (only macOS)) you can append =WIDTHxHEIGHT after the URL of the graphic file to resize the image. Do not forget the space before the =.
You can skip the HEIGHT
And Width
The accepted answer here isn't working with any Markdown editor available in the apps I have used till date like Ghost, Stackedit.io or even in the StackOverflow editor. I found a workaround here in the StackEdit.io issue tracker.
The solution is to directly use HTML syntax, and it works perfectly:
<img src="http://....jpg" width="200" height="200" />
Just use:
<img src="Assets/icon.png" width="200">
instead of:
Combining two answers I came out with a solution, that might not look that pretty,
but it works!
It creates a thumbnail with a specific size that might be clicked to bring you to the max resolution image.
[<img src="image.png" width="250"/>](image.png)
Here's an example! I tested it on Visual Code and Github.
Thanks to the feedback, we know that this also works on:
GitLab
Jupyter Notebook
If you are writing MarkDown for PanDoc, you can do this:
{ width=50% }
This adds style="width: 50%;" to the HTML <img> tag, or [width=0.5\textwidth] to \includegraphics in LaTeX.
Source: http://pandoc.org/MANUAL.html#extension-link_attributes
Maybe this has recently changed but the Kramdown docs show a simple solution.
From the docs
Here is an inline {:height="36px" width="36px"}.
And here is a referenced ![smile]
[smile]: smile.png
{: height="36px" width="36px"}
Works on github with Jekyll and Kramdown.
Replace  with <img src="https://image-url.type" width="200" height="200"/>
One might draw on the alt attribute that can be set in almost all Markdown implementations/renderes together with CSS-selectors based on attribute values. The advantage is that one can easily define a whole set of different picture sizes (and further attributes).
Markdown:
CSS:
img[alt="minipic"] {
max-width: 20px;
display: block;
}
If you are using kramdown, you can do this:
{:.foo}
Then add this to your Custom CSS:
.foo {
text-align: center;
width: 100px;
}
Building on from Tiemes answer, if you're using CSS 3 you can use a substring selector:
This selector will match any image with an alt tag that ends with '-fullwidth':
img[alt$="-fullwidth"]{
width: 100%;
display: block;
}
Then you can still use the alt tag for its intended purpose to describe the image.
The Markdown for the above could be something like:
I've been using this in Ghost markdown, and it has been working well.
If you are using reference style images in Gihub Flavored Markdown:
Here is an image of tree:
![alt text][tree]{height=400px width=500px}
[//]: # (Image References)
[tree]: ./images/tree.png "This is a tree"
For those intereseted in an rmarkdown and knitr solution. There are some ways to resize images in an .rmd file without the use of html:
You can simply specify a width for an image by adding {width=123px}. Don't introduce whitespace in between the brackets:
{width=250px}
Another option is to use knitr::include_graphics:
```{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
```
This one works for me it's not in one line but i hope it works for you.
<div>
<img src="attachment:image.png" width="500" height="300"/>
</div>
You could use this one as well with kramdown:
markdown
{:.some-css-class style="width: 200px"}
or
markdown
{:.some-css-class width="200"}
This way you can directly add arbitrary attributes to the last html element. To add classes there is a shortcut .class.secondclass.
I know that this answer is a bit specific, but it might help others in need.
As many photos are uploaded using the Imgur service, you can use the API detailed here to change the size of the photo.
When uploading a photo in a GitHub issue comment, it will be added through Imgur, so this will help a lot if the photo is very big.
Basically, instead of http://i.imgur.com/12345.jpg, you would put http://i.imgur.com/12345m.jpg for medium sized image.
I came here searching for an answer. Some awesome suggestions here. And gold information pointing out that markdown supports HTMl completely!
A good clean solution is always to go with pure html syntax for sure. With the tag.
But I was trying to still stick to the markdown syntax so I tried wrapping it around a tag and added whatever attributes i wanted for the image inside the div tag. And it WORKS!!
<div style="width:50%"></div>
So this way external images are supported!
Just thought I would put this out there as it isn't in any of the answers. :)
I scripted the simple tag parser for using a custom-size img tag in Jekyll.
https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079
{% img /path/to/img.png 100x200 %}
You can add the file to the _plugins folder.
For all looking for solutions which work in R markdown/ bookdown, these of the previous solutions do/do not work or need slight adaption:
Working
Append { width=50% } or { width=50% height=50% }
{ width=50% }
{ width=50% height=50% }
Important: no comma between width and height – i.e. { width=50%, height=30% } won't work!
Append { height="36px" width="36px" }
{ height="36px" width="36px" }
Note: {:height="36px" width="36px"} with colon, as from #sayth, seems not to work with R markdown
Not working:
Append =WIDTHxHEIGHT
after the URL of the graphic file to resize the image (as from #prosseek)
neither =WIDTHxHEIGHT  nor =WIDTH only  work
If you have one image in each md file, one handy way to control image size is:
adding css style as follows:
## Who Invented JSON?
`Douglas Crockford`
Douglas Crockford originally specified the JSON format in the early 2000s.
<style type="text/css">
img {
width: 250px;
}
</style>
and the output will be like:
If you have more images in each md page, then the handy way to control each image or each customized tag is to define each element in css. For this case for the img tag we could have:
//in css or within style tags:
img[alt="Result1"] {
width: 100px;
}
img[alt="Result2"] {
width: 200px;
}
img[alt="Result3"] {
width: 400px;
}
// try in md one of the methods shown below to insert image in your document:
<br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result1"> <br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result2"> <br/>
<img src="https://i.stack.imgur.com/xUb54.png" alt="Result3"> <br/>
<br/>
in md:<br/>
 <br/>
 <br/>
For those using Markdown on Google Colaboratory, there is no need to have the image uploaded to the session storage folder, or linked on Google Drive. If the image has a URL, and it can be included on the Jupyter notebook, and its size changed as follows:
<img src="https://image.png" width="500" height="500" />
For R-Markdown, neither of the above solutions worked for me, so I turned to regular LaTeX syntax, which works just fine.
\begin{figure}
\includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
\end{figure}
Then you can use e.g. the \begin{center} statement to center the image.
Resizing Markdown Image Attachments in Jupyter Notebook
I'm using jupyter_core-4.4.0 & jupyter notebook.
If you're attaching your images by inserting them into the markdown like this:
These attachment links don't work:
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
DO THIS. This does work.
Just add div brackets.
<div>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>
Hope this helps!
When using Flask (I am using it with flat pages)... I found that enabling explicitly (was not by default for some reason) 'attr_list' in extensions within the call to markdown does the trick - and then one can use the attributes (very useful also to access CSS - class="my class" for example...).
FLATPAGES_HTML_RENDERER = prerender_jinja
and the function:
def prerender_jinja(text):
prerendered_body = render_template_string(Markup(text))
pygmented_body = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list'])
return pygmented_body
And then in Markdown:
{: width=200px}
There is way with add class and css style
![pic][logo]{.classname}
then write down link and css below
[logo]: (picurl)
<style type="text/css">
.classname{
width: 200px;
}
</style>
Reference Here
For future reference:
Markdown implementation for Joplin allows controlling the size of imported images in the following manner:
<img src=":/7653a812439451eb1803236687a70ca" width="450"/>
This feature was requested here and as promised by Laurent this has been implemented.
It took me a while to figure the Joplin specific answer.
Via plain backward compatible MD:
where w, h defines the bounding box to aspect fit into, as eg in Flutter package https://pub.dev/packages/flutter_markdown
Code: https://github.com/flutter/packages/blob/9e8f5227ac14026c419f481ed1dfcb7b53961475/packages/flutter_markdown/lib/src/builder.dart#L473
Reconsider html workarounds breaking compatibility as people might use native/non-html components/apps to display markdown.
The sheer <img ... width="50%"> said above, did work on my Github Readme.md document.
However my real issue was, that the image was inside a table cell, just compressing the text in the beside cell. So the other way was to set columns width in Markdown tables, but the solutions did not really seem enough markdownish for my morning.
At last I solved both problems by simply forcing the beside text cell with as much "& nbsp;" as I needed.
I hope this helps. Bye and thanks everybody.
The addition of relative dimensions to the source URL will be rendered in the majority of Markdown renderers.
We implemented this in Corilla as I think the pattern is one that follows expectations of existing workflows without pushing the user to rely on basic HTML. If your favourite tool doesn't follow a similar pattern it's worth raising a feature request.
Example of syntax:
Example of kitten:
If changing the initial markdown is not an option for you, this hack might work:
newHtml = oldHtml.replace(/<img/g, '<img height="100"');
I used this to be able to resize images before sending them in an email (as Outlook ignores any image css styling)
Related
The Issue
I was working to load image from svg(Scalable Vector Graphics) file on React. I tried a few solution ways and I didn't received any result. Those are solutions that have been tried:
Solution - 1
<img src="../../assets/icons/branch.svg" alt="branch" />
Firstly, I was reading many articles and seen this way: Directly set source to svg. But that didn't work.
Solution - 2
<i className="branch">:</i>
.branch {
background-image: url('../../assets/icons/branch.svg');
}
Secondly, I tried use to background image and that didn't work.
Solution - 3
<object type="image/svg+xml" data="../../assets/icons/branch.svg" aria-label="branch">
Image
</object>
Thirdly, I tried use to object and that didn't work.
Solution 4
When i was trying to use as an in-line svg, it works. But i don't like it, i wanna use that svg as external.
Finally
I tried those ways and only in-line way works. Can someone help me to use that svg as external?
You can also try this
import { ReactComponent as Branch } from "../../assets/icons/branch.svg";
and then use it like
<Branch/>
or
import Branch from "../../assets/icons/branch.svg";
background-image: url(${Branch});
I´m making an email program website which allows you to upload images. You can resize the image but it will be written as inline styling: style="width: X; heigth: X".
When you want to preview your email inside outlook the image will be shown with full width and height.
So instead of
<img src="x" style="width: x; heigth: x";>
I want
<img src="x" width="x" heigth="x">
I'm currently using the latest version of CKEditor: V4.7.3
Please see: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_acf-section-example%3A-disallow-inline-styles-and-use-attributes-instead. This link describes exactly what you are looking for.
Please note that for this to work Advanced Content Filter (ACF) needs to be enabled. If you are not familiar with it, please see:
http://docs.ckeditor.com/#!/guide/dev_acf
http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
http://docs.ckeditor.com/#!/guide/dev_disallowed_content
http://docs.ckeditor.com/#!/api/CKEDITOR.filter-method-addTransformations
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent
I have some problems to create responsive image maps with Matt Stows jQuery Plugin. I followed all the advices, but the image maps are still not responsive. I hope you can help. These are the instructions (Full page: https://github.com/stowball/jQuery-rwdImageMaps):
If possible, add correct, unitless width and height attributes to your image map images. You can override these in CSS to make them responsive.
Add a link to jQuery in your page, preferably at the bottom just
before the closing </body>
After jQuery, either in a block or a separate file, call:
$('img[usemap]').rwdImageMaps();
That's my code, I set a fixed width and height which is overwritten in CSS.
<div class="banners">
<img src="wcf/images/blueTemptation/logo2.jpg" style="width: 980px; height: 80px; display:block;" alt="banner-x" usemap="#banner-y" />
<map name="banner-y"><area shape="rect" coords="560,1,765,79" href="http://www.filmfutter.com/" alt="Kgergrfr" title="Filmfutter Startseite">
</div>
at the bottom of my php I placed this:
<script src="https://raw.github.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
In case you wonder, I changed the script source to a URL because I wasn't sure about the right path on my server, but that should not be the issue.
So, I did not manage the plugin to get working and I still wonder because obviously I did nothing wrong, but I used another plugin instead, and finally it works properly. In case some others have the same issues, David Bradshaw's library does exactly what I want and resizes image maps the way they should: https://github.com/davidjbradshaw/imagemap-resizer
I had the same issue, it turns out that I was using JQuery v1.8.3, when I updated it to JQuery v1.9, that seemed to do the trick.
Maybe it's a JQuery versioning problem?
I am looking to create a slideshow. What I mean by that is that I want to create one of those things that you sometimes see on websites where you have a row of buttons at the bottom, and clicking on those buttons fades you to an image or a element, but if you do not touch those buttons, they switch in order between one another. How can I make something like this? I am new to web development, and help would be much appreciated. I am aware that this task will require JavaScript, however I would like to avoid jQuery if at all possible, I will still consider suggestions made using jQuery, so please don't hesitate to post them.
Thank you.
I don't believe there is any way to do this with HTML/CSS alone, though I could be wrong. When I was first starting web development I found it useful to look at code from Twitter Bootstrap to figure out how they managed to create certain effects/elements.
If I understand what you want correctly, I think you are looking for Carousel. Take a look at that and hopefully it'll help. You can even use bootstrap if you'd like.
Good luck.
Google Jquery Sliders or Gallerys.
Or CSS sliders
http://www.queness.com/post/14329/pure-css3-sliders-and-tutorials
http://vandelaydesign.com/blog/tools/awesome-jquery-sliders/
You dont need to know any jquery to be able to get a working slider. Read the Documentation and look at the example files to get started. If you use jquery make sure you link your files to the document correctly.
Here is a very simple jQuery carousel which slides automatically.
EXAMPLE
The code is very simple and easy to use as well.
HTML
Just a DIV with images inside
<div id="banner_area">
<img class="active" src="image1.png" />
<img src="image2.png" />
<img src="image3.png" />
<img src="image4.png" />
</div>
CSS
CSS is pretty straight forward as well
#banner_area img
{
display:none;
position: absolute;
}
#banner_area img:first-child
{
display:block;
}
#banner_area > img /* Use this to resize all image's container */
{
width:400px;
height:250px;
}
JavaScript
Don't forget to include jQuery as well // You can increase/decrease the time
function cycleImages() {
var images = $('#banner_area img'),
now = images.filter(':visible'),
next = now.next().length ? now.next() : images.first(),
speed = 1000;
now.fadeOut(speed);
next.fadeIn(speed);
}
$(function () {
setInterval(cycleImages, 1400);
});
EDIT: I found that the issue is actually that IE changes an HTML elements class text from:
"<img class="blah".." to "<img class=blah..".
This is only happening in IE for me. Note it doesn't remove the src quotation marks or the id quotation marks or others. This is sooo frustrating!
I am using JQuery to update a website visually, Inside my main div(updatableDiv) I change each updatable HTML element(for eg an p, i, b, etc.) into a textarea. The user makes their textual changes then I change the textareas back to a p, b etc. This is all done using JQuery.
My Problem: When I go to get the HTML from the div(with the id updatableDiv), my HTML is slightly different which results in the display of the HTML being slightly different. For example: if I have an image thats sits directly above a white box(not vertical gap in between), after I update the html, there is a vertical gap introduced in between the image & the white box.
So the before html was(this is an example from IE):
<img class="pageHeading" src="linksHeading.png" width="90%" alt=""/><div class="pageContent">
After getting the HTML using the call $("#updatableDiv").html() the html looks like this:
<IMG class=pageHeading alt="" src="linksHeading.png" width="90%">
<DIV class=pageContent>
So it results in a vertical gap.
So my main question is how can I keep all the formatting of the HTML so problems like this dont occur after I update the HTML & get the HTML from the element by JQuery's $("#updatableDiv").html()?
Make the img display: block.
When you get the innerHTML in some versions of IE, it will NOT give you back your original HTML. It will give you a generated version of the HTML that can be quite different from the original (though semantically identical to it).
I've seen some versions of IE:
Remove quote marks around attributes
Change the order of attributes
Change the case of attribute names
So, in a nutshell, all you can count on when you get the innerHTML of something in IE is that it will give you semantically the same HTML, but it may not be the same HTML as what was in the page originally. It appears that it doesn't save the original HTML, but instead generates it from the object attributes. Since there are many legal ways to express a given set of attributes, IE will not necessarily generate it the same way you originally specified it.
I don't believe there is anything you can do about this unless you want to reformat the generated HTML that IE gives you according to your own style rules (add quotes where you want them, put attributes in a specific order, change to a specific case, etc...).
If you run this jsFiddle in IE7, you will see it change all three items above from what was originally specified.
I specify this HTML in IE7:
<div id="test" data-item="test" style="background-color: red; height: 40px; width: 100px;">
When I request innerHTML, I get this back (different order, caps and quoting):
<DIV style="BACKGROUND-COLOR: red; WIDTH: 100px; HEIGHT: 40px" id=test data-item="test"></DIV>
I'd actually be surprised if the vertical gap you notice is because of the changed HTML. IE is notorious for putting extra space around images. For one, they are an inline item by default so it treats them as being part of a line and gives the line they are on the prevailing line height. This can add extra space around images in various ways. The work-arounds I've used in IE are to make the image display: block (if that's appropriate) or to set font-size: 0 on the container that the image is in so IE doesn't give the line any additional height. You should also make sure that you've specified a border for the image because older versions of IE like to give images a default border too.
This extra spacing around an image can be triggered by the existence of a space in a line that didn't previously exist. Other browsers consider that space only as a separator, but in older versions of IE, it triggers some extra line spacing.
White-space in the source shouldn't matter. You're not losing (or adding) some CSS class information during the transition are you?
img elements are inline by default, so normally they line up to the text baseline leaving a gap that is the extra space below the baseline for dangling letters like lowercase g. Block elements should line up with the bottom of the containing block.
Try setting some CSS:
img { display:block; }
// or possibly
img { vertical-align:bottom; }