styles icon indicating copy to clipboard operation
styles copied to clipboard

Image width

Open butterflyology opened this issue 7 years ago • 1 comments

Images in the following examples appear too large when rendered with gh-pages. Specifying the width of the image using HTML results in the image not rendering at all.

Is there a way to specify the width manually? If not, it would be very nice to be able to specify the width of the image in Markdown, could we create an additional image CSS class to have more flexibility.

http://www.datacarpentry.org/rr-automation/04-functions-for-figures/ http://www.datacarpentry.org/rr-literate-programming/02-literate-programming/

butterflyology avatar Jan 12 '17 22:01 butterflyology

<div class="r highlighter-rouge"><pre class="highlight"><code>library("ggplot2")
ggplot(data = gapminder, aes(x = gdpPercap, y = lifeExp)) +
  geom_point()
</code></pre>
</div>

<p><img src="../fig/rmd-08-lifeExp-vs-gdpPercap-scatter-1.png" title="plot of chunk lifeExp-vs-gdpPercap-scatter" alt="plot of chunk lifeExp-vs-gdpPercap-scatter" style="display: block; margin: auto;" /></p>

is render as

screenshot_2017-01-13_11-22-10

You can see it live.

The examples that you provide,

</span><span class="n">gdp</span><span class="w"> </span><span class="o">%&gt;%</span><span class="w">
    </span><span class="n">filter</span><span class="p">(</span><span class="n">country</span><span class="w"> </span><span class="o">%in%</span><span class="w"> </span><span class="nf">c</span><span class="p">(</span><span class="s2">"United States"</span><span class="p">,</span><span class="w"> </span><span class="s2">"France"</span><span class="p">,</span><span class="w"> </span><span class="s2">"Zimbabwe"</span><span class="p">,</span><span class="w"> </span><span class="s2">"South Africa"</span><span class="p">))</span><span class="w"> </span><span class="o">%&gt;%</span><span class="w">
    </span><span class="n">ggplot</span><span class="p">(</span><span class="n">aes</span><span class="p">(</span><span class="n">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">year</span><span class="p">,</span><span class="w"> </span><span class="n">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">lifeExp</span><span class="p">,</span><span class="w"> </span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">country</span><span class="p">))</span><span class="w"> </span><span class="o">+</span><span class="w">
    </span><span class="n">geom_point</span><span class="p">(</span><span class="n">aes</span><span class="p">(</span><span class="n">size</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">gdpPercap</span><span class="p">))</span><span class="w"> </span><span class="o">+</span><span class="w">
    </span><span class="n">geom_line</span><span class="p">()</span><span class="w"> 
</span></code></pre>
</div>

<p><img src="../figure/unnamed-chunk-1-1.png" title="plot of chunk unnamed-chunk-1" alt="plot of chunk unnamed-chunk-1" style="display: block; margin: auto;" /></p>

is render as

screenshot_2017-01-13_11-22-25

You can see it live.

I imagine that R lesson writers set something to set the size of the images.

Specifying the width of the image using HTML results in the image not rendering at all.

Could you send a pull request showing this bug to https://github.com/swcarpentry/lesson-example?

Is there a way to specify the width manually?

We don't want to do that since doing that way readers will have a bad experience in some devices.

rgaiacs avatar Jan 13 '17 11:01 rgaiacs