Stream: IG creation
Topic: markdown figures
John Moehrke (Mar 04 2021 at 17:09):
I am using markdown in my IG. I have some PNG or SVG figures I want to include. I have used the markdown "!" method, but the results tends to have some problems.
- this tends to get rendered with the text that follows on the right, as if two column mode. Not a bad problem, but in one case I want to force this to not happen.
- the results does not seem to scale the images, they stay at full size
- I have tried adding the
<div style="clear: left"/>, but that seems to pull the footer color bar up over the whole page.
Is there some recommendations for how to resolve these? Is there a better way to pull in an image to narrative?
Jose Costa Teixeira (Mar 04 2021 at 17:53):
John Moehrke (Mar 04 2021 at 18:02):
Yeah that worked to add a break
<br clear="all" />
John Moehrke (Mar 04 2021 at 18:02):
is there a solution to marking the images as scalable?
Eric Haas (Mar 04 2021 at 18:21):
I use this include file
<!-- all this Bootstrap html for getting an image to fit nicely in text - 640 pix wide -->
<div>
<figure class="figure">
<figcaption class="figure-caption"><strong>{{include.caption | default: ""}}</strong></figcaption>
<img src="{{include.img}}" class="figure-img img-responsive img-rounded center-block" alt="{{include.img}}">
</figure>
<p></p>
</div>
and an example of the liquid i use to insert images.
{% include img.html img="US_Core_Growth_Path.jpg" caption="Figure 1: Growth Path of US Core" %}
Eric Haas (Mar 04 2021 at 18:23):
this uses the bootstrap classes for responsive images
John Moehrke (Mar 04 2021 at 19:05):
yuck. Ill live with what I have.
David Pyke (Mar 04 2021 at 19:25):
Eric, I assume you put that liquid code in the middle of the markdown and then put the html in the images directory?
Jose Costa Teixeira (Mar 04 2021 at 23:59):
I think that html would normally go into the includes folder
Eric Haas (Mar 05 2021 at 00:02):
the html is in the includes folder
the liquid in the markdown
Eric Haas (Mar 05 2021 at 00:03):
the image in the image directory
John Moehrke (Mar 05 2021 at 14:04):
why isn't the default style to be scalable?
Jose Costa Teixeira (Mar 05 2021 at 16:37):
It's a markdown thing
John Moehrke (Mar 05 2021 at 17:02):
I thought that the build process applied style overall... yes, markdown doesn't include this. I am happy for the simplicity of markdown.
Eric Haas (Mar 05 2021 at 19:34):
I don't know why images are not working in markdown like you expect. I just did this a while back to just make the images work reliably instead of trying to figure out why.
Frank Oemig (Mar 06 2021 at 09:10):
If someone has good advice what exactly to do I would appreciate that. For plantuml it works fine given that one can control how plantuml arranges the items.
Jose Costa Teixeira (Mar 06 2021 at 12:13):
@Frank Oemig what do you mean? Advice on how to do what?
Jose Costa Teixeira (Mar 06 2021 at 12:16):
I think the images are working as expected. John asked why they are not scalable. Any styling can be handled by markdown if we define that styling - in the markdown itself or by referencing some includes files
Last updated: Apr 12 2022 at 19:14 UTC
