I have an issue with displaying plots with .ofig extension in markdown. Figures are located in assets dir and I cannot display them in local preview nor when I push on GitHub.
Does anyone have any suggestions how can I achieve that or will I need to convert the plots in another format?
I have tried:
<img src="assets/SIR-figure-1.ofig" width="auto" height="auto" />
<img src="assets/SIR-figure-1" width="auto" height="auto" />
None of them worked.
GitHub renders Markdown to HTML, so you need to use an image format that web browsers know how to interpret.
Looking at the documentation, I can't tell what ofig actually is but I'm fairly sure it's not browser-friendly. Save your plots as PNG or SVG files instead.
(JPEGs and GIFs would technically work, too, but are unlikely to be good choices here. Most plots will have lots of unsightly artifacts when saved as JPEGs, and unless you need animation PNG is pretty much a more modern GIF.)
Related
I need to resize a local image from the assets folder in my markdown file.
I currently have this image that does display in my .md file.
I need to resize the image to make it a bit smaller.
Is it possible with the current package?
You can use inline HTML <img/> with providing size.
<img src = "assets/images/image01.png" width="x" height="x" />
Or
[<img src ="assets/images/image01.png" width="100" height="x"/> ](assets/images/image01.png)
More and ref: Changing image size in Markdown
<img src="drawing.jpg" alt="drawing" width="200"/>
This the github discussion on this, https://gist.github.com/uupaa/f77d2bcf4dc7a294d109
I'm trying to play a video in Jupyter books and I must be missing something.
This works...but it just auto-plays without controls and without the ability to stop it (unless one clicks and then it opens up with controls)...but it's not obvious to the user that this is a possible action:
{figure} ../_images/relativity/train_simultaneous.mp4
---
width: 60%
figclass: margin-caption
alt: My figure text
name: train_simultaneous
---
The very weird problem of the famous magnet and coil demo. Think hard about this.
If such functionality is not yet working (I think I saw that elsewhere), I don't understand why raw HTML would not work:
<video width="500" poster="../_images/relativity/train_cover.png" controls>
<source src="../_images/relativity/train_simultaneous.mp4" type="video/mp4">
</video>
</center>
That just sits there with a video start button. Clicking on it gives a frame, but for a zero second long video, so it's not loaded at all. I know this is a perfectly fine video source html as if I upload it to a server:
<video width="600" controls>
<source src="https://qstbb.pa.msu.edu/storage/QSBB_videos/relativity_temp/train_simultaneous.mp4" type="video/mp4">
</video>
</center>
...it works fine. The only difference is a local file versus a hosted file.
Ideas? I thought raw HTML would always be respected? (It is in bookdown and RStudio, which is what I'm converting from.) I've tried this with multiple acceptable video clips. All mp4.
When github.com renders an image in a readme.md, it automatically links the image in an a tag.
Using either
![][http://example.com/path/image]
or
<img src="http://example.com/path/image" />
The actual rendered content will appear as
<img src="https://camo.githubusercontent.com/8a545f12e16ff12f..." alt="" data-canonical-src="http://example.com/path/image" style="max-width:100%;">
I understand the github image caching (on camo.githubusercontent.com), and that's fine, but I don't want the a tag to wrap my image.
I'm not sure if this is part of the github flavored automatic URL linking, or something specific images.
I am able to provide my own link (using my own a tag), but what I really want is no link, no a tag.
Is this possible?
thanks!
You can wrap the image in a link that points to #:
[](#)
<img src="http://example.com/path/image" />
It will still be clickable, but won't open a new page, at least.
You can use the <picture> tag to prevent GitHub from auto linking to the image.
<picture>
<img alt="Image Alt Text" src="http://example.com/path/image">
</picture>
Pass linkImagesToOriginal: false to gatsby-remark-images should be able to resolve this issue.
{
resolve: 'gatsby-remark-images',
options: {
linkImagesToOriginal: false,
},
}
If you click on your badge, you think to see an image, but it is usually a html page with html-tags. That's why badges links to a different page by default.
#Tamás Sengel answer isn't bad, but looks like there were side effects like visual glitches #Igor mentioned.
I solved this problem by simply referring to my github page:
[](https://github.com/Ismoh/NoitaMP)
It's a static badge build with shields.io and shouldn't link to source.
The snippet below is exactly what you need to "remove" the a tag for images. Markdown will render all the img's tags around the a. For me (using Gatsby) the option "linkImagesToOriginal: false" removed perfectly and now all the images are NOT clickable.
{
resolve: 'gatsby-remark-images',
options: {
linkImagesToOriginal: false,
},
}
This method works the best for me: linking the image to itself
<a id="image1" href="#image1"><img alt="alt text" src="http://example.com/path/image.png" /></a>
The theme I've chosen has decided to reduce photosets to the first frame, instead of giving the full photoset. I want a consolidated photoset shown on my page, instead of the first, single. I have no idea how to do this. I've tried looking on here, using this:
{block:Photoset}
{block:Photos}
<img src="{PhotoURL-500}" class="photoset-img" />
{/block:Photos}
{/block:Photoset}
It worked, sort of. All the photos of the set were there, but they were large and connected together. The images in the photoset are now stacked vertically atop one another instead of side by side and are taking up a lot of space.
The theme block / variable below will generate an iframe containing the images, laid out, as they were set on the dashboard.
{block:Photoset}
{Photoset-500}
{/block:Photoset}
I am creating an email template which has to display images from external website. I had placed some <img> tags for rendering the images and there are some <td> tags with background-image property set in inline css of the elements.
Now, when an email is received in outlook, the images are not displayed (this is expected as the images are not embedded). And I click the download images to see the images properly. The images in <IMG> tag are only shown and the background-image for the <TD> is not rendered.
Any views on solving this problem?
Thanks!
At last I found the answer.
Outlook 2007 does not use the Internet Explorer's rendering engine for loading HTML content. Instead it uses Word 2007 HTML and CSS capabilities.
Because of this CSS attributes such as background-image is not supported. And hence it's not possible to set a background image for HTML elements in outlook using standard CSS tags.
More info is available at http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx
Background images are not supported in Outlook. As a best practice, you should never use background images in HTML emails. If you must have a background, you can use and image PLUS a solid color. Those with email clients that support background images will get the images, and those that don't support it will fall back to the solid color.
There is actually a method to use background images in HTML emails in Outlook.
As Chaitanya mentions it can't be done with CSS, but it can be done via VML.
The technique is a bit more involved than using background: url(....) and I don't use it as frequently as I would use the CSS technique (if it worked in Outlook). But it is very useful.
I've used it successfully on a number of campaigns.
Full instructions here: including a list of email clients that support this technique.
http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197
Also, here's a guide from Campaign Monitor: http://www.campaignmonitor.com/css/ which proved super helpful for me.
There is a way of displaying HTML images.
Right html emails rendered as MSWord document in outlook.
I got the solution from this https://stackoverflow.com/a/12693917/413032 post.
So we need an alternate.
In fact you may open your html email in MSWORD and finding what seems wrong and considering what can be an alternate gives idea.
Here is what I did ;
Added v namespace to html tag
< html xmlns:v="urn:schemas-microsoft-com:vml"
Added v's style to head block
< head >
<style type="”text/css”">
v\:* { behavior: url(#default#VML); display:inline-block}
</style>
In table or where you need add your MSWord alternate
<table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960">
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody> ....
That is all.
Sure it will be a MSWord render. And more, as you notice we use absolute positioning...
Anyway this is a workaround and solves the issue in a way.
We hope one day MS-Outlook renders html e-mails with a web browser not with MS-Word.
This works in Gmail,
I tried this to show div with image in email newsletter, try inline css, sending email guidelines here