Linking Images Using Markdown / HTML

in #ctptalk5 months ago

MarkDown UGH!!

I know what you are thinking but it is not that hard. It can be frustrating especially when you also have to use a little HTML to get the results you want.

For example:

Example headline

In Markdown this is actually written:

## Example headline

Example headline

See how I centered the above headline for that I just used HTML and wrote it like this:

<center><h2>Example headline</h2></center>

Now We Will Try Linking An Image

As you can see sometimes it is just easier to use straight HTML rather than trying to make Markdown do something advanced.

Below you will see a link to my favorite Hive BlockChain application ListNerds. First I need to grab an image then the code to make it all happen.

Below is the linked image

ListNerds Link

I used straight HTML in a Hive Engine Frontend. Below is the actual code:

<center><a href="https://listnerds.com/@chriss"><img src="https://listnerds.com/banner/250x250/listnerds.png" alt="ListNerds Link" style="width:250px;height:250px;"></a></center>

the Center tags of course centered the document. Href= is where I put my affiliate web address, and src= is the web address to the image, last is style= and that is just the size of the image in pixels.

As you can see centering anything is pretty easy especially if you use HTML. Setting up your links with nice professionally done banners on the Hive blockchain is pretty easy. You can use the above coding examples just do not forget to replace my info with yours.

Feel free to reach out if you have any questions.

Thank you so much 😄

untitled.gif

Sort:  

Thanks for the info. This tip will be helpful as I often upload images to my server before loading them on HIVE.

I thought that the point of Markdown was to protect the system from problematic HTML commands; so I never even tried HTML commands.

Is there any documentation about what HTML is allowed and not allowed?

PS: If you uploaded the images, you can make the image hot simply by putting the url for the image in square brackets and the link in round brackets ... which is the way that markdown handles text links.

I use my own server to host my images and then just link them over. I do not know of any documentation I have been doing some trial and error and @blainjones has been a huge help 😀

I use my own server to host my images and then just link them over.

I agree that this is the most professional way to include images in HIVE posts. I wish that HIVE did a better job indicating the canonical source of images. I will start using the raw HTML on my posts.

Examining Your Post on HiveBlocks.com

I looked at your post on HiveBlocks.com

https://hiveblocks.com/ctptalk/@mba2020/linking-images-using-markdown-html

The raw post on the blockchain seems to include both the markdown and the HTML. Different HIVE front ends might interpret the HTML differently. If the programmer of a front end decided to run striptags() on each post, then it would strip the images.

Of course, the programmers can do anything they want when displaying the posts. They could as easily mess the display of markdown ans the display of HTML.

Congratulations @mba2020! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You received more than 4250 upvotes.
Your next target is to reach 4500 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Check out the last post from @hivebuzz:

Hive Power Up Month - Feedback from day 25