Book Cover

[Boadzie]

How can I add a book cover(image) to paged documents?

[iamgio]

Hi @Boadzie, Quarkdown doesn't support it natively yet. Would you mind opening an issue with a bit more context about how you'd like to use a feature like this? I'd be excited to work on it.

That being said, here's a non-native workaround using .css:

.doctype {paged}

.css
    .pagedjs_page[data-page-number="1"] {
        background-image: url("your/image.jpg");
        background-size: cover;
    }
    .pagedjs_page[data-page-number="1"] [class*="pagedjs_margin"] {
        display: none;
    }

<<<

.repeat {20}
    .loremipsum

Worth noting that this image won't be portable, as it won't be tracked by the media storage. A native implementation will fix this.

[iamgio]

I've just wrapped up a new feature: scoped page formatting. Starting with v1.15, released next week, you'll be able to do this instead of my previous response:

.doctype {paged}

.pageformat pages:{..1} margin:{0}

.css
    .cover figure {
        margin: 0;
    }

.container classname:{cover} fullwidth:{yes}
    ![Cover](your/image.jpg)

<<<

.repeat {20}
    .loremipsum

This saves the image to the media storage, so it's portable. Sure, you'll still need some CSS, but it's much less intrusive that the previous snippet.

[Boadzie]

This approach looks good. I will try it out once it's out. Thank soo much. I am also working on a Quarkdown Editor. I will share details once its done.

[iamgio]

Cool, thanks. Just FYI: an official online editor is planned for the end of the year

[Boadzie]

Great, happy to hear that!

[iamgio]

Good news @Boadzie, from v1.15 (coming these days) you'll be able to have a cover without the need for CSS thanks to a new force-override behavior added to .container's margin:

.doctype {paged}

.pageformat pages:{..1} margin:{0}

.container fullwidth:{yes} margin:{0}
    !(100%)[Cover](cover.png)

# Introduction

[Boadzie]

Great! Looking forward to it. Thank you