Manga

[RateU]

Requirement: XThreads

This is a simple Manga forum example application using XThreads.

• Create/Edit a forum with these settings:
  
  • Template Prefix: manga_
  • Language File Prefix: manga_
  • Enable XThreads' Inline Forum Search: Yes
  • Allow Blank Post Message: Yes
    
• Create Custom Thread Fields:
  
  • Manga for the Manga list
    • Title: Manga
    • Key: manga
    • Applicable Forums: Select the Manga forum
    • Hide on Show thread: Checked
    • Editable by / Required Field? Everyone (required)
    • Values List:
      
      Code:

      1{|}Naruto 2{|}Bleach 3{|}Fairy Tail

      ---

      Modify it as our needs

    • Field Input Height: 1
    • Formatting Map List:
      
      Code:

      1{|}<a href="{$forumurl_q}filtertf_manga=1">Naruto</a> 2{|}<a href="{$forumurl_q}filtertf_manga=2">Bleach</a> 3{|}<a href="{$forumurl_q}filtertf_manga=3">Fairy Tail</a>

      ---

      Modify it as our needs. This setting is related to the Values List setting.

    • Filtering Mode: Exact match
    • Underlying Data Type: Integer (unsigned, usually 32-bit)
      
  • Chapter
    • Title: Chapter
    • Key: manga_chapter
    • Applicable Forums: Select the Manga forum
    • Hide on Show thread: Checked
    • Display Order: 2
    • Editable by / Required Field? Everyone (required)
    • Maximum Text Length: 5
    • Text Mask Filter: Digits
    • Field Input Width: 5
    • Filtering Mode: Exact match
    • Underlying Data Type: Integer (unsigned, usually 32-bit)
      
  • Images, it will be used as pages.
    Note that we'll use multiple images here. There is a limit for Upload Max File Size and Max Post Size. Also there is a limit for the maximum number of files that can be uploaded via a single request (max_file_uploads). Since mostly a chapter contains more than 20 pages (images), to "bypass" the limit, it is better to hit the preview button after uploading each 5 images at one time, then continue uploading the next 5 images. It also helps reduce the process for each image uploaded in one time.
    • Title: Images
    • Key: manga_images
    • Applicable Forums: Select the Manga forum
    • Hide on Show thread: Checked
    • Input Field Type: File
    • Display Order: 3
    • Editable by / Required Field? Everyone (required)
    • Valid File Extensions: png|jpg|jpeg
      Modify it as our needs
    • Maximum File Size: 307200
      Modify it as our needs. It is in bytes.
    • Only Accept Image Files: Yes
    • Minimum Image Dimensions: 800x800
      Modify it as our needs
    • Maximum Image Dimensions: 1920x1920
      Modify it as our needs
    • Image Thumbnail Generation
      
      Code:

      smthumb=scale_min(160, 120)->crop(160,120)

      ---

      It will crop the image to 160x120. Modify it as our needs.

    • Allow multiple values for this field: Yes
    • Maximum Number of Values: 24
      The maximum number of images/pages can be uploaded. Modify it as our needs.
    • Description: Please upload the images ordered by the page. It is recommended you hit the Preview button after uploading 5 images.
      Modify it as our needs.
    • Display Format:
      
      Code:

      <div style="text-align: center">{VALUE}</div><br class="clear" /> <link rel="stylesheet" href="cache/lightbox/css/lightbox.css"> <script src="cache/lightbox/js/lightbox.min.js"></script> <script>lightbox.option({fitImagesInViewport:false});</script>

      ---

      We use Lightbox to view the images, since the lightbox has Next and Previous navigation as "pages" navigation.
      So, download it, and place it inside cache/lightbox/ directory.
      Note that each image will be displayed in full size after clicking each thumbnail, ignoring the viewport. If you don't want it to be like that, remove this code from the display format above:
      

      Javascript Code

      <script>lightbox.option({fitImagesInViewport:false});</script>

      ---

    • Multiple Value Delimiter:
      
      HTML Code

      <span></span>

      ---

    • Display Item Format:
      
      Code:

      <a href="{URL}" data-lightbox="manga"><img src="{URL}/thumbsmthumb" alt="" style="border: 1px solid #c1c1c1; padding: 5px; margin: 20px;" /></a>

      ---

      This is for displaying each thumbnails. Modify it as our needs.
      

    
    
• Create new templates:
  
  • manga_forumdisplay_thread
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

    <div class="inline_row float_left" style="width: 23%; padding: 10px;"> <div class="{$bgcolor}{$thread_type_class}" style="text-align: center; padding: 10px;"> <div class="tcat"> {$modbit} <span class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}"><a href="{$thread['threadlink']}">{$thread['subject']}</a></span> </div> <a href="{$thread['threadlink']}"><img src="{$GLOBALS['threadfields_x']['manga_images']['items'][0]['thumbs']['smthumb']['url']}" alt="" style="padding: 5px;" /></a> <div style="padding: 5px;"> <div>{$threadfields['manga']}</div> {$lang->manga_chapter} {$threadfields['manga_chapter']} <div class="author smalltext">{$lang->by} {$thread['profilelink']}</div> <div class="smalltext">{$thread['threaddate']}{$lang->comma} {$thread['threadtime']}</div> {$thread['multipage']} </div> <div class="tfoot smalltext"> <span class="float_right">{$lang->replies}: <a href="javascript:MyBB.whoPosted({$thread['tid']});">{$thread['replies']}</a>{$unapproved_posts}</span> <span class="float_left">{$lang->views}: {$thread['views']}</span> <br class="clear" /> {$gotounread} <span class="lastpost smalltext"><a href="{$thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink}{$lang->comma} {$lastpostdate}</span> </div> </div> </div>

    ---

  • manga_postbit_first
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

    {$ignore_bit} <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a> <div class="post {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}"> <div class="post_author"> {$post['useravatar']} <div class="author_information"> <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br /> <span class="smalltext"> {$post['usertitle']}<br /> {$post['userstars']} {$post['groupimage']} </span> </div> <div class="author_statistics"> {$post['user_details']} </div> </div> <div class="post_content"> <div class="post_head"> {$post['posturl']} {$post['icon']} <span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span> {$post['subject_extra']} </div> <div class="post_body scaleimages" id="pid_{$post['pid']}"> <div style="text-align: center;"> <img src="{$GLOBALS['threadfields_x']['manga_images']['items'][0]['url']}" alt="" /> </div> <br class="clear" /> {$GLOBALS['threadfields']['manga_images']['value']} <br class="clear" /> {$post['message']} </div> {$post['attachments']} {$post['signature']} <div class="post_meta" id="post_meta_{$post['pid']}"> {$post['iplogged']} </div> </div> <div class="post_controls"> <div class="postbit_buttons author_buttons float_left"> {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']} </div> <div class="postbit_buttons post_management_buttons float_right"> {$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']} </div> </div> </div>

    ---

    I only use horizontal postbit (based on the default 1.8 postbit template). If we want to use classic too, create manga_postbit_first_classic, copy and paste you default postbit_classic into the new template. Basically, we only need to put this code inside the templates:
    

    Code:

    1 2 3 4 5 6

    <div style="text-align: center;"> <img src="{$GLOBALS['threadfields_x']['manga_images']['items'][0]['url']}" alt="" /> </div> <br class="clear" /> {$GLOBALS['threadfields']['manga_images']['value']} <br class="clear" />

    ---

  • manga_forumdisplay_searchforum_inline
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

    <form action="forumdisplay.php" method="get" style="text-align: center;"> <strong class="smalltext">{$lang->manga_manga}</strong> <select name="filtertf_manga"> <option value="">{$lang->manga_all_manga}</option> <option value="1"{$GLOBALS['filters_set']['manga']['selected'][1]}>Naruto</option> <option value="2"{$GLOBALS['filters_set']['manga']['selected'][2]}>Bleach</option> <option value="3"{$GLOBALS['filters_set']['manga']['selected'][3]}>Fairy Tail</option> </select> <strong class="smalltext">{$lang->manga_chapter}</strong> <input type="number" class="textbox" name="filtertf_manga_chapter" value="{$GLOBALS['filters_set']['manga_chapter']['value']}" /> <strong class="smalltext">{$lang->manga_title}</strong> <input type="text" class="textbox" name="search" value="{$searchval}" /> {$gobutton} <input type="hidden" name="fid" value="{$fid}" /> <input type="hidden" name="sortby" value="{$sortby}" /> <input type="hidden" name="order" value="{$sortordernow}" /> <input type="hidden" name="datecut" value="{$datecut}" /> </form>

    ---

  • manga_forumdisplay_threadlist
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

    <div class="float_left"> {$multipage} </div> <div class="float_right"> {$newthread}{$inlinemodcol} </div> {$searchforum} <br class="clear" /> {$selectall} {$threads}{$nullthreads} <br class="clear" /> <div class="float_left"> {$multipage} </div> <div class="float_right" style="margin-top: 4px;"> {$newthread} </div> <br class="clear" /> <br /> <div class="float_right" style="text-align: right;"> {$inlinemod} {$forumjump} </div> <br class="clear" /> {$inline_edit_js}

    ---

  • manga_forumdisplay_thread_modbit
    
    HTML Code

    <div class="float_right" style="white-space: nowrap"><input type="checkbox" class="checkbox" name="inlinemod_{$multitid}" id="inlinemod_{$multitid}" value="1" {$inlinecheck} /></div>

    ---

  • manga_forumdisplay_inlinemoderation_selectall
    
    HTML Code

    1 2 3 4 5 6

    <div id="selectAllrow" class="hiddenrow"> <div class="selectall" style="margin: 10px 0; padding: 10px;">{$lang->page_selected} <a href="#" onclick='inlineModeration.selectAll();'>{$lang->select_all}</a></div> </div > <div id="allSelectedrow" class="hiddenrow"> <div class="selectall" style="margin: 10px 0; padding: 10px;">{$lang->all_selected} <a href="#" onclick='inlineModeration.clearChecked();'>{$lang->clear_selection}</a></div> </div >

    ---

  • manga_forumdisplay_inlinemoderation_col
    
    HTML Code

    <input type="checkbox" name="allbox" onclick="inlineModeration.checkAll(this)" />

    ---

  • manga_forumdisplay_sticky_sep
    
    HTML Code

    <div class="trow_sep clear">{$lang->sticky_threads}</div>

    ---

  • manga_forumdisplay_threads_sep
    
    HTML Code

    <br class="clear" /> <div class="trow_sep">{$lang->normal_threads}</div>

    ---

• We use custom language file for this (attached). Upload it to our inc/languages/english/ directory or other language dirs.
  

Please tell me if I do something wrong with this example application. I'm still learning.