Skip to content

Does anyone know how to make a post like this?

Derenik··1 votes·1,684 views
[Champion Concept] - Kay'Ohe, the Sower of Corruption

Hi, Not very good with the HTML and such, so was wondering if someone can tell me, if it's easy, how to make a post like this?

Would specifically want to know how you put a picture or icon next to a text.

Thanks for the help.

13 Comments

MXXIV5 votes

The syntax used here is called Markdown. Sadly, board developers have cut away many of markdown's great features, leaving you with but a few options. Specifically, these things are not included in the editor:


#Heading

#Heading

Begin line with hashtag (#) to make a heading.

#Heading level 2

##Heading level 2

Second level heading. There's also 3rd level with three hashtags.

#Horizontal line

---

Use three commas to display horizontal line.

#Images (disabled by forum developers because they think they can do better)

!DESCRIPTION

Markdown has it's own, very reliable syntax for adding images. Instead, insert image url directly in the text. Usually, it renders properly. Of course, images with spaces in the URL will not work, replace spaces with %20.


#Nested lists

[SPACE]\1. item level 1 [SPACE][SPACE]\1. item level 2 [SPACE]\2. Item level 1

  1. item level 1
  2. item level 2
  3. Item level 1

There can be at least 3 levels of nesting, just add more spaces. My test:

  • 1
    • 2
      • 3
        • 4
          • 5
            • 6

#Disable formatting characters

\*no bold here\*

Put backslash before any functional character (*, _, [, ], --- and so on) to have it rendered normally.

#Text style

  1. *italic*
  2. **bold**
  3. ***both***
  4. ~~strikethrough~~
  1. italic
  2. bold
  3. both
  4. strikethrough

#Getting post source code

Two ways:

  1. Quote the post. Anything quoted will remain hidden for you
  2. Copy some unique word (or words) from post. Then press CTRL+U for page source code. Then find the post source by CTRL+F. Thank retarded boards developers for parsing Markdown by javascript (that's why page lags after loading btw).
Pryotra1 votes

hmmm... let me test this with the one thing I was curious about

http://hydra-media.cursecdn.com/wow.gamepedia.com/c/c0/Ability_warlock_howlofterror.png?version=284e3a7a4a4a155549bed11bc7edfc47

Looks like they expanded beyond imgur for images. Either way, this level of formating is fairly good.

MXXIV1 votes

They use https://embed.ly/ for any URL's they find in posts. That's why images don't work in previews (while ! markdown syntax worked well). No need to mention it's much slower, as it goes through 2 proxies.

Pryotra1 votes

To clarify, I meant the post linked in the OP was well formatted. That person took some time on it, and it shows.

And that being how they made images work does make sense. At the same time, I can see the value of using someone else's hard work as a developer. It's a balance.

DrCyanide2 votes

I'm not perfect at this stuff, but I know some things.

First off, this isn't done with HTML. I don't know what it's called, but it's not HTML.


See that line? That was made by typing ---

Wow, that's cool! But how did you type it the second time? Shouldn't it have made a dash?

To prevent something from being 'translated' as formatting, put a \ in font of it. FYI you can make the quote box with > before the text.

## makes nice bold headers.

**makes normal bold text **

make italicized text using *words go here*

***Do both at the same time! *** using ***words go here ***

Note: it looks like italic phrases don't like escaping the *.

words You can cross out words with ~~ on both sides. Again, this one doesn't like the escape character.

Pictures are really easy to include in general. Just paste in the link to your image. I don't know how they got the image next to the text, but it might be that they didn't put the URL on a new line.

  • bullet lists start with a * followed by a space. Note that there has to be an empty line above it.
  • bullet points under the first don't need the extra line
  1. Numbered lists follow the same rules
  2. There is a problem with numbered lists, in that you could put 1. For every point and it would get translated to the next number.

Example:

  1. My first point is this

And

  1. My second point is this

See the screenshot I attached. I know some people can insert the attachments in line, but I'm not sure how they do it.

Hyrum Graff2 votes

The formatting is called Markdown.

http://hydra-media.cursecdn.com/wow.gamepedia.com/2/25/Ability_warlock_jinx.png?version=5b3ce37a19b045775a94a710be82dc24 Test

Yeah, images on the same line just by typing after the URL. Quote this post if you want to see how I did that, exactly. If you have any other questions, I'd be happy to answer them (I've been using this platform for a long time).

Derenik1 votes

Thanks! I managed to figure it out. :) I wanted to know cause I was gonna do a champion concept myself. I just finished it. Take a look if you want. http://boards.na.leagueoflegends.com/en/c/skin-champion-concepts/ptxV9efL-champion-concept-kahana-the-prodigy-of-light

CdrRogdan1 votes

This cannot be right. I've quoted multiple sources now and posted links on a multitude of attempts but they always show only the link. I've tried using the src syntax and /img brackets along with formating and nothing seems to work. Sometimes when I quote where there should be images, there is no text or link.

Even copying a quote (in it's entirety), where links exist for the photo, and reposting it, earns me a link instead of a photo.

Image of Yaktocat GRRRRRRRRRR

What the hell is going on?

Pryotra2 votes

{quoted}

This cannot be right. I've quoted multiple sources now and posted links on a multitude of attempts but they always show only the link. I've tried using the src syntax and /img brackets along with formating and nothing seems to work. Sometimes when I quote where there should be images, there is no text or link.

Even copying a quote (in it's entirety), where links exist for the photo, and reposting it, earns me a link instead of a photo.

Image of Yaktocat GRRRRRRRRRR

What the hell is going on?

https://octodex.github.com/images/yaktocat.png

Quote me, it's just the url. If you format it like a link you make a hyperlink instead.

CdrRogdan1 votes

Thank you for the response, and oh god I get it now.. uuuugh. The preview thing shows incorrectly and I kept thinking it was just failing again! Okay good I can respost my thingy now! Yay!

Hyrum Graff1 votes

It's actually super nice. It used to embed whether you posted it as a link OR as a hyperlink.... which meant that you had this awkward situation where you linked a youtube video and it would replace the words "youtube video" with the embed of the video, making your post look terrible and incomprehensible.

For clarity, the above would have looked like this:

It's actually super nice. It used to embed whether you posted it as a link OR as a hyperlink.... which meant that you had this awkward situation where you linked a https://www.youtube.com/watch?v=1WxsgRiKUn0 and it would replace the words "youtube video" with the embed of the video, making your post look terrible and incomprehensible.

Derenik1 votes

Ah, great help, thanks!

More from Boards Feedback

More by Derenik