Article Formatting Guide

by Yabsta 12th January 2018

Article formatting



Article formatting requires use of the "TinyMCE," which is the formatting control panel. Most functions are controlled by the buttons located within the TinyMCE. In your Content Block editing window, get to know the TinyMCE by hovering your mouse over the buttons to reveal the tags naming each one. All standard text formatting is included here and there are also custom formatting buttons that are unique to the Yabsta platform.



Yabsta Format TinyMCE
Image A: Example of TinyMCE formatting panel



Titles should use the "Heading 1" style


Sub-titles should use the "Heading 2" style


Your text should always follow the standard: left justified, default text colour and paragraph style. While there are other text style's available, these should only be used on Content Pages.


Use Bold, italics and/or colour for emphasis. Use of colour should be restricted to the colour of the Yabsta section. For example, Articles and Essentials live within the Guide and the colour for this section is Yabsta Green (#87ca56).





Links are an important element to include in articles. There are two ways to do this within Yabsta.


Add a standard text link by clicking the "Insert/Edit Link" button. Use this to link to external sites or primary search keywords. For example, in an article on taxis, instead of writing out a list of taxi companies the word "taxi" should link to a search for "taxis". To do this, open another window and do a search in the platform for your keyword. Copy the URL of the Search Engine Results Page (SERP) and use that to create the link within your article. This gives the user quick access to search words within an article that relate to primary search terms, and lets Yabsta search and aggregae the information. Listing companies within articles runs the risk of missing or out of date information being included. Linking to Yabsta’s search results is much more efficient.


To link directly within the platform, click the Internal Link button. Select a Listing, POI, Article or Classified and add the link text. Interlinking content within Yabsta is great for both Search Engine Optimization and user experience. An additional feature is that linking to Listings and POIs in this way makes the map box appear on the right side of the article page with the locations plotted.





 Blockquotes can be used to emphasize particular text.





  • Use bullet and numbered lists for organization, as seen throughout this article.  
  • Yabsta’s bullets and numbers are stylized to suit the platform.




Image Formatting


Whenever possible, lead off each article with an image before the text. Choose an image that best represents the article content. The lead and preview images must match.



Image Optimization


Images used in articles must be properly sized and optimized for web usage. Follow this workflow:



Article Images


  1. Download a high resolution version of your chosen image. It must be a higher resolution than the size (landscape or portrait) you will end up using. Never scale up.

  2. Crop and resize the image in an image editing program. The required width in pixels for landscape orientation images is a minimum of 1540. Height is determined by the image’s aspect ratio. For portrait orientation images, a minimum height in pixels of 1540 is required. Width is determined by the image’s aspect ratio.

  3. Save photographic images as a JPEG file with high (60%) compression. Save graphical images as a GIF or PNG file.


Preview Images


  1. Resize your article image to be used as your preview image. The required image size in pixels is 750w x [520h]. Alternatively, resize the image height to 520px and Yabsta will crop the width to suit.



Adding an Image to an Article


After you optimize your image for the web, you can add it to your article.


  1. Choose where in your article you would like to insert the image click the "Insert/Edit Image" button in the TinyMCE.

  2. In the "Insert/Edit Image" window, click on the button beside "Source" and click "Browse" to find your image. Click “Open.”

  3. Select your image in the preview window and click "Upload".  Your image is now linked in the source dialogue within the “Insert/Edit Image” window.

  4. Add an Image Description to improve Search Engine indexing.

  5. In the first dimension box, input 100% and click “Ok.”  

  6. Images must never be hotlinked (added to the article by linking to the image on another website), they must be uploaded directly to Yabsta.



Image Credit & Description


Images must use a credit when required by the image provider/license. A short description of the image can be included in order to provide additional information on or label it. Include both the credit and description using the Image Author button in the TinyMCE. Include any links that are required for credit. You can also include an internal link to a listing, POI or article, or to a relevant external link. When adding author content, paste the code below into the Image Author field and adapt the items as required:


Write a description | Photo Photographers Name / License Type



Yabsta Formatting
Image B: Example of a text wrapped Image
Text Wrapped Images


Images can be included within your article with the text wrapping around to either the left or right, as seen in Image B.


  1. Insert an image before the text you would like to wrap around.

  2. Add any relevant credit or description info.

  3. Click on the Source Code button in the TinyMCE. Navigate to the location of your image in the HTML code.  Here, add style="float: left;" or style="float:right;" to the start of your image code to have the text wrap around the image to the left or right.


While viewing your content in the TinyMCE your image will appear to be full sized. Once saved, the image will be scaled down by 50% and the text will wrap around it when it is viewed in a web browser.





Additional Formatting Options


The Yabsta platform allows for a number of additional formatting options. This includes anchor tags to allow navigation to other sections of the page, tables, video embeds and related content.





Embed videos which have been uploaded to the platform by clicking Insert Yabsta Video to select a video you previously uploaded. It will automatically embed in the article. Or, embed a video from an external website by using the Insert Video button. Navigate to a video on an external video provider such as YouTube and copy its embed code. Click Insert Video and paste the embed code in the dialogue window. 




Related Content


Yabsta includes related content when it detects relations based on keywords proximity, and categorization. This can be seen in the “You may also be interested in” bar at the bottom of articles. You can also add specific related content by using the Related Content button. Select a content type from the dropdown menu and search for the item. This allows you to include direct links to business listings and POI's as well as articles and videos using Yabsta’s widgets.






Add tables to organize content and display data. When working with tables, only use colours that align with the Yabsta brand and section, for example Yabsta Green (#87ca56). Due to the platform’s responsive resizing, the content of some tables may not scale down to suit mobile sizing. In these cases, Yabsta’s web developers must create a custom table.


 Heading 1  Heading 2  Heading 3
 Item 1 Item 2  Item 3
Item 4 Item 5 Item 6
Posted by Brendan
Friday, 12th January 2018, 01:38pm.
Comments (0)
Popular Articles

The Yabsta Platform

Highly customizable, responsive and simple to use, Yabsta’s User Interface delivers targeted search results and drives traffic via a range of engaging features.

by Yabsta
View More