Logo next to title in HTML output

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Logo next to title in HTML output

bcammett
Is it possible to place a logo image next to the title in HTML output, like this:

<logo image> The Dangerous and Thrilling Documentation Chronicles

If yes, hopefully it's not too complicated...
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Logo next to title in HTML output

Ted
Yes. Try this

= image:images/icons/example.png[] The Title
:icons: font
:exampleImage: images/icons/example.png

This example shows a logo image in the title.


== image:{exampleImage}[] Heading One

This also works.


== icon:archive[] Another Heading

This shows an icon in the header.
- Ted @TedAtCIS
Reply | Threaded
Open this post in threaded view
|

Re: Logo next to title in HTML output

bcammett
Thanks, that worked. Only issue is the title wraps to the next line, underneath the image with extra white space. Ideally, the text would wrap under the first line of text. Assuming there's no way to address that, other than shortening the title.

Thanks again.
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Logo next to title in HTML output

Ted
For best results the logo should be about the same height as the H1 style and no extra white space on the image. A long title will wrap on smaller screens, so keep it as short as possible.

Placing a logo in the title probably is not a best practice. 

But if you really want to achieve 'that look', you could do something like this with a table. Here I'm using the first Heading (H2).  

[frame=none]
[grid=none]
[%autowidth]
|====
|image:images/icons/example.png[,400] a| == A Really Long Heading That Probably Needs To Be Shortened
|====





- Ted @TedAtCIS
Reply | Threaded
Open this post in threaded view
|

Re: Logo next to title in HTML output

mojavelinux
Administrator

On Mon, Jul 25, 2016 at 10:20 AM, Ted [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Placing a logo in the title probably is not a best practice. 

True. To get something working quickly, it's perfectly reasonable. For mature documents, I recommend adding the image using CSS, adding a role to the title if necessary to trigger the styling.

If you do place the image directly in the title and want to control the wrap behavior, again I recommend tapping into CSS. You really shouldn't be afraid to modify or augment the CSS when you are producing HTML. In fact, that's the norm.

-Dan

--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux