Introduction
When I first joined Hive, I leaned on PeakD formatting guides to learn some important tricks, quickly. Here's just a few for reference:
Those articles were very helpful and sometimes I still go back to them to see if I'm missing anything important or when I don't remember how to do something.
But after a while I starting bumping into situations where the formatting wasn't to my liking or had some limitations. By fiddling around a bit I managed to find solutions to some of those situations and that is what I aim to explain with this blog post.
Note: these solutions do not work on Ecency or Hive.blog.
First example
An imported image (it was dragged from the file explorer to the editing box in PeakD) with a paragraph of text immediately after.
This is the markdown
And this is the result
This AI image was generated at https://creator.nightcafe.studio/ by me using one of their free models.
Centering images without explicit alignment HTML
This one is easy. If you keep the default caption, which corresponds to the file name (mkhWAeEYzVJHWnl3DvOZ--4--16vlm_50pct.jpg), the caption is omited and the image aligns to the left by default, as demonstrated above. However, if you just modify the caption then image will become automatically centered:
![Mage lady casting a spell](
This AI image was generated at https://creator.nightcafe.studio/ by me using one of their free models.
Managing line break size between an image and a paragraph
In the initial example the paragraph starting with "This AI image was generated..." is displayed right below the image, without any meaningful spacing, even if you add a line break yourself with the Enter key.
If you wish to create a wider gap you can use for example <br>:
 before and after the <br> the gap is very wide, as demonstrated above. The same is true if you add one line break before and another after.
The trick to make the gap slightly smaller is to add a line break only after <br>, like so:
</blockquote>
Quoting HTML
To actually quote or escape HTML (note that markdown is not HTML), <blockquote></blockquote> won't be enough. In this case you need to place the HTML tags between 3 backquotes ```. You can see the outcome in the section just above.
Second example
An image aligned to the one side using divs:
<div class="pull-right">
https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg
</div>
A mysterious woman draws a light spell during a starry night. She's in a planet in another galaxy. A gentle breeze makes her red hair and her green long dress flow to her left flank. What could the spell be? We don't know. All we know is that a bundle of light strings flow from her hand and linger in the hair? Is she human? Or is she alien? We cannot say. But her abilities are clearly magical and she yields them with poise and grace. Could it be a man with long hair? Possibly. Are they alone? We don't know. Such a mysterious scene. There is definitely a lot of unanswered questions left to the observer's imagination.
Preserving image captions when setting lateral alignment
But now how does one add a caption under the image, similar to the first example? When using divs the caption markdown doesn't just work in any condition. There is a small trick: there needs to be a line break between <div class="pull-right"> and the markdown with the caption and the image URL (and nowhere else):
<div class="pull-right">
</div>
A mysterious woman draws a light spell during a starry night. She's in a planet in another galaxy. A gentle breeze makes her red hair and her green long dress flow to her left flank. What could the spell be? We don't know. All we know is that a bundle of light strings flow from her hand and linger in the hair? Is she human? Or is she alien? We cannot say. But her abilities are clearly magical and she yields them with poise and grace. Could it be a man with long hair? Possibly. Are they alone? We don't know. Such a mysterious scene. There is definitely a lot of unanswered questions left to the observer's imagination.
It is also possible to get a similar result with sub and center, but the end result is not italicized and there is a bigger gap between the image and the caption, which I don't like so much. The markdown version above is also simpler and faster to put in place than this HTML alternative.
<div class=pull-right>
https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg
<center><sub>Woman draws light magic at night</sub>center>
</div>
Woman draws light magic at night
A mysterious woman draws a light spell during a starry night. She's in a planet in another galaxy. A gentle breeze makes her red hair and her green long dress flow to her left flank. What could the spell be? We don't know. All we know is that a bundle of light strings flow from her hand and linger in the hair? Is she human? Or is she alien? We cannot say. But her abilities are clearly magical and she yields them with poise and grace. Could it be a man with long hair? Possibly. Are they alone? We don't know. Such a mysterious scene. There is definitely a lot of unanswered questions left to the observer's imagination.
Adding source links to captions
Oftentimes you need to source an image in the caption. In this case I couldn't make it work with markdown (it tries to display the image and fails). So the solution I found was to use the HTML solution just above.
When aligning the image to a side there are a few caveats though:
There must be an empty line break between the image URL and the caption;
The whole caption line including the center and sub tags must be in a single line without breaks;
I couldn't find a way to keep the caption snugly close to the image. If someone finds another way to place the caption closer to the image, let me know!
<div class=pull-right>
https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg
<center><sub>Woman draws light magic at night [source](https://creator.nightcafe.studio/studio?open=creation&panelContext=%28jobId%3ACbqpZJgFulBHAcgUYZ65%29)
</div>
Woman draws light magic at night source
A mysterious woman draws a light spell during a starry night. She's in a planet in another galaxy. A gentle breeze makes her red hair and her green long dress flow to her left flank. What could the spell be? We don't know. All we know is that a bundle of light strings flow from her hand and linger in the hair? Is she human? Or is she alien? We cannot say. But her abilities are clearly magical and she yields them with poise and grace. Could it be a man with long hair? Possibly. Are they alone? We don't know. Such a mysterious scene. There is definitely a lot of unanswered questions left to the observer's imagination.
If the image is going to be centered, the solution is simpler. The caption will also be placed closer to the image. No empty line breaks in this case, but the sub line must have a line break to separate it from the URL.
<center>https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg
<sub>Woman draws light magic at night [source](https://creator.nightcafe.studio/studio?open=creation&panelContext=%28jobId%3ACbqpZJgFulBHAcgUYZ65%29p)
Woman draws light magic at night source
Third example
Two images aligned side-by-side in the same row, size adjusted automatically to fit. The images in this example are for a Gods Unchained card, sourced from the official server. If it's just 2 images side by side, then using divs as demonstrated above works as intended (notice the like break before the image link):
<div class=pull-left>
</div>
<div class=pull-right>
</div>
More than 2 images in the same row
If you need more than 2 images side-by-side then I couldn't find a way with divs. The solution I found though was to place all the images in a markdown table. The template is
|column1|column2|column3|
|-|-|-|
And then you replace 'column#' with the markdown link to each image. It looks ugly and unwieldy, but it works. You can add spaces to make the markdown easier to read, but you cannot add line breaks.
If you need more columns, just expand the table.
|  |  |  |  |
|-|-|-|-|
One downside of this method is that the length of the caption changes the scaling of the image. So if you want all the images to be scaled equally, the caption length should be similar.
|  |  |  |  |
|-|-|-|-|
You can use whitespace characters (i.e, ) until all captions are the same size, but this will make the markdown even more confusing.
|  |  |  |  |
|-|-|-|-|
I hope you find these tricks helpful to improve the formatting of your posts.
If you know any other cool tricks let me know in the comments and I will add them to this post.
Thanks for reading!