[Part-4] Understanding Content Manager in Wapka - Coding Image and Directory Lisiting

Hi, in this part I will explain how you can show your images saved in the image category in content manager to the users with codes and newbies easy forms. Also you will find complete instructions on pagination in listing. I will cover both Deployment tools and Own Syntax. Lets learn it.

Please follow these three tutorial in this series before continuing to this one.



Part 1: Click Here
Part 2: Click Here
Part 3: Click Here


In this tutorial, you need basic knowledge of content manager, you can find each tutorial in this series and please follow the sequence to better understand this feature of wapka.

Coding Method:

Here I am first using coding technology to show wapka content manager images. This is not recommended to the novice or newbie users. Please skip to the deployment tool method.. Are you ready, let built our category pageto show all categories we created in part 3 in Images section of content manager.

1. Login to your free wapka account
2. Goto Admin Mode
3. Create New Page by following these method.
1. Click ::Edit Site:: link at the bottom
2. Click "New Page" link
3. Write Site Name in first text box as Images.
4. Click Submit Button.
5. Do these steps two time and create the second page for displaying images stored in category.
4. Now open the page we created in step 3.4
1. Click the ::Edit Site:: link
2. Click WML/xHTML code link
3. add the following code and click submit button.
   

   :list-category-image: ::
   • %name% [%total%]
   :: :/list-category-image:

   
   Now You should change following in above code
   1. Change ID with the second page ID [Step 3.5] where we will show the category images.
4. Now it should display the catedories from Content Manager -> Images
5. Now open the page, we created in step 3.5.
1. Click the ::Edit Site:: link
2. 
   Click WML/xHTML code link
3. 
   Add the following code and click submit button.
   

   :list-image: cid=:geti-cid(XXXXX):,l=YYYYY,s=:geti-page(1):,o=downtotal:: :: :/list-image:

   	Download %title%
   	Size: %filesize%;

   :paging: n=:geti-page(1):,u=site_:getid-site:.%ext%?get-cid=:geti-cid(0):&get-page=%n% :: %prev%-%n%-%n%-%n%-%next% :/paging:

   
   
   Now You should change following in above code
   
   1. Change XXXXX with the default category ID from Content Manager, you can find more info in my previous tutorial in this series.
   2. Change YYYYY with the limit of images on one page.
4. You have successfully added the images to your display page.
6. Now to check, if everything is ok.. Open your first page [Step 4] and click the category link, if you have not added any categories you will not find any category displayed. It should forward you to the list page we created in step 3.5. You will see all images stored in this category whose link you clicked.
7. Thats it for this section, you have successfully added the category images to your site with coding method. Any help needed, please comment.

Deployment Tool:

1. Login to your free wapka account
2. Goto Admin Mode
3. Open page where you wanted to add the categories list.
1. 
   Click ::Edit Site:: link at the bottom
   
2. Goto Content Manager by clicking "Content Manager" link under support.
3. Click "Image" link
4. Click "Deployment tools" at the bottom
5. Click "Create category pages for Image" link from several links.
6. You will see simple form to fill out and add categories list. Bellow is one by one illustration.
1. Select category: You can select Root or any other category. If you select any other category then the categories created in the selected category will be displayed. Root will display all Root level categories and no sub categories.
2. Page format: In this textarea field you can set how you categories will be listed. You can use many syntax there. Here are all of them.
1. ::CATEGORIES:: -> It will display your list of categories. You can design it by using CSS class name as content_list_container.
2. You can add any HTML and/or CSS code you want after or at the end of the categories. Like you can display text images or wallpapers etc.
3. Line format for the list of categories: This textarea allows you to set the line format or in other words customize how you link will appear. You can till now use 4 tags init.
1. %name%     the name of this category
2. %lname%     the name of this category with link
3. %total%    the total Image num of this category.
4. %cid%    the unique id of this category
4. Click the "Next Step" button
5. In next step you can preview or add this to your page. To add just click Confirm button.
4.  Open page where you wanted to add the images from categories list.
1. Click ::Edit Site:: link at the bottom
2. Goto Content Manager by clicking "Content Manager" link under support.
3. Click "Image" link
4. Click "Deployment tools" at the bottom
5.  Click "Create list pages for Image" link from several links. 
6. You will find simple form to fill and create list pages in next page. Here are some illustration about the form.
1. Select category: You can select your desired category.
2. Ordering by: You can set order by with ASC and DESC option
3. Page number: You leave it on 1 and if you want any other page, write its numeric value.i.e 5
4. Images per page: You can set images limit per page by writing this textarea.
5. Page format*: This textarea allows you to set page format for list images, it has only one tag and you can use it any where inside any HTML, CSS and even JS.
1. ::IMAGES:: This displays the image list designed in Line Format.
6. Line format*: This allow yous to customize the look and feel of the list and add own styling. It has many tags. Here we make them understandable.
1. %title%     Use this to display image titles.
2. %downtotal% Count of downloads
3. %downdaily% How many downloads today can be displayed by this tag.
4. %filesize% Image Size in KBs
5. %thumburl% This adds the thumb for your images.
6. %viewurl% This allows you to link the image to download page.
7. %width% Width of the image in numeric format
8. %height% Height of the image in numeric format
9. %link_share_fb% URL to share the image on Facebook
10. %link_share_twitter% URL to share image with the twitter audience.
7. If you are done click Preview button.
8. You will see preview with form to add this to the page, simply add it with Confirm button.

Conclusion:

If you are senior member of wapka use Coding method instead and if you are novice users please follow the deployment tool method. If any of the code is not working or you have any other question, feel free to contact us. We are here to help you in your coding.

If you enjoyed this post, Like us on facebook http://facebook.com/dinotricks

For any query you can also write on our facebook wall.
http://fb.com/dinotricks"