Full name: Aditi Mittal
E-Mail address: [email protected]
IRC nickname: aditi

MediaGoblin is currently used as free platform for media publishing programs. A large number of users constantly upload media and hence having a blogging system will enable them to brag about the content that they add. I propopse to add blogging system to MediaGoblin as a separate plugin by reusing components such as MediaEntry, MediaTag, Collection etc from the existing infrastructure. With a blogging system, MediaGoblin can be used as an alternative to tumblr. I also propose to implement oEmbed protocol to provide embedding support in MediaGoblin.

##BENEFITS

Addition of blogging system to MediaGoblin will allow it's users to upload their media along with the description thus the users will be able to express their view and feeling about the content they have posted. Through various blogs we could offer valuable information to users about MediaGoblin, which will help them to understand MediaGoblin in a better way. Apart from all this addition will enable MediaGoblin to be challenger to Tumblr and other like media hosting sites. Embedding support in MediaGoblin will let it's users to display the media content of MediaGoblin and from third party sites, where the corresponding URL is posted . Similarly content of MediaGoblin can also be displayed on the same page where URL of corresponding media is posted on third party sites.

##DELIEVERABLES

• ###Blogging System: I will setup blog plugin for MediaGoblin which will provide Blog and Blog Post Dashboard, Blog Post Create/Edit Interface, Blog Post View Interface and Blog Create Interface using the existing models.

• ###Embedding Support in MediaGoblin: I will Implement oEmbed protocol for embedding support in MediaGoblin so that it's users will be able see the media content of blog or a comment, where corresponding media URLs are posted.

• ###Documentation

We can implement the blogging system as a composition of three main interfaces viz. My Blogs and Blog Dashboard, Blog Post Edit interface and Blog View interface.

This will be the one point access interface where user can perform all blog management tasks like create a new blog, new blog post, edit, delete and view an existing blog post. My Blogs will list all the blogs that a user has created and provide other blog management tasks like Deleting a Blog, Creating a New Blog etc.

Blog Dashboard will represent the various management tasks that can be performed on a particular blog of a particular user. As we can see, this page will list all blog post entries of the user as a list along with the date and status fields. If the status of the blog post is “Draft”, then displayed date is the date of last modification or if the status is “published”, then the date field shows when the post published.

Here the user can create a new blog post or edit an existing one. For every blog post user creates, he has to provide a title whereas tags is an optional field. Tags help to search the blog post among all media type entries. The edit interface will have a WYSIWYG editor which will save a user from writing pure HTML. I propose to use TinyMce which is a web based editor written in Javascript and has the capability of turning TextAreas into editor instances.

<img src="http://www.mediafire.com/convkey/3985/897zc350pka75hc6g.jpg" width="600" height="400" align="center/>

Apart from this a user can save the post as a draft or publish it. Published posts would be visible on blog view page whereas drafts will be invisible to the public. We can also facilitate the user with to have a preview of his/her post before publishing.

Access to this interface will be open to the general public and will act as an end point where other users can see the blog posts by other users. We can provide a view interface to a blog in the following two ways. We should discuss which view we want our blog users to have by default.

In this view , we will display the blog posts like a stack with the latest blog posts on the top. The posts will be displayed with an excerpt which will be generated from the blog post description. Clicking on an entry in this page will open the blog post’s own page. Vertical view mockup is shown below.

Grid view representation is same as other media types in MediaGoblin such as audio, video and images are represented. We intend to create the same interface for blog post entries. We will ask a user to provide a thumbnail for its blog post and if a user doesn’t provide a thumbnail, we will display a default thumbnail or it could be the embedded audio, video or image in the post.

As suggested by the mediagoblin community, the blogging system should be developed as a separate media type plugin, where blog posts will be just another MediaEntry objects. This way we will not have to develop new infrastructure and we can use the existing infrastructure that MediaGoblin provides. For example, the basic models that a blogging system may need are Blog, BlogPost, Comment and Tag. For our blogging system, we can re-use Collection, CollectionItem, MediaComment, MediaTag and MediaEntry models without implementing any new models.

I explain about the various models that I will be using to implement our blogging system.

We will model blog post as a MediaEntry instance like videos, audios etc. The table below shows the mapping of the attributes of our blog post to their corresponding attributes in a MediaEntry object.

In addition to these, MediaEntry.media_type attribute will hold “blogpost” as its value for a BlogPost media type.

###Blog(Collection): We will model a Blog as a Collection entity consisting of blog posts which are in turn MediaEntry objects. When a MediaEntry object is created, we also create a CollectionItem which references the MediaEntry we just created and the Collection it refers to.

###Comment (MediaComment) & Tag (MediaTag): These models will also be used in conjunction with the MediaEntry objects.

##URL MAPPING AND VIEWS

We will have the following URL patterns for blogging system

##DIRECTORY STRUCTURE

Since we are developing “blog” as media type plugin, we will create a mediagoblib.plugins.blog directory and structure it as follows.

mediagoblin/
    plugins/
       api/
       blog/
        __init__.py
        forms.py
        views.py
        setup.py

__init__.py File will use the functions of mediagoblin.tools.pluginapi to create hook for our blog plugin and also register the URLs of our blogging system.

forms.py Contains forms like BlogPostEdit, BlogEdit etc.

views.py File contains views for Blog Homepage, Blog Post View Page, Blog Post Create/Edit Page and Blog Dashboard ,etc.

We have not added any models for our Blog plugin since we are using the existing ones. Before starting the server, we can adjust our mediagoblin.ini file to load the new plugin Blog by simply adding mediagoblin.plugins.blog to the [plugins] sections.

##CRUDE IMPLEMENTATION

I have written some crude code and implemented a view to create a blog post and a view to access all the published posts in a vertical order. You can take a look at the code I wrote here. Below are the screenshots of the blog post create/edit page and posts view page. For simplicity, I have only created a single Publish button and no Save or View buttons. The posts view page just lists the title and description of each published post without any sort of hyperlinks. The code for these views can be viewed here

oEmbed is a format for allowing embedded representation such as images, videos and audios on third party sites. We want to support embedding in our blog system by displaying embedded content from media URLs in our blog post. We can easily support embedding of thirdparty media such as from sites like youtube, vimeo etc by using the existing oEmbed consumer solutions like python-oembed etc. For supporting embedding of media from MediaGoblin, we must implement the oEmbed protocol so that MediaGoblin can act as an oEmbed provider. We will implement oEmbed API end points which can be used for media embedding in blog posts as well as on third-party websites.

Media can be embedded in a blog post with the help of tags such as <embed>, <audio>,<canvas>, <iframe>,<img>, <math>, <object> and <svg>. We will have an ALLOWED_EMBED_TAGS variable in our mediagoblin.ini file which will list the allowed HTML tags that can be used for media embedding. This way, a user of MediaGoblin platform can configure the types of media are allowed for embedding in blog posts. We are particularly interested in the data of description field of our blog post(MediaEntry.description) which is HTML text and may contain media URLs. We will implement a clean_html method whose job would be to clean the html that is generated by TinyMce and convert all the media URLs found into embedded code as permitted by the ALLOWED_EMBED_TAGS setting. We will parse the media URLs to get the Hostname of the media provider and then use python-oembed to request the embed codes. In response to a consumer request, a provider returns it’s response in json or xml format, which we use to generate the embed codes.

We will use python-oembed consumer library to implement mediagoblin as a consumer. Below is a simple python code for a oEmbed consumer:

import oembed

#An instance of oembed consumer
consumer = oembed.OEmbedConsumer()

#provider = 'http://www.xyz.com/'
URL_REQUESTED = 'http://www.xyz.com/photos/bt/3456'
provider_URL_Scheme = 'http://www.xyz.com/photos/*'   
provider_API_End_Point = 'http://www.xyz.com/services/oembed/'

endpoint = oembed.OEmbedEndPoint(provider_API_End_Point, [provider_URL_Scheme])
consumer.addEndPoint(endpoint)

#Provider's response
response = consumer.embed(URL_REQUESTED)

#Response can be a json or xml object depending upon configuration of provider.
#Response: Attributes of response object are different for different media types.
#This response object is further used to display the content of the URL on the
#same page.

###June 10 – June 17 ####Community Bonding Period

• Interact with mentors for more concrete and discrete timeline.
• Read the documentation of MediaGoblin to get more familiarity with its modules.
• Read about plugins and their implementation.

###June 17 – June 27 ####Official Coding period starts

• Discuss more concrete design of the blogging system with the community.
• Discuss for a better user interface design with mentor.
• Setup blog plugin.
• Create basic files and structure of blog.

###June 27 – July 7

• Read documentation of SqlAlchemy.
• Write views for Blog Dashboard and My Blogs.
• Write templates to render the Blog Dashboard view.
• Discuss the additional features needed on Blog Dashboard.

###July 7 – July 15

• Write views for Blog Edit Interface.
• Write template and Blog Post Edit form for editing interface.
• Implement handling of status of Blog Posts.
• Write views to delete a Blog and a Blog Post.

###July 16 – Aug 4 (Two weeks)

• Discuss with my mentor which text editor would be the best for edit interface although I have proposed to use TinyMce.
• Discuss with my mentor and community about the possible blog posts collection displays viz. vertical or gallery view and implement them.
• Discus and implement a clean_html method for the HTML generated by the WYSIWYG editor. We can use lxml.clean_html which is a fairly robust method for cleaning HTML.
• Refactor and clean the code written for blog edit interface, blog dashboard, gallery view.
• Documentation

###August 4 – August 10 (take a off)

• I will take a week off.

###August 11 – September 13

• Get familiar with oEmbed protocol.
• Discuss with my mentor about the design of our oEmbed provider AP and implement oEmbed protocol so that MediaGoblin can act as an oEmbed provider.
• I will manually test the features implemented so far. This period i’ll devote mainly for bug fixing, giving final touches to the code by code cleaning and code refactoring with the help of mentor.
• Implement embedding support for blog posts

###September 13 – September 23

• Get done all pending work.
• Code submission.

I will communicate with my mentor via emails and IRC chat mostly. I already have worked with the community and found out that most of the members of the community are available on IRC channel after(UTC 3:00 PM) so I will be available on IRC during this time. We can also hangout on Google Plus. In addition to that I will update my mentor via weekly email consisting of description of what I have in that week and What I am planning to do for next week. For a better synchronization of code between me and my mentor I have setup a github repository where I will push all the changes which I will make. This way he/she could be able to review and help on my work easily. Apart from this I am perfectly comfortable talking on phone with my mentor.

I am interested in MediaGoblin’s blogging system project because this project suits me best according to my present capabilities.I recently have implemented a blogging project from the book “Practical Django Projects” by James Bennet. It helped me in learning how dynamic web development is done today and learnt about various concepts like MVC, DRY, Object Oriented approach, ORM mappers, Database system designing etc. I also find this project interesting and hope to learn more about web development from working on this project.
Blogging System project mainly based on python, javascript and SqlAlchemy Database. I have done several small projects on python and have sufficient understanding of web development but I will need to read over documentation for better understanding of SqlAlchemy and javascript. . I have worked for Melange as a contributor and solved various issues which are given below:

http://code.google.com/p/soc/source/detail?r=2e17c0fac7251ec54251f6dec687a61efb001a86

http://code.google.com/p/soc/source/detail?r=ce3c02b659c4e0816448ceae16e3932ca2cbfe8d

http://code.google.com/p/soc/source/detail?r=915af6bb5d7fdc9fe5e804ac3c96efe0d8b3dd9c.

I have submitted a patch for the issue here. I also implemented couple of views for Blog Edit/Create Page, Vertical View Page supporting my proposal which could be seen here.

I found the MediaGoblin community to be very helping and everyone was ready to help me whenever I got stuck. The experience of working on MediaGoblin has been very pleasant. I hope to continue working on blogging system after GSoC and help in maintaining and extending it.