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
, was one
of the three important
established while cooperating with
U of M and Bond Consulting
, and is widely
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
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.
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’).
includes instructions for those with article admin permissions; the
Communications Officer and Web Steward
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
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.
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
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
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 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
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
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
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
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
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
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
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
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
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
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.