This MMA Life

Lee for Team This MMA Life

Posted on • Updated on

New features added to the comments editor

Hey there everyone πŸ‘‹ Just a quick heads up on writing comments. You'll notice that the editor toolbar as now appeared in the comments section.

Overall, our editor is based/built on something called 'Markdown' once you get to know how it works it can be a very powerful addition to your writing and great for SEO.

The toolbar makes it easier to use some of the markdown syntax such as embedding content from Twitter, YouTube, Medium and Instagram etc as well as inserting images inline, links and highlighting specific texts or paragraphs or just general formatting.

YouTube

For example, if you want to embed a YouTube video then hit the little icon that looks like a lighting strike and it will spit out this.

{% embed %}

Then all you need to do is get the YouTube video link and then paste the YouTube link in like this:

{% embed https://youtu.be/PlB-UF8zV2Y %}

Then it renders in your post like this:

Images

In terms of images, just hit the image button and then select the image you want to upload. Once that's done - you will see this in the editor instead of the actual image:

![Image description](https://thismmalife-images.s3.amazonaws.com/uploads/articles/6rc1r6q90vjch0fkl7ua.jpeg)

That's because entering some keywords where it says 'Image description' allows for better accessibility and SEO so you have the option to drop some stuff in there. So for example for the image I have uploaded above I would update the Image description part so it looks like this:

![mma fighter wrapping his hands](https://thismmalife-images.s3.amazonaws.com/uploads/articles/6rc1r6q90vjch0fkl7ua.jpeg

Then it renders in your published post or comment like this:

mma fighter wrapping his hands

Gifs

There are some other cool things available like how to insert Gifs from Giphy directly in your posts or comments which is pretty much the same as images but you just paste the link in from Giphy, so this previous image example:

![mma fighter wrapping his hands](https://thismmalife-images.s3.amazonaws.com/uploads/articles/6rc1r6q90vjch0fkl7ua.jpeg)

Instead looks like this (you can see where I have replaced the words in the description and the image url link to a giphy.com link):

![wonderboy saying thank you](https://media.giphy.com/media/3o6Zt6KHxJTbXCnSvu/giphy.gif)

It then renders in your published post or comment like this:

wonderboy saying thank you

Your own previous posts

Sometimes you want to reference a previous This MMA Life post or someone else's, you can do that by doing what I have done here:

{% embed https://www.thismmalife.com/lee/miesha-tate-is-on-the-ortega-vs-rodriguez-card-anyone-think-she-has-a-chance-against-shevchenko-1j06 %}

Just replace the This MMA Life post link with your own. It will then render in your post or comment like this:

Of course, you don't need to insert images, gifs or YouTube videos in your posts or comments, but if you do and still need a bit of help doing so, ping @thismmalife on Twitter or drop a comment below and we'll help to get you going.

In the meantime, thank you for contributing to this amazing community.

Top comments (11)

Collapse
 
ogaddmma profile image
Ollie Gadd

Thanks for these, always useful to have new ways to format a post. I'm starting to learn how to create gifs and would love to replace the still images in the pieces I write with gifs of the same thing, so that feature is incredibly helpful.

It would be great to maybe have the ability to have a visible image description as well if you're open to suggestion. I've wanted a few times to be able to implement an image and then under the image in smaller text describe what I'm using the image to show. Not sure if that's something that could be implemented at all but it'd be something I'd love to see in the future

Collapse
 
lee profile image
Lee Author • Edited on

If you just drop this under your image in the editor it and replace the text in the middle and it should work fine

<figcaption>Replace this text with image description</figcaption>

Comes out like this:

Replace this text with image description
Collapse
 
lee profile image
Lee Author

I'm starting to learn how to create gifs and would love to replace the still images in the pieces I write with gifs of the same thing, so that feature is incredibly helpful.

Great to hear it, let me know if you need any help at all with that.

It would be great to maybe have the ability to have a visible image description as well if you're open to suggestion.

Gotcha, like when you see a credit acknowledgement?

Collapse
 
joe_mmahive profile image
Joe (MMA Hive)

Nice.

ufc hug

It would be even cooler if one of these buttons would just pull straight from GIPHY. I'm sure there'll be an API for it. But the improvements already are good!

Collapse
 
lee profile image
Lee Author

Agreed πŸ˜ƒπŸ˜ƒ

agreed

Collapse
 
lee profile image
Lee Author

You can also do post series linking like I do with the 'Next UFC' posts and 'Post Event Discussion Threads' (automatically adds a nice series link to the post for you).

You'll see what I mean here:

I'll update this post with those details in the future but if anyone wants it sooner let me know. πŸ™Œ

Collapse
 
lee profile image
Lee Author

Added this in the editorstips tag for cover photos if anyone gets frustrated with them..

Collapse
 
lee profile image
Lee Author

Or just drop a comment below and I can help from there :D

Collapse
 
lee profile image
Lee Author

I've added a sidebar nav link for this so anyone can come back to it as I add more tips at a later stage, there are no stupid questions here, ask away 😎

Collapse
 
lee profile image
Lee Author

Dimensions for the post cover photo are 1000 x 420

Collapse
 
hannahwoking1 profile image
hannahwoking

Took me a while to pick up markdown, glad I came across it here as it has changed the way I write everywhere else x