How To Post To Your Feed!

I've received quite a few questions of various people asking me. "How do you post in the feed?" So hopefully this post will help newcomers to 7 Cups learn how to post to your feed

To post to your feed you can click on Community > Feed - 7cups.com/listener/feed.php

Editor Background:
So first off, 7 Cups is using the CKEditor (v4.5.7 at the time of posting) which is a free and open source library that makes it significantly easier to add rich text content into your posts without writing any line of code.

These type of editors are called WYSIWYG Editors. WYSIWYG stands for "What You See Is What You Get". Some popular examples are Microsoft Office, Google Docs, ProseMirror, LibreOffice, etc:

Here's a screenshot of the 7 Cups editor:

Mostly it's pretty self-explanatory to use but if you've never used one before hopefully this post will help you learn how to use it.

How To Use:
- Press "Enter" to insert a new paragraph.
- Press "Shift+Enter" to insert a line break aka new line.

SCAYT: Spell Check As You Type

Personally, I prefer using a tool called Grammarly as it instantly checks for 250 types of grammatical, spelling, and punctuation mistakes. Which is recommended by PCMag, Gizmodo, Forbes, and others.

Simply type what you want to say and if you want something "marked up", simply select the text and click.....
to make it bold (CTRL+B/ or ⌘+B)
to make it italic (CTRL+I/ or ⌘+I)
to make it underline (CTRL+U/ or ⌘+U)
to make it a link (CTRL+L/ or ⌘+L)



to change the size of the text.

Left will change the text's color; right will change it's background color.

Inserting an image:
There're a few ways you can insert an image.
The easiest way is by selecting an image and pasting it into the app (requires the copied image to be hosted on an online server or by copying an embedded image which uses DataURI to display the image instead of a server. (DataURI is basically just the raw image data being displayed on the website).
Another way to embed an image into the editor is by clicking on

Which will display the following dialog...


First, you will need to add the image's URL.

There're many ways to grab an image's URL that already hosted. The most common way is by right clicking and "copying the image location".


You can either use a site like imgbox to host your image or you can convert the image to DataURI and embed the raw image data instead.

Remember people view the site on many devices from small phones to desktops.

What I like to do if I'm working with a large image is after I add the image URL I set the image's width to 100% that way people that are using phones will be able to see the image better. In addition, I also like to give the user an option to hyperlink to see the full image (much faster than grabbing the image source).

Hyperlinking an image:
Now that you know how to add an image how do you hyperlink it? It's actually very easy! Select the image in the editor and click on or press CTRL+L or ⌘+L (for mac users).

You will then go through the same process as before for adding a link. Once the image is hyperlinked you will see a border around the image inside of the editor. However, when you double-click on the image you will only be prompted for the image source. To change the hyperlink URL you will have to select the image in the editor again and click on or press CTRL+L or ⌘+L (for mac users).

Inserting a smiley:
You can insert a smiley/emoji by inserting an image like as previously discussed or you can use the built-in smileys in the editor by clicking on the button.

Which will open the following smileys.....


The smiley you click will be added to the editor and that dialog will close.
I hope this little tutorial helped you understand more of how to use the editor and of course how to post to your feed.