Formatting tips by Sara Jarvie

in #tutorial5 years ago

Steem has been a wonderful place for me to express my creativity. As a photographer I enjoy the pursuit of taking great pictures. With more knowledge of formatting I have been able to make creative posts too!

In my recent Share My World: Sibling trip a few people commented on how much they enjoyed the formatting, so I am doing a little tutorial on how I format my blog posts.

Things to note:
-My posts all have original photos and so highlighting those photos is a top priority for me.
-I have been using @steempeak since it's inception. I enjoy the platform and am most impressed with @jarvie and @asgarth and how they are continually improving the site! They really want to make Steem a good experience for everyone.
-Smugmug is where I store and get the info for my pictures.

Single photo

Most people post single pictures so I will start here. There are basically two ways I put in single pictures.

Option 1
With single horizontal photo and I make sure it is large enough to fit across the width of the screen.

image.png

Option 2
For vertical pictures, I make them a bit small and center them on the page.



Simon Gudgeon, Leaf Spirit

image.png

<center>picture</center> You can copy the text that is highlight like this throughout the post to use in your own posts.

Additional Formatting info
I also added information to this picture and italicized it. Which can be done two ways
a. Using the I on the formatting bar at the top of the pageimage.png
b. The method I prefer and use most regularly is to highlight the text then click control "I" which will also put the * asterisks around the words

Two photos

It is nice to put two photos side by side and give a little more context.

Option 1. Put two horizontal pictures next to each other

image.png

image.png

<div class="pull-left">
</div>

<div class="pull-right">
</div>

Additional Formatting info
You will see that the word Florence is in bold and that is done by putting two asterisks (**) on either side of the word(s).

There are two ways to bold words
As with italicizing a word, you can use the bar at the top of the page
image.png

The method I prefer is to highlight the text then click control "B" which will also put the ** asterisks around the words

Option 2. Put two vertical pictures next to each other

image.png

image.png

---------------------------------------------------------------------------------------------------

Additional Formatting info
The dashed line very important. This line stops the rest of the post from being pulled to the right or left.

Option 3.
Words, a vertical and a horizontal picture

image.png

image.png

Additional Formatting info
Using the # will make your words bigger and bolder. For this section I used 4 # marks or Header 4 in the bar at the top of Steempeak.com

Also, very important to have space after the top line of the code and before you start writing, as you can see in the example.

Three photos

I enjoy putting three pictures together and use this option often. It takes the most work and I think looks the best!

Option 1. Put three pictures side by side

image.png

Step 1: Click on the grid on the formatting bar at the top of the page.
image.png

Step 2: Make sure your grid looks like this

image.png

Step 3: Replace the column1, column2 and column3 with picture locations
Step 4: Delete the row that has the content 1, content 2 and content 3

image.png

|column1|column2|column3|
|-|-|-|

Option 2. Put three pictures in a grouping with one vertical and two horizontal

image.png

Step 1. Use this code

image.png

<div class="pull-left">
</div>

<div class="pull-right">
</div>

Step 2. Depending on where you want the vertical and horizontal pictures to be put the picture code into that column. In the picture above you can see I have one vertical on the left and two horizontal on the right.

image.png

Additional Formatting info
Again the dashed line is very important. This line stops the rest of the post from being pulled to the right or left.

Six pictures

I really enjoy telling a story with six pictures all together.

image.png

Step 1: Click on the grid on the formatting bar at the top of the page.
image.png

Step 2: Make sure your grid looks like this

image.png

|column1|column2|column3|
|-|-|-|
|content1|content2|content3|

Step 3: Replace the column1, column2 and column3 with picture locations
Step 4: Replace the content 1, content 2 and content 3 with pictures locations

image.png

Two of my favorite things about Steempeak are Templates and Drafts.

image.png

I have a master template that has all the markdown codes that I use regularly. I can start a post using that template and it will stay in my drafts until I am ready to post it. It is fun to mix and match different codes to make interesting and visually appealing content.

My master template

image.png

Conclusion

And there you have a nice tutorial on how to be more creative with your posts. Thanks to @r00sj3 for inspiring me to explore formatting with your great posts early in my time on Steem. I recently found @abigail-dantes blog and it is formatted so nicely. I would also love to hear some great formatting tips from others.

Sort:  

PRO TIP: SAVE THE TEXT IN SNIPPETS

This is what i'm gonna do... I'm gonna take her code formatting ideas and save them to SteemPeak snippets.
image.png

In fact maybe these should be automatic snippets on steempeak @asgarth?

  • Centered Image
  • 3 Image
  • 1 Vertical Left - 2 Horizontal Right
  • 2 Horizontal Left - 1 Vertical Right
  • Side by side
  • Side by side with text

Think you’ll make a lot of people very happy with that option👏

Posted using Partiko iOS

That would be so great if @asgarth could add them to the bar!

This is totes sexy.

Super stuff. The table of images is cool.

The one thing i like to use below some of my images is the <sup> or <sub> tags. (subscript and superscript)

For example <sub>this</sub> produces slightly smaller letters aligned with the bottom of the line.

<sup>This</sup> produces slightly smaller letters aligned with the top of the line

You can nest them to make stuff impossibletoread

Example using your image


A slightly smaller description

Nice. I didn't realize you could nest subscript & superscript tags!

Very Cool!

Awesome. Thanks so much. That is one thing that I saw that I was wondering how it was done. Yay.

Great writeup for formatting posts! Think I’m gonna point people to your post in the future instead of explaining how i did the trick with pictures in my posts.😎

Posted using Partiko iOS

Oh! Thank you @sjarvie5, that compliment coming from you does mean I am doing something right with my post format :) These tips are incredible. I particularly like the 'photo grouping' one.

As for me, because my posts are more text than image based, I am always conscious of breaking the writing with tidy headings and paragraphs. Of course, beautiful images (which I mostly get from pixabay) give that extra appeal and make the whole material more inviting for the readers to engage with it.

At least I think so :)

Wish you a lovely Saturday evening.
Bye for now!

You are welcome. Your posts really are clean and beautiful. They make them so easy to read. How did you get the color line break? That really caught my eye.

I recently went back and read some of your older posts and keep thinking about Mr. Bales. Great story!

The red line is an image @sjarvie5 :)

Here it is:

redline.png

I have a grey one as well, which I use less often:

grey line.png

It is very kind of you to take the time to browse through my blog. I appreciate it very much.
Mr. Bales is one of my favorites as well! :D

Take care <3

Thanks Abigail. I look forward to reading more of your stories. I am looking into doing on online short story writing class. I have wanted to write for some times and feel like now is a good time.

This is amazing! Thank you for this tutorial, @sjarvie5! I had basically resigned myself to just having ginormous images breaking up paragraphs, so I’m stoked to have this resource to have more flexibility with formatting. ✨

!BEER

I am so glad you liked it @oheyo. Looking forward to seeing some of your posts using the new formatting tools!

Wow, such a good guide for photography users. Great work 👍🏻

Posted using Partiko iOS

Thank you for these tips @sjarvie5, this is going to be sooo useful, bookmarking it for future reference!

Posted using Partiko Android

Thanks @lizelle, so glad you like it!

you should get a medal for this :D i suck in formating, and this will be a great help

Wow, thank you thank you very much. i am going to try this soon.

@putu300 you are welcome. I am so glad you are going to use it soon.

This is so great. Thanks for telling me. I enjoyed the post about the fist market too!

Great tips... and it is good posts like these are made to remind new users how to format... a good looking post is IMPORTANT!

as per comment above also good for sources eg

Here is my proof 1

Here is my proof <sup>[1](linkhere)</Sup>

Posted using Partiko Android

thanks so much @riverflows and for posting your proof too!