User Tools

Site Tools


te3:toplist_tutorial3
no way to compare when less than two revisions

Differences

This shows you the differences between two versions of the page.


te3:toplist_tutorial3 [2014/11/17 06:20] (current) – created moderator
Line 1: Line 1:
  
 +====== Create a thumb toplist ======
 +~~NOTOC~~
 +
 +<WRAP caution>
 +We'll be using three fictitious trades (''<nowiki>http://www.yourtrade1.com/</nowiki>'', ''<nowiki>http://www.yourtrade2.com/</nowiki>'' and ''<nowiki>http://www.yourtrade1.com/</nowiki>'') for the purpose of this tutorial. If your database is empty at this stage, [[te3:add_trade_single_tutorial|add three of your trades]]. If your database includes more than three trades, your results will differ from ours.
 +</WRAP>
 +
 +Since **thumb toplist** gets much more attention than the ordinary text toplist, we should try to create one:
 +
 +===== 1. Download thumbs =====
 +
 +The first thing you need are images. TE3 can automatically grab images from your trades and crop them to preferred size. Navigate to the Toplist / [[te3:toplist_thumb_grabber|Thumb grabber]] menu. 
 +
 +“Thumb grabber” module can be set to crawl trades in your database every x hours and to **automatically** download a specified amount of thumbs from trader's website. We are going to trigger "Thumb grabber" **manually**:
 +
 +==== Step by step ====
 +
 +{{:te3:tut_step_1.png?nolink|}} You can normally download as many thumbs per trade as you want, but we only need one thumb right now - set ''Thumbs per trade'' to ''1'' and click {{:te3:button_update.png?nolink|}}. 
 +{{:te3:thumb_grabber3.png?nolink|}}
 +
 +{{:te3:tut_step_2.png?nolink|}} TE3 can only download thumbs (manually or automatically), if at least one "Thumb crops" condition is set! Click {{:te3:add_button.png?nolink|}} icon, specify conditions for cropping (''Width'', ''Height'' and ''Quality'' are required) and click {{:te3:button_save.png?nolink|}}. 
 +{{:te3:thumb_grabber4.png?nolink|}}
 +
 +{{:te3:tut_step_3.png?nolink|}} After you have specified how many thumbs per trade you want to download and how you want them cropped, click {{:te3:button_download.png?nolink|}} to start the process.
 +{{:te3:thumb_grabber5.png?nolink|}}
 +
 +{{:te3:tut_step_4.png?nolink|}} To view and manage images downloaded by the "Thumb grabber", navigate to Toplist / [[te3:toplist_images|Images]] menu: 
 +{{:te3:tut_toplist_grabber5.png?nolink|}}
 +In this menu you can manage all “Images” for all trades from a single page. Simply place your mouse pointer over {{:te3:icon_preview.png?nolink|}} icon to view an individual thumb.
 +
 +
 +----
 +
 +
 +===== 2. Create a thumb toplist template =====
 +
 +TE3 toplist module can build toplists from your trades database, based on a template file and the first thing you need to do is to **build a toplist template** using TE3 template tags. 
 +
 +++++ List of TE3 template tags |
 +
 +|< 100% 15% 25% 60% >|
 +^ Parameter ^ Description ^ Example ^
 +| <color blue>##img:x##</color> | <color blue>Image</color> | <color blue>##img:1## will print image for trade 1. If multiple images exist for the respective trade, they'll be randomly rotated each time toplist is generated.</color>
 +| ''##name:x##'' | **Site name** | ''##name:4##'' will print "site name" for trade number ''4''. |
 +| ''##domain:x##'' | **Domain name** (domain.com) | ''##domain:6##'' will print "domain name" for trade number ''6''. |
 +| ''##raw:x##'' | **Incoming raws** | ''##raw:7##'' will print "incoming raws" for trade number ''7''. |
 +| ''##uniq:x##'' | **Incoming uniques** | ''##uniq:3##'' will print "incoming uniques" for trade number ''3''. |
 +| ''##clk_t:x##'' | **Clicks sent to trades** | ''##clk_t:4##'' will print "clicks sent to trades" for trade number ''4''. |
 +| ''##clk_tg:x##'' | **Clicks sent to trades & galleries** | ''##clk_tg:2##'' will print "clicks sent to trades & galleries" for trade number ''2''. |
 +| ''##out:x##'' | **Outgoing hits** | ''##out:5##'' will print "outgoing hits" for trade number ''5''. | 
 +| ''##out_uniq:x##'' | **Outgoing uniques** | ''##out_uniq:6##'' will print "outgoing uniques" for trade number ''6''. |
 +| ''##value:x##'' | **Value of a trade** (Clk T / Out T) | ''##value:2##'' will print "value of a trade" for trade number ''2''. |
 +| ''##owed:x##'' | **Owed** (Outgoing list / traffic distribution is based on the owed ratio) | ''##owed:13##'' will print "owed" for trade number ''13''. | 
 +| ''##ratioraw:x##'' | **Ratio raw** (Out T / Raw) | ''##ratioraw:5##'' will print "ratio raw" for trade number ''5''. |
 +| ''##balanceraw:x##'' | **Balance raw** (outgoing total - incoming raws) | ''##balanceraw:3##'' will print "balance raw" for trade number ''3''. | 
 +| ''##balanceratioraw:x##'' | **Balance ratio raw** (incoming raws / outgoing total) | ''##balanceratioraw:8##'' will print "balance ratio raw" for trade number ''8''. | 
 +| ''##balanceuniq:x##'' | **Balance uniq** (outgoing total - incoming uniques) | ''##balanceuniq:3##'' will print "balance uniq" for trade number ''3''. |
 +| ''##balanceratiouniq:x##'' | **Balance ratio uniq** (incoming uniques / outgoing total) | ''##balanceratiouniq:8##'' will print "balance ratio uniq" for trade number ''8''. |
 +| ''##return_url:x##'' | **Return URL** (<nowiki>http://www.example.com/</nowiki>) | ''##return_url:7##'' will print "return URL" for trade number ''7''. |
 +| ''##nick:x##'' |** Webmaster's nickname** | ''##nick:2##'' will print "webmaster's nickname" for trade number ''2''. "Nickname" is an optional attribute. If you would like to use this toplist tag, make sure you have it entered. |
 +| ''##email:x##'' | **Webmaster's e-mail** | ''##email:8##'' will print "webmaster's e-mail" for trade number ''8''. "E-mail" is an optional attribute. If you would like to use this toplist tag, make sure you have it entered. |
 +| ''##icq:x##'' | **Webmaster's ICQ** | ''##icq:5##'' will print "webmaster's ICQ" for trade number ''5''. "ICQ" is an optional attribute. If you would like to use this toplist tag, make sure you have it entered. |
 +
 +++++
 +
 +TE3 template tags allow you to create completely unique toplists, but for the purpose of this tutorial use the example template we've prepared below:
 +
 +<code>
 +
 +<table style="width:100%">
 + <tr>
 +
 +  <td style="width:400px;text-align:center;vertical-align:top">
 +   <h3>##desc:1##</h3>
 +   <a href="/te3/out.php?id=##domain:1##">
 +   <img src="##img:1##" style="align:right;width:150px;height:150px;border:0">
 +   </a>
 +  </td>
 +
 +  <td style="width:400px;text-align:center;vertical-align:top">
 +   <h3>##desc:2##</h3>
 +   <a href="/te3/out.php?id=##domain:2##">
 +   <img src="##img:2##" style="width:150px;height:150px;border:0">
 +   </a>
 +  </td>
 +
 +  <td style="width:400px;text-align:center;vertical-align:top">
 +   <h3>##desc:3##</h3>
 +   <a href="/te3/out.php?id=##domain:3##">
 +   <img src="##img:3##" style="width:150px;height:150px;border:0">
 +   </a>
 +  </td>
 +
 + </tr>
 +</table>
 +
 +</body>
 +</html>
 +
 +</code>
 +
 +
 +----
 +
 +===== 3. Add new toplist =====
 +
 +Once you have created a toplist template, you have to **add it to yor TE3.**
 +
 +
 +==== Step by step ====
 +{{:te3:step_test8.png?nolink|}}
 +
 +{{:te3:tut_step_1.png?nolink|}} **Open "Add new" window** \\ 
 +Navigate to the ''Toplist / Templates'' menu, click on the {{:te3:interface_plus.png?nolink|}}''Add new'' button and open "Add new" pop-up window.
 +
 +{{:te3:tut_step_2.png?nolink|}} **Select input method**  \\ 
 +You can choose between two different [[te3:toplist_input|input methods]], we'll test "Form input" method in this tutorial.
 +
 +{{:te3:tut_step_3.png?nolink|}} **Add toplist template** \\ 
 +Now you have to add a toplist template into the textarea (if you use "File input" method, it is assumed, you have already uploaded your template at this stage). Copy-paste the example template we've prepared above.   
 +
 +{{:te3:tut_step_4.png?nolink|}} **Save template as**  \\ 
 +Specify where would you like to save your template e.g., ''/full/path/to/public_html/your_TE3_directory/toplist/something.tpl'' \\ 
 +(this is a toplist file with template tags)
 +
 +{{:te3:tut_step_5.png?nolink|}} **Output toplist as**  \\ 
 +Next, you have to enter File output path, e.g., ''/full/path/to/public_html/your_TE3_directory/toplist/something.html'' \\ 
 +(this is an output file - template tags get replaced with real values) 
 +
 +{{:te3:tut_step_6.png?nolink|}} **Save toplist**  \\ 
 +Click {{:te3:button_save.png?nolink|}} button in the bottom right corner.
 +
 +
 +
 +----
 +
 +
 +===== 4. Preview and edit the toplist =====
 +
 +The new toplist is already added to the "Existing" table. 
 +
 +{{:te3:tut_toplist5.png?nolink|}}
 +
 +Close "Add new" window and click {{:te3:button_preview2.png?nolink|}} icon to see the ''Preview'' of what the toplist will look like. Ours looks like this:
 +
 +{{:te3:tut_toplist_output5.png?nolink|}}
 +
 +
 +Take a look at html source for our output. You can see that TE3 template tags were replaced with real values - description tags ''##desc:x##'' were replaced with your descriptions, image tags ''##img:x##'' were replaced with thumbs downloaded by "Thumb grabber" and thumbs also serve as links to your trades:
 +
 +{{:te3:tut_toplist_source7.png?nolink|}}
 +
 +You can easily edit your toplist and test its output - click {{:te3:overview_edit_icon.png?nolink|}} ''Edit'' icon for the respective toplist, then {{:te3:button_save.png?nolink|}} your changes, and click {{:te3:button_preview2.png?nolink|}} to ''Preview'' the toplist again. 
 +
 +----
 +
 +
 +===== 5. Include toplist into your web page =====
 +
 +After you have created and added a toplist, it has to be [[te3:toplist_include|included]] into your web page!
 +
 +----
 +
 +
 +===== Related topics =====
 +
 +  * [[te3:toplist_index|Toplist templates]] - view toplist template syntax, learn how to add and manage toplists 
 +
 +  * [[te3:toplist_images|Toplist images]] - learn how to manage your images 
 +
 +  * [[te3:toplist_thumb_grabber|Thumb grabber]] 
te3/toplist_tutorial3.txt · Last modified: 2014/11/17 06:20 by moderator

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki