Add thumbnail Image to OurJS blog engine

Plugins, by newghost Support 1408952525901


OurJS is a high performance blog engine powered by node.js, all the data stored in the cache layer(memory) and sync to JSON files when needs to be updated, it's also support mongodb etc.  (This site is running on Amazon EC2 free tier)

Here is the way to add custom thumbnail image to ourjs open source blog engine. As showed below, we currently using text to display category. It's also a link which link to its category.


Our task to change the yellow region to an image.

Update schema

We need to update the schema of articles, the default location is here: ./data/schema/article.js

Add a custom field: imageurl, type is url, i.e:

{
"_id" : "id"
, "title" : "shown,string"
, "url" : "url"
, "imageurl" : "url"
, "verify" : "shown,int"
, "category" : "shown,string"
, "keyword" : "shown"
, "summary" : "html"
, "content" : "html"
, "description" : "string"
, "hottest" : "json"
, "similar" : "json"
, "replies" : "json"
, "postdate" : "int"
, "poster" : "shown"
, "publishTime" : "int"
, "replyTime" : "int"
}

After you change this, restart the service (shutdown and reopen the ourjs.sh is OK)

Then enter the data manager to check whether the field is work i.e: http://localhost:8054/admin/data  (You need to login with administrator  role, default user: guest password: 123456)


Add an article, you will see the field you just added:


Data Manager is design for administrator. You can change any field in the JSON data.

Next step, we need to add this field to the page that normal user can edit it.

Update Edit template

Find the template of edit page,  The default location is (theme magazine) .\web\magazine\edit.tmpl

Add the imageurl to the right place. (ps: by default we use doT as the template engine.)

      {{?}}
<label>Title
<input type="text" name="title" value="{{=it.title || ''}}" placeholder="Title">
</label>
<br><br>
<label>Thumbnail Image
<input type="text" name="imageurl" value="{{=it.imageurl || ''}}" placeholder="Thumbnail Image">
</label>
<br><br>

Using "New Post" to verify: complete all the inputs:

1) imageurl is the url format.

2) Verify method is "publish to Homepage"


Then submit.

Update display template

After you add this article with thumbnail image. We need to render it on the homepage, find the template of homepage, i.e: ./web/magazine/home.tmpl

Add display rules:


Now, it's all done, refresh the homepage to check, you will see the thumbnail now.







4 COMMENTS