Blog Article Component for Smartphone

The template part of smart phone blog article page. This part is used with Smartphone Next and Prev article.

The desktop browser version is Blog Article.


The appearance of this page is below.

smart phone blog article page

This part shows the content of blog article. In addition to that, it replaces the big image into the small image, and replaces link url of desktop page into smart page's one.

Max size of image is different from the mobile device's screen width, therefore it uses style sheet to adjust image size to show finally.

Edit the design

This template part consists of Html and Style Sheet.

Edit html

The Html of blog article part for smart phone is below.

This Html is simply shows the update, created time and the article content. The article content is converted into one of smart phone in the server side script.

Edit Style Sheet

The style sheet for the Html is below.

This style sheet specifies the style of div tag whose id is "#blog-post", and the inner tags. The style sheet defines the max size of the image and iframe by percentage.

Server Side Program

The server side program to get variables used in the Html is below.

This program does following operations.

  1. Get current content from document node by SELECT SQL.
  2. Calculate mobile page's path.
  3. Convert content into one ready for smart phone by HtmlSmartPhone.replaceImageAndHref() function.
  4. Format the blog article's created and updated timestamp.

Go to Top