Stream: IG creation
Topic: resize an image in the IG
Diane (Jul 28 2021 at 22:26):
@Eric Haas Lloyd McKenzie told me that you are the markdown guru.
I know that Github flavored markdown has the syntax of  for attaching images. But, that does not allow for image resize.
Most sites (but not all) that rely on Github flavored markdown also allow the html syntax of <img src="fhirdata.png" width=50% height=50%> for resizing images. If we include this html syntax to resize our image, will it make errors in the IG or otherwise not work?
Eric Haas (Jul 28 2021 at 23:34):
I use html, lquid, css styling, and bootstrap classes.
Lloyd McKenzie (Jul 28 2021 at 23:35):
Inline? IGs should generally be defining any supplemental css files because you can't use those without messing with the templates and work groups shouldn't be messing with the standard templates.
Eric Haas (Jul 28 2021 at 23:37):
here is a small image _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="img-responsive img-rounded center-block" alt="{{include.img}}" width="20%">
</figure>
<p></p>
</div>
Eric Haas (Jul 28 2021 at 23:39):
then in the markdown I add this liquid tag:
{% include img.html img="yearly-updates.png" caption="Figure 1: US Core Yearly Updates" %}
Eric Haas (Jul 28 2021 at 23:40):
I have 3 or 4 diifferent include files depending on the size I want.
Diane (Jul 29 2021 at 00:26):
Thanks for explaining your process.
Jose Costa Teixeira (Jul 29 2021 at 11:27):
Diane said:
I know that Github flavored markdown has the syntax of  for attaching images. But, that does not allow for image resize.
Most sites (but not all) that rely on Github flavored markdown also allow the html syntax of <img src="fhirdata.png" width=50% height=50%> for resizing images. If we include this html syntax to resize our image, will it make errors in the IG or otherwise not work?
No, it won't cause the IG to not work.
Jose Costa Teixeira (Jul 29 2021 at 11:28):
you can use CSS and have such includes (perhaps we should put some of them in the base template, but I'd like to see how they'd look like)
Jose Costa Teixeira (Jul 29 2021 at 11:28):
but you can do it in a easy and simple way.
Jose Costa Teixeira (Jul 29 2021 at 11:29):
here's a few ways to add resized images:
Jose Costa Teixeira (Jul 29 2021 at 11:29):
1
<img src="fhir-logo.png" alt="logo" width="200"/>
<br clear="all">
2
<img src="fhir-logo.png" alt="logo" width="200px"/>
<br clear="all">
3
<img src="fhir-logo.png" alt="logo" style="width:200px"/>
<br clear="all">
4
{:width="200px"}
<br clear="all">
And 5
![logo]
<br clear="all">
[logo]: fhir-logo.png
{:width="200px"}
Eric Haas (Jul 29 2021 at 14:36):
you need to consider responsive behavior for multiple devices too.
Last updated: Apr 12 2022 at 19:14 UTC
