6

I added a pkgdown site to my vcdExtra package and cannot figure out how to control the size of the package hex logo that appears on the main page built by pkgdown, https://friendly.github.io/vcdExtra/index.html

The README.md file contains a line to insert the image at 200 pixels

# vcdExtra <img src="man/figures/vcdExtra-logo.png" align="right" height="200" />

which appears on GitHub as shown below

enter image description here

Yet, when built by pkgdown the index.html page looks like this, ignoring the height = attribute. How can I fix this? I've looked at the source of other pkgdown sites and don't see anything substantially different.

enter image description here

user101089
  • 3,756
  • 1
  • 26
  • 53

1 Answers1

8

The height in the style property has precedence, and pkgdown sets it to "auto", whereas it looks as though Github leaves it unset. Your HTML has

<img src="reference/figures/vcdExtra-logo.png" align="right" height="200">

so the CSS overrides the setting. Set it to

<img src="reference/figures/vcdExtra-logo.png" style="float:right; height:200px;">

and it should work, or do both for a tiny speed improvement according to some sources:

<img src="reference/figures/vcdExtra-logo.png" align="right" height="200" style="float:right; height:200px;">

The theory behind the speed boost is that the browser uses the HTML settings to set up the page then the style settings to modify it. If there's no modification, it's quicker.

user2554330
  • 37,248
  • 4
  • 43
  • 90
  • This is a good explanation. It also reminds me that a route to debugging such questions is to examine what `pkgdown` does in the HTML file. – user101089 Feb 21 '22 at 17:27