Green Party of Michigan |

Articles Instructions

GP-MI Web Application - Articles




The GP-MI web application is developed1 to support two-way communication between its members and officers. This is in accordance with our principles , was one of the three important goals established while cooperating with U of M and Bond Consulting , and is widely recognized as necessary for a vital democratic agency. This web service is unlike typical blog sites, whereby a small number of individuals are authorized to post to the readership in a top-down manner, while secretly blocking, hiding or totally disallowing comments from others.


Each GP-MI committee and caucus has its own specialized forum for discussion and file sharing. Its members are free to choose their own chair people or not, to assign a moderator or not, and to update their own business rules. Regular members and the public do not see these areas.


Regular unrestricted GP-MI members can interact with the website in several ways. For example, after logging in, they see content and resources not visible to the public. They can upload images to the splash page banner, and they can access the General Forum for discussion and file sharing. The General Forum is not visible to the public.


This document is about GP-MI website Articles, and will show how unrestricted GP-MI members can create, update, publish, and delete their own articles and choose settings to make them visible to the public or selected membership groups. Articles are highlighted on the splash page, (aka ‘home page’ or ‘front page’). This document includes instructions for those with article admin permissions; the Communications Officer and Web Steward .


It is interesting to note that GP-MI members have been able to upload banner images and articles for public consumption since June 2018. However, these features have gotten little use. There are several plausible reasons for this. They should be analyzed in efforts to increase member participation and sense of belonging. Admittedly, the process for publishing articles was clunky and the UI unfriendly. The latest software upgrades greatly improve the user experience and end results. Also interesting is the fact that of the 30 articles published, not one has been reported as objectionable in any way.



Articles Overview


Visitors to the GP-MI website will see on its splash page an image banner and several image links to recent articles. The images and articles were uploaded by regular GP-MI members. We currently show five articles, with the most recent, or the most recently ‘pinned to top’ in the center and four others below.




Clicking on an article image will load the related article, as seen below.




The author of the article will have another button called ‘Edit’, not shown here.


The ‘Report this Article’ button is for registering objections. Clicking on that button will load the modal below.




Clicking past the modal reveals the form below.




The report requires a ‘Reason’ selection and a ‘Comment’. The required number of reports from distinct members to automatically remove an article is assigned by those with article admins permissions.


It is worth noting that no articles have been deemed objectionable by any member. This is true even though articles have been published by members who, at the time, were in serious conflicts with other members.


Create a New Article


We click the ‘Cancel’ button to return to the splash page. From there, we click the sidebar button to ‘Add or Edit an Article’. That loads the view seen below.




We see a button at the upper left for ‘Article Instructions’. Clicking that will load this document.


The grid is empty because this member has not created any articles yet. Those with article admin permissions will see all articles listed, regardless of authorship.


We click the ‘Add a New Article’ button. That loads the article data entry page. Data will be entered in steps. The first step gathers the article header information.




We have entered a ‘Title’ and clicked on the ‘Article Type’ drop-down list. We are about to select the ‘Application Feature’ item. Selecting ‘GP-MI Members Only’ item would prevent this article from being seen by the public.


The ‘Pin to Top’ box will prevent future articles from taking the prominent spot on the website, or force them to also check the box. It should not be checked unless there is a valid reason to do so, such as posting info about an upcoming SMM. In that case, it is expected that the author will return and uncheck it after the meeting. 


The ‘Author’ selection is read-only. Those with article admin status will be able to author articles for any GP-MI member. We click the save button to proceed. The article preview page loads as follows.


We have two buttons, an ‘Upload Image’ button and a button to ‘Return to List’.


All articles require at least one image, to be used as a link from the splash page. But before we take that step, we click to return to the list.




The grid has a row with information about our new article. Clicking the grid row pointer button on the right reloads the article preview page as before. This time we click the ‘Upload Image’ button. That loads the screen below.




The ‘Image Caption’ is required and will be presented on the splash page. For this demonstration we entered some text and browsed to an image file. The image chosen and the content of this article are for demo purposes and are otherwise unrelated to the GP.


Clicking to ‘Cancel’ returns to the article preview page. Clicking to ‘Upload’ saves and inserts the image into the body of our article, as shown below.



We now have buttons to ‘Return to List’, to ‘Publish Article’ and to ‘Edit’. Returning to the list will show the same grid we saw before, exactly as it was. Publishing will make it immediately visible to the public from the splash page. We click ‘Edit’ in order to add content. That loads the data page as seen below.



At the top right, we see the file name for the image we uploaded and the URL for its file location on the Internet. Hovering over the red button presents a tool-tip message, not shown here, that tells us this is a ‘Delete’ button. Clicking it will remove the file. Since this file was intended to be the header image, deleting it will damage the appearance of the article. If that happens, we can upload a new image and rework the body html, but that will be time consuming. We would probably elect to delete the article and start over.


From the familiar controls at the top, we can change the title, the article type, and our pin to top choice. But more interestingly, we can now edit the body of our article and click to ‘Save’ the updates.


The ‘Delete’ button will remove this article from our article list and make it generally unavailable. Those with article admin permissions can retrieve deleted articles if necessary, but that is rarely required. The ‘Preview’ button reloads the preview page we just came from. The ‘Cancel’ button will abandon changes and return us to our article list.


Note that the body of the article is rendered within a rich-text area. Formatted text may be entered directly into this area, or you may choose to copy and paste from a word editor. Most, but not all formatting will be faithfully rendered as expected.


There are times, though, when formatting will transfer incorrectly. And it is not possible, to copy and paste images or hyperlinks in this way.


Remember that Internet browsers render HTML, not rich text. This application automatically translates our rich text to html ‘markup’. We may prefer to edit that html directly. To see it, we click on the ‘HTML’ tab. The markup will show in the panel as seen below.





With this tab, we can make the article look exactly the way we want. For example, we could change the ‘height’ of the image from 350 to 250px. Clicking the ‘Save’ button would save that change. We have a link called ‘How To: Edit HTML’, which is an outside html tutorial and reference.


Note that refreshing the browser cache may be necessary to see what happened. Each browser has a different way to clear its cache. Cached images can continue to show in the browser for a time even after being deleted on the server.


To demonstrate how to insert another image, we click on the ‘Insert Image’ button, which loads the page below.



We have selected a file and will now click the ‘Upload’ button. The article preview page reloads as shown below.




Let’s assume we decide to delete that image and try something different. We click the ‘Edit’ button, which loads the data page below.


We selected the image by clicking and dragging our cursor across it. Now hitting the delete button removes it from our article. This will not delete the image file. If we decide that we will not need it in the future, we can click the red button next to the ‘image001.jpg’ link at the top. In this case, we decide to remove the image from the article but to keep the file on the server.


We now click on the ‘Attach File’ button to demonstrate how that is used. It loads the familiar looking screen below.




We browsed for a file. Now we hit the ‘Upload’ button. That reloads the article preview page.




We see the link at the bottom left. Clicking it will download the file. In order to change its location in the article, we click the ‘Edit’ button.



We added some text, then cut and pasted the link to its new location. Clicking the ‘Save’ button reloads the article preview page. (‘Ctrl’ + ‘X’ to cut.)




We will click the ‘Edit’ button again in order to demonstrate how the ‘Upload HTML Document’ button works, but first we will create an HTML document. To do that, we will use MS Word. Other word editors will work the same.


We start by creating an ordinary MS Word document (*.docx). We use as much formatting as we can think of, just for demonstration. A screen shot is below.



We’ve included a two-cell ‘Table’ and put images in the cells.


Now we save this document as an HTML file. In MS Word, that is done by clicking the File > Save As menu buttons. Then we change from the default file type from Word Document to HTML, as shown below. (Saving as *.pdf would be useful if we planned to attach this document as a file.)




We can choose to save as ‘Web Page’ or ‘Web Page Filtered’. We choose the filtered option.


Clicking to save loads the new html document, as seen below.


We see that the formatting has changed in that the table that was centered is now left justified. That is the ony real difference.


Note that we could have seen this formatting change without saving by clicking the original document ‘View’ menu button and selecting ‘Web Layout’, as shown below.




We decide to upload the new html file and do some editing after it is in place.


To do this, we return to our article data page and click the ‘Insert HTML Document’ button.




Clicking the Upload button parses the body content and inserts that into our article. The file itself is not saved on the server. The article preview page reloads as seen below.



Now we have some editing to do. We want to center that table and include the images, which were not brought in with the HTML upload.


We click ‘Edit’ to return to the data page and then click the HTML tab. We scroll down to find the table and image tags.




We will add a style attribute to the html table in order to center it, (margin:0 auto;).


Then we will upload the missing image file and edit the <image> tags to point to the correct image location.


Note that we uploaded one of the images earlier and still have it listed. Also note that uploading the second image will automatically insert it into the article. We will highlight and delete the image from our article as we did earlier, leaving the image file available for use.


The results are shown below.





Clicking to save reloads the article preview page.




We see that there is an issue with the unordered list. We click the 'Edit' button to load the data screen.




We might be tempted to edit the html, but the quickest fix this is just to highlight the line that says, 'So what do you know!' and then click the bulleted list button in the menu. (To highlight, hold the 'Shift' key and drag the cursor over the text.) Saving reloads the preview page.




We still need to show how to insert a hyperlink. To do that, we will find a web resource to link to.


For this demonstration, we will link to a posting on the General Forum. You can see the forum below.




Each thread and reply has a link to the content of the post. Clicking on the link will load the post in a browser window.




We copy, ('Ctrl' + 'C') the URL for this post. Then we navigate back to our article's data page.



We paste ('Ctrl' + 'V') into the 'Link URL' box, and insert text into 'Link Text' box. Clicking 'Insert Link' saves and reloads the article preview page. (Clicking to save without clicking the 'Insert Link' button will not save the link.)





We see the link at the bottom of our article. We can now return to edit the article to make it more attractive and informative. Since this is for demonstration only, we will leave it as it is.


Note that the link is to an area that is off limits to the public. When we publish this article, it will be seen by the public and people may click the link. If they are not already logged into the GP-MI website and recognized as having the authority to view the linked content, in this case, recognized as being a valid GP-MI member, they will see a login screen. If they login and have permissions to view the content, they will be automatically redirected to the link URL.


Publishing an Article


We deem this article compete. Now we want to have it seen from the splash page. To do that, we click the 'Publish Article' button.




The article preview page reloads with a message that the article has been successfully published. To see it, we click the top left menu button to return to the splash page.





Our article has taken the prominent position on the splash page. If other articles had been checked to 'Pin to Top', then our article would appear below them.


Clicking on the author name, we get a popup modal with an image of the author.



We click the image to load the article, as shown below.



The article URL is displayed at the top of the browser. That can be copied and pasted into emails or documents for hyperlinks or references. There is also a Facebook share button at the bottom.


Linking to the article from Facebook or other sites increases the article's 'Relevance' as calculated by search engines like google. Several links will cause the article to appear near the top of search lists for the phrases like the article's Title, header tag content, etc.


Notice the 'Edit' button at the top right. Only the article author and those with article admin status will have this button.


To unpublish an article, we only need to return to the edit screen and click the 'Save' button. Saving an article unpublishes it because of the assumption that we need to preview changes before letting them be seen by others. The article will still be available for further editing. It just won't be seen by others.





We have shown how to create an article and publish it, how to edit its contents via rich-text or html, how to insert images, attach files, input html from an html document, to insert links to web resources, and how to unpublish and delete our article.


We saw how to report offensive articles and how they are automatically removed when complaints are received.


We noted that the Web Steward and Communications Officer are able to do all these things for anyone's articles, even composing articles as another author2. (that it may be discontinued and is expected to be rare.)












1.      This document describes the application in its current state, but flexibility is built in for possible modifications to business rules, such as manual rules enforcement in lieu of automatic action triggered by user complaints, and the ability of those with admin permissions to author articles under another member's name.  

2.      It may be tempting for the administrators to ‘help’ by authoring articles for other members, but this should be avoided except in rare instances. The GP-MI might decide to disallow this practice altogether.