Add button to book_layout.html

[StephenJD]

I want to add a print button to every page in my book_layout.
I can add
<a href="javascript:window.print()"><img src="click-here-to-print.jpg" alt="print this page" id="print-button" /></a>
This does what I want, but it doesn't find my image.
The image is in /static/img/ and in /assets/images/

What is the correct path so the image is found from all pages?

[chrede88]

Try this:

{{ $image_src := printf "%s/%s" "static/img/" "click-here-to-print.jpg" | relURL }}
<a href="javascript:window.print()"><img src="{{$image_src}}" alt="print this page" id="print-button"></a>

[StephenJD]

Thanks. I tried that, but it still doesn't retrieve the image. To check what is being constructed I did: {{ $print_img := printf "%s/%s" "static/img/" "click-here-to-print.jpg" | relURL }} <p>{{$print_img}}</p> <p>{{"click-here-to-print.jpg" | relURL}}</p> It showed: /static/img/click-here-to-print.jpg /click-here-to-print.jpg I also tried <img src="/click-here-to-print.jpg" > but non of these works. On 19/01/2021 01:46:18, Christian Olsen <[email protected]> wrote: Try this: {{ $image_src := printf "%s/%s" "static/img/" "click-here-to-print.jpg" | relURL }} <a href="javascript:window.print()"><img src="{{$image_src}}" alt="print this page" id="print-button"></a> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [#2110 (comment)], or unsubscribe [https://github.com/notifications/unsubscribe-auth/AAGLKXPLKTJKMST4276TMG3S2TP6VANCNFSM4WHZEAPA].

[chrede88]

Are you sure you have the image in static/img/? I took a quick look at your repositories, found one book-starter repo. This one only have a static/media/ folder. Maybe that's where you are storing the image!?

[StephenJD]

I hadn't done a push recently. Testing locally. I've pushed now, so you can see it is there. On 19/01/2021 21:36:49, Christian Olsen <[email protected]> wrote: Are you sure you have the image in static/img/? I took a quick look at your repositories, found one book-starter repo. This one only have a static/media/ folder. Maybe that's where you are storing the image!? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [#2110 (reply in thread)], or unsubscribe [https://github.com/notifications/unsubscribe-auth/AAGLKXNNZE3YSL2RGEXCEDDS2X3PDANCNFSM4WHZEAPA].

[chrede88]

My bad! The path is relative to static. So change it to:

{{ $print_img := printf "%s/%s" "img/" "click-here-to-print.jpg" | relURL }}
<a href="javascript:window.print()"><img src="{{$print_img}}" alt="print this page" id="print-button"></a>

Also, <img> is not closed with a / in standard html 😃

[StephenJD]

Thanks for your help. That fixed it. Hugo documentation says that relURL is the path set by baseURL in config.toml, but it seems that in fact it is the static folder! It would be really helpful if this could be documented clearly. I could find nothing on wowchemy about inserting images! Thanks again. On 19/01/2021 23:22:23, Christian Olsen <[email protected]> wrote: My bad! The path is relative to static. So change it to: {{ $print_img := printf "%s/%s" "img/" "click-here-to-print.jpg" | relURL }} <a href="javascript:window.print()"><img src="{{$print_img}}" alt="print this page" id="print-button"></a> Also, <img> are not closed with a / in standard html 😃 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [#2110 (reply in thread)], or unsubscribe [https://github.com/notifications/unsubscribe-auth/AAGLKXJMCEQNH5SUB5D2BXDS2YH25ANCNFSM4WHZEAPA].