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.

[ZiNgA BuRgA]

Cool application.  Could be useful for gallery type applications too!

The uploading part is, admittedly, a bit problematic though (always managing to push the limits =P).

[RateU]

Thanks, Yumi.

(11-08-2015 10:10 PM)ZiNgA BuRgA Wrote:  Could be useful for gallery type applications too!

The uploading part is, admittedly, a bit problematic though (always managing to push the limits =P).

LOL yeah. I've got the idea when visiting a manga website. Knowing all of the "pages" are about images, so I think the similar functionality could be done by using XThreads, since XThreads has an ability to upload multiple images in one thread, thus it has a drag and drop feature to arrange the images order.
The problem was the php.ini setting. So hitting the preview button for each X images upload can "bypass" it

[nguyenac]

nice
can I post images from others hosting???
my space doesn't enough

[RateU]

You can, but you can't control the thumbnail size to be created. You can use Multiline Textbox input type and accept multiple values for replacing the Multi Files input type.

Here is a simple example for this (replace the Images input type with this one):

• Title: Images
• Key: manga_images
• Applicable Forums: Select the Manga forum
• Hide on Show thread: Checked
• Input Field Type: Multiline Textbox
• Display Order: 3
• Editable by / Required Field? Everyone (required)
• Allow multiple values for this field: Yes
  Since we use Multiline Textbox, so we need to use newlines for each links.
  Please use direct image links on it.
• Maximum Number of Values: 24
  The maximum number of "images/pages" can be linked. Modify it as our needs.
• Text Mask Filter: URL (HTTP/S)
  Modify it as our needs (if only allowing for a specific images services or have a specific URL pattern).
• Description: Please enter the images link ordered by the page. Use newlines (ENTER) for each links.
  Modify it as our needs.
• Display Format:
  
  HTML 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>

  ---

• Multiple Value Delimiter:
  
  HTML Code

  <span></span>

  ---

• Display Item Format:
  
  HTML Code

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

  ---

  The above code will resize the large image to 120x120, but the actual images are still loaded. The bad things is, if there are many images on the page, it will be loaded very slow.
  To "resolve" it, some images sharing/upload-er services have a specific API for using the thumbnail. Usually it has a "mark" inside the original image links. So maybe we need to change the second {VALUE} to the thumbnail link.
  

Without modifying any templates (for testing reason), here is the scr:
   

[ZiNgA BuRgA]

Replace File fields with Text fields (for URL).
You'll need to tweak a few other things for it to fully work.
Be aware of all the implications of relying on external hosting though.

[nguyenac]

(11-13-2015 01:41 AM)RateU Wrote:  You can, but you can't control the thumbnail size to be created. You can use Multiline Textbox input type and accept multiple values for replacing the Multi Files input type.

Here is a simple example for this (replace the Images input type with this one):

• Title: Images
• Key: manga_images
• Applicable Forums: Select the Manga forum
• Hide on Show thread: Checked
• Input Field Type: Multiline Textbox
• Display Order: 3
• Editable by / Required Field? Everyone (required)
• Allow multiple values for this field: Yes
  Since we use Multiline Textbox, so we need to use newlines for each links.
  Please use direct image links on it.
• Maximum Number of Values: 24
  The maximum number of "images/pages" can be linked. Modify it as our needs.
• Text Mask Filter: URL (HTTP/S)
  Modify it as our needs (if only allowing for a specific images services or have a specific URL pattern).
• Description: Please enter the images link ordered by the page. Use newlines (ENTER) for each links.
  Modify it as our needs.
• Display Format:
  
  HTML 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>

  ---

• Multiple Value Delimiter:
  
  HTML Code

  <span></span>

  ---

• Display Item Format:
  
  HTML Code

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

  ---

  The above code will resize the large image to 120x120, but the actual images are still loaded. The bad things is, if there are many images on the page, it will be loaded very slow.
  To "resolve" it, some images sharing/upload-er services have a specific API for using the thumbnail. Usually it has a "mark" inside the original image links. So maybe we need to change the second {VALUE} to the thumbnail link.
  

Without modifying any templates (for testing reason), here is the scr:

i got error
"Warning [2] Illegal string offset 'value' - Line: 50 - File: inc/functions_post.php(799) : eval()'d code PHP 5.4.40 (Linux)"

[RateU]

When you got the error? After posting the thread?

[nguyenac]

(11-15-2015 01:04 AM)RateU Wrote:  When you got the error? After posting the thread?

right, this' scr
   

[RateU]

Are you using this code for displaying it on the postbit_first?

(11-08-2015 07:01 AM)RateU Wrote:  

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" />

---

If so, you need to replace the codes above with this one for the MultiLine Textbox:

Code:

{$GLOBALS['threadfields']['manga_images']}

---

For grabbing the first URL, you can use this code:

Code:

{$GLOBALS['threadfields_x']['manga_images']['value'][0]}

---