CSV - Article Connect

http://www.muse-themes.com/products/article-connect

Need to display charts on your site? Then Chart Connect is exactly what you need. Use a simple Google spreadsheet to enter data, and view the results in a beautiful, interactive chart. Like the other widgets in our Connect series, Chart Connect is perfect for providing remote management of live charts on your website.

Chart Connect features 5 chart types: line, horizontal and vertical bar, pie and donut. These stylish charts are fully responsive, and include animation, legends with live category filtering, and tooltips displaying pertinent data upon mouse hover.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop, Tablet, Phone

Release Log


 



Setup

This widget allows you to publish articles in two ways: pasting article text directly into the spreadsheet, or by linking to a Google Doc. Separate Instructions are outlined for each below


Pasting Article Content Directly into Spreadsheet

This Method can be used with Business Catalyst hosting.


  • You may use the web-based Google spreadsheets or the local CSV files included in the zip file. If using the Google web-based spreadsheets, follow the instructions below for "Editing the Web-Based Google Spreadsheet Templates"

  • Each row in the spreadsheet represents a single article. Create a title, subtitle, category, and content tags.

  • Column C is the mt_content_title_slug. This can be named anything you like, but must be unique. This entry allows direct URL links to be made to specific articles. The easiest thing to do is to copy the article name and use that. No spaces are allowed: enter “-“ in place of any spaces.

  • Column G, mt_content_leading_text, is the leading text (also known as an excerpt).

  • Column H can use

    • Regular Image: This setting uses a standard URL image link (Column J is activated with this setting). Make sure your link is direct, meaning that the URL should end with the image file type (.jpg, .png, etc)
    • Google Image: This uses an image stored on Google Drive. The image key should be entered in column K. To acquire the key, select the image, right-click > select "Share" > copy the long string of random characters from the middle of the URL.
    • No Image: This setting uses no image
  • Column I, mt_content_leading_img_visibility, has 3 options:
    • Leading: Shows image only on leading page
    • Full: Shows image only on the actual post page
    • Both: Shows image on both the leading page and the post page

  • Now it’s time to enter the article text. First, set Column L to HTML in the dropdown:

  • The article text will go into Column M. This column should use HTML to respect text formatting. Use the Text to HTML editor link in the widget option panel: https://html-online.com/editor/

  • Type up the article in the field on the left, and format how you like. The HTML will be populated on the right as you go:

  • Copy the HTML to clipboard, and paste into Column M.

  • Columns O, P, Q, and R are for author, created date, updated date, and Read More button text, respectively. These are all manually editable.

  • That’s it! Repeat for each new article


Using Google Docs for Article Text Content

This Method requires FTP upload to your own server (not compatible with Business Catalyst).


  • Sign into Google. In your Google Drive, create a new folder titled Article Connect.


  • Create 3 new folders within, and name “Dashboard”, “Articles”, and “Images”. Should look like this:

  • Load up the folders with your content. Drop images in Images folder, and articles into the article folder. If the article is a Word doc for example, you will need to tell it to open as a Google Doc:

  • Right-Click the file, and select Google Docs under “Open With”. This will create a copy of the file. Once you see the duplicate, you can erase the original. This should only be necessary if you’re opening docs of other formats. If the files are created in Google Docs, this step won’t be necessary.

  • Open the Content and Presets spreadsheets from the links in the widget option panel one by one. Save a copy of each, and rename. Make sure the Dashboard folder is selected in the popup window. It should be the default location.

  • Everything needs to be made public (all articles and images within their respective folders). You can select all the files and do this at the same time per folder. To access the menu on the image below, right-click the 1st share dropdown, then select “more”. That opens the additional options. Choose “On - Public on the web” for the permission.

  • Click the Save button.

  • Go to the Dashboard folder. Open the Content Template and Presets Templates one at a time and publish them to the web. Click File > Publish to the web…

  • Select Comma-Separated-Values (.csv) from the “Web page” dropdown. Click Publish.

  • Get the Google keys for the Content Template and Settings Template:

  • Paste each code into the appropriate field in the widget options panel:

  • There is a PHP file that must be loaded onto your server. Find the file named "mt-article-connect.php" in the zip file. It is in the "PHP Files" folder. Load the PHP file in the widget:

  • At this point, you can upload the site via FTP to preview the widget. In Muse: File > Upload to FTP Host.


Creating And Editing Articles (Using Google Docs for Article Source)

  • Each row in the spreadsheet represents a single article. Create a title, subtitle, category, and content tags.

  • Column C is the mt_content_title_slug. This can be named anything you like, but must be unique, as it allows for direct URL linking. The best thing is likely to copy the article name. Enter “-“ in place of any spaces.

  • Column G, mt_content_leading_text, is the excerpt.

  • Column H should use the “Google Drive” selection

  • Column I, mt_content_leading_img_visibility, has 3 options:
    • Leading: Shows image only on leading page
    • Full: Shows image only on the actual post page
    • Both: Shows image on both the leading page and the post page

  • Column J is for hosted images outside of Google, and can be skipped.

  • For Column K, mt_content_leading_gdrive_img_id, you will need the Google image key. Go to the Images folder, click on an image, Right-Click, and select Share. Copy the URL, and paste into Column J. Make sure you are using the key only, instead of the entire URL:

  • Now it’s time to link up to our article. Assuming you have articles in the Articles folder that have been set to open with Google Docs, open your article and grab the key:

  • In Column L, select Google Docs from dropdown

  • In Column N, Paste your Google Doc key:

  • Columns O, P, Q, and R are for author, created date, updated date, and Read More button text, respectively. These are all manually editable.

  • That’s it! Repeat for each new article


Editing the web-based Google Spreadsheet templates

  • You will need a Google account and access to the free Sheets web app in order to edit the template (no Google account is required for viewing the template).
  • Follow the link in the bottom of the widget panel to open the template.
  • The template is view-only and cannot be edited as-is. Make a copy of the template: File > Make A Copy.
  • Name the new copy.
  • The new copy can now be edited.
  • When ready, you will need to publish the spreadsheet in order to use it with Sidebar Menu. Go to File > Publish to the web...
  • Click the "Web Page" dropdown and select comma-separated values (.csv).
  • Click “Publish".
  • Copy the long set of random characters in the browser's URL field, or in the link shown in the Publish To Web pop-up.
  • Paste this Google Spreadsheet Key into the Widget option panel in Muse (you will need keys for both the Content and the Presets spreadsheets).


Tips for editing CSV files

  • Once you've published your Google Spreadsheet, ANY change made to the spreadsheet will be updated on your website. This is handy and quick, though you will want to be careful to make sure that your changes are exactly what you want.
  • The data within the CSV must be entered carefully:
    • Spaces are not supported in most entries
    • Be careful if you're cutting and pasting (be sure not to include extra characters or spaces)
    • Do not create empty rows
  • In the Presets Spreadsheets, the only fields that need to be updated are the cells in the "option_value" column. Values in this column may be numbers or letter text. For basic enable/disable options, 1=enable, 0=disabled. We've built in dropdowns wherever possible for common variables.
  • Check your progress often while editing CSV files. Small errors such as spaces or typos can make it so that your sidebar menu does not appear. If you’re working with a local file, save and load the file into the widget, then publish to check for functionality. If you’re working in Google Sheets, simply preview your sidebar and refresh the browser to see ongoing updates. If you do have an issue, use the “undo” function in your spreadsheet editor to back up to a point where the widget was working.


Commonly Asked Questions

What is a .csv file?

A .csv file is a basic spreadsheet file that can be edited in Excel, Numbers, Google Sheets, or similar.

Should I use the web-based template, or the local file? What's the difference?

Ultimately, there's no difference in the functionality of the sidebar menu, whether you use the web template or the local template. Local files allow for traditional editing and backup in your favorite spreadsheet editor. The web template option allows for immediate remote updates for you or your client.


Known Issues/Conflicts

No known issues or conflicts


Additional Info Links