Smartphone Article Component for Smartphone

The templates parts for content page. The blog's article part is different from this page.

The desktop browser version is Article part.

Appearnce

The appearance of article part is below.

smart phone article part

The article part for smart phone page shows the content of the current document. It replace images for smart phone version and url of links for desktop page into the smart phone's one.

By using this part, you can make content for both desktop browser and smart phone at once.

Edit the design

This template part consists of Html and Style Sheet.

Edit html

The html template to show the article data is below.

The html is just to surround the content data, and show created and updated time of the article.

Edit Style Sheet

The style sheet for the div tag and elements in it is below.

The size of image is specified percentage of parent div tag's width. That is because on smart phone screen, the width of the screen is on of the mobile device.

Server Side Program

Server side program to get article data is below.

This program get the article data of current document node by the SQL. After getting the content, convert it by following function.


The "HtmlSmartPhone.replaceImageAndHref" function do following operations.

  • Generate small image if necessary, and change the src attribute's url into new image generated.
  • Replace url for desktop into one for the smart phone page.



Go to Top