How to break page where images span pages ?

[SeaDude]

Hello,

How do I automatically insert a page break where images span pages?

Example:

• 
• The green bordered image is actually an HTML table with an image embedded in the <td>.
• I need to break the page above this table (automatically)
• Can this be done using this extension?

[hackslashdave]

I had a few issues with combining html and md - try this:

<div class="page"></div>
&zwj;
<table><tr><td><img src=""/></td></tr></table>

[SeaDude]

Thanks for the reply! I'm not exactly sure what you mean.

Here is the markdown shown in the screenshot above:

5. Click the `Media` tab on left screen 
6. Click `Upload` then select a logo from your machine
7. Set the `Image` property of `imgLogo` to the filename that was just uploaded

<table>
    <tr>
        <td style="border: 5px solid; border-collapse: collapse; padding:0px; border-color: #27ad74;">  
            <img src="assets/images/test.png"/> 
        </td>
    </tr>
</table>

Are you saying to insert a <div> tag and add &zwj above the <table>?

[SeaDude]

Apparently, that is exactly what you were saying (:)) because it worked!

Could you elaborate on how it works?

Thank you

[SeaDude]

Interesting!

• I don't know what the significance of the <div class="page" is
• I now know ‍ is an invisible Unicode char!

[hackslashdave]

Ah, in the documentation they tell you to use:

<div class="page"/> for a page break.

I think somewhere in the code the class "page" is translated into css:

page-break-after: always;

But I found it needed the closing tag instead (</div>)

The ‍ was after a bit of trial and error,   gave an ugly space above the table so I looked into other "empty characters" to try and hack around that and discovered ‍ myself - glad I could help