indexu.com » Templates

Custom category listing in browse.html

dody — Sun, 20 Jun 2010 00:13:02 +0000

In earlier post, I show you how to create custom category listing in front page. Now will show you how to create custom category listing in category pages (browse.html). The real challenge here is to construct the category path as we are deep inside category level.

First, you need to remove this tag from browse.html

<%$category%>

Then replace with the following codes

<%php%>
  global $dbConn, $indexu, $cat;
 
  $img_path = $indexu->config['site_url'].'/themes/'.$indexu->config['active_theme'].'/cat';
 
  $query = "select category_id, name, image
            from idx_category
            where parent_id = '$cat'";
  $result = $dbConn->Execute($query);
 
  $limit = $result->RecordCount();
  $i=0;
 
  while ($row = $result->FetchRow()) {
    $i++;
 
    // here we construct the category url, need to fetch the parents
 
    $parents = $dbConn->Lookup('parents', 'idx_category_path', "category_id = '{$row['category_id']}'");
    $arr = explode(';',$parents);
    array_pop($arr);
    array_pop($arr);
    array_shift($arr);
    array_reverse($arr);
 
    unset($path);
 
    foreach ($arr as $k => $v) {
      $name = $dbConn->Lookup('name', 'idx_category', "category_id = '$v'");
      $path .= SEOReplace($name).'/';
    }
 
    $url = $path.SEOReplace($row['name']).'/';
    print "<div class='subList'><a href='$url'>{$row['name']}</a></div> \n";
  }
<%/php%>

Show listing in two columns or more

dody — Tue, 15 Jun 2010 02:15:38 +0000

Bored to have listing in single column? I will show you how to make listing in multiple columns.

Edit rows.html, clean the codes and replace with:

  <%if $number % 2 eq 1%>
    <div class="row_nl">
  <%/if%>
 
  <div class="row_item myrow">
    <img src="http://open.thumbshots.org/image.aspx?url=<%$url%>" alt="<%$title%>" style="border:1px solid #777;">
    <h3><a href="<%$url%>" name="link_<%$link_id%>"><%$title%></a></h3>
    <p><%$description%></p>
    <p><a href="<%$url%>" name="link_<%$link_id%>"><%$url%></a> - <a href="<%$site_url%>/<%$detail_page_url%>"><%t%>details<%/t%></a></p>
    <p>Google PR <img src="<%$site_url%>/googlepr.php?link_id=<%$link_id%>" alt="" /></p>
  </div>
 
  <%if $number % 2 eq 0%>
    </div>
  <%/if%>

Then add these 2 css classes to construct the layout.

.row_nl {
  clear:both;
  width:100%;
  margin-bottom: 10px;
}
 
.row_item {
  margin-right:10px;
  display:inline;
  width:285px;
  float:left;
}

Show category listing as list of images

dody — Mon, 14 Jun 2010 07:47:48 +0000

In this tutorial I will show you how to create an alternative category listing in front page where the categories will be listed as a series of images.

1) Prepare the image files. Create a folder called ‘cat‘ in template folder. Then put the images files here.

2) Edit category image file for each categories with admin panel or phpmyadmin. Put the filename of image file you have prepared for each categories.

3) Edit index.html, add the following code where you want to put this category list.
You can change $item_per_row value as you desire.

<%php%>
  global $dbConn, $indexu;
 
  $item_per_row = 4;
 
  $img_path = $indexu->config['site_url'].'/themes/'.$indexu->config['active_theme'].'/cat';
 
  $query = "select name, image
            from idx_category
            where parent_id = '0'";
  $result = $dbConn->Execute($query);
 
  $limit = $result->RecordCount();
  $i=0;
 
  while ($row = $result->FetchRow()) {
    $i++;
 
    if ($i % $item_per_row == 1) {
      print "";
    }
 
    $url = SEOReplace($row['name']).'/';
    print "
           $img_path/{$row['image']}' title='{$row['name']}' alt='{$row['name']}' />
";
 
    if ($i % $item_per_row == 0 || $i==$limit) {
      print "
";
    }
  }
<%/php%>

4) Add the following css classes into css file, usually style.css

.cat_nl {
  clear:both;
  width:100%;
  margin-bottom: 10px;
}
 
.cat_item {
  margin-right:10px;
  display:inline;
}

Adding dynamic gmap with navigation and zooming

dody — Mon, 14 Jun 2010 00:34:12 +0000

As many of you request how to replace the static gmap image with dynamic gmap which allow navigation and zooming, I made some test how to do this for the easiest way.

Ok. This is the easiest way. We only need to change the template files. Actually only 2 files.

Edit header.html, usually we use

<body>

but now we need to add onload call to js to load gmap only when detail page is accessed.

<%php%>
global $page_identifier;
 
if ($page_identifier=='detail.php') {
  print '';
}
else {
  print "";
}
<%/php%>

Edit detail_link.html, add the div container to show the map, it must have id gmapnav_canvas.

<h3>Location Map</h3>
<div id="gmapnav_canvas" style="width: 640px; height: 400px;text-align:center;margin: 20px;"></div>

Next, the last step is to construct the js code for google map. Edit detail_link.html, you can put the code at the of this file.

<%php%>
 
  $api_key = "";
 
  global $dbConn;
  $query = "select * from idx_link where link_id = '{$_REQUEST['linkid']}' limit 1";
  $result = $dbConn->Execute($query);
 
  $address  = $result->Fields("address");
  $city  = $result->Fields("city");
  $zip  = $result->Fields("zip");
  $state  = $result->Fields("state");
  $country  = $result->Fields("country");
 
  $loc = urlencode("$address, $city, $state, $zip, $country");
 
  $api_req = 'http://maps.google.com/maps/geo?q='.$loc.'&key='.$api_key.'&sensor=false&output=csv';
 
  $api_result = file_get_contents($api_req);
  $arr = explode(',',$api_result);
 
  if ($arr[0]=='200') {
    $latlng = $arr[2].','.$arr[3];
 
    $gmap_js = "
    
    
    ";
  }
 
  print $gmap_js;
<%/php%>

How to make slider work for your template

dody — Fri, 04 Jun 2010 07:07:20 +0000

Indexu use stepcarousel.js for image slider. I realize that the slider need to be customized for each template.
Here is some direction how to make it work for any templates you want.

1) Check your header.html file, make sure you have base tag and jquery loaded. Here is my html head section to start:

  <link href="<%$tpl_base%>/jquery.autocomplete.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8">
	<%foreach from=$additional_js key="name_js" item="file_js" name="addition_js"%>
    <script type="text/javascript" src="<%$file_js%>"></script>
  <%/foreach%>
  <script type='text/javascript' src='<%$tpl_base%>/jquery.js'></script>
  <script type='text/javascript' src='<%$tpl_base%>/jquery.autocomplete.min.js'></script>
 
	<script type="text/javascript">
  jQuery(document).ready(function($){
    $("#keyword").autocomplete("<%$site_url%>/autocomplete.php?mode=link");
  });
	</script>
 
  <base href="<%$site_url%>/" />

2) In index.html, call the slider block.

<%block_slide max_item="20"%>

3) Open /blocks/block.slider.html, notice the slider parameter and there are important html class: slideshow and stepcarousel. Later you will need to set the css width of these class. Also make attention with navigation button (left/right) defaultbuttons, you may want to replace the image and adjust the position.

<%if $link%>
    <script type="text/javascript" src="<%$tpl_base%>/stepcarousel.js"></script>
    <script type="text/javascript">
 
    stepcarousel.setup({
      galleryid: 'mygallery', //id of carousel DIV
      beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
      panelclass: 'panel', //class of panel DIVs each holding content
      autostep: {enable:true, moveby:1, pause:2000},
      panelbehavior: {speed:500, wraparound:true, persist:true},
      defaultbuttons: {enable: true, moveby: 1, leftnav: ['<%$tpl_base%>/images/play_l.png', -5, 35], rightnav: ['<%$tpl_base%>/images/play_r.png', -20, 35]},
      statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
      contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
    })
 
    </script>
<%$hook_html_block_slide_begin%>
				<div class="content_box_full slideshow">
        <div id="mygallery" class="stepcarousel">
            <div class="belt">
	<%$link%>
            </div>
          </div>
					<div class="clear"></div>
				</div>
 
 
<%$hook_html_block_slide_end%>
<%/if%>

4) Open /blocks/block.slider_row.html, you may want to customize something here. In most case, just leave it as it is.

<%$hook_html_block_slide_rows_begin%>
 
  <div class="panel">
    <a href="<%$site_url%>/<%$detail_page_url%>" name="link_<%$link_id%>"><img src="http://open.thumbshots.org/image.aspx?url=<%$url%>" alt="<%$title%>"></a>
  </div>
 
<%$hook_html_block_slide_rows_end%>

5) Now you need to customize the css, you can use main.css, add and adjust the following css code to suit your need. Usually you need to change .slideshow width and .stepcarousel width.

.slideshow {
  background: #ddd;
  width:570px;
}
 
.stepcarousel{
  position: relative; /*leave this value alone*/
  overflow: scroll; /*leave this value alone*/
  width: 555px; /*Width of Carousel Viewer itself*/
  height: 115px; /*Height should enough to fit largest content's height*/
  margin: 5px;
  margin-top:0;
}
 
.stepcarousel .belt{
  position: absolute; /*leave this value alone*/
  left: 0;
  top: 0;
}
 
.stepcarousel .panel{
  float: left; /*leave this value alone*/
  overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
  margin: 10px; /*margin around each panel*/
  width: 120px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
 
.stepcarousel .panel img {
  padding: 2px;
  background: #fff;
}

6) Check your template root folder to have needed js files: jquery.js and stepcarousel.js.

Show uploaded image from image custom field

dody — Fri, 04 Jun 2010 06:11:51 +0000

With custom field, you can have a new data field with image type. In add and modify link form the field will be added automatically.

To show the uploaded image in the listing page and detail page, you need to add the following code in template file: rows.html for listing and detail_link.html for detail page.

<img src="<%$theimage%>" />

Change <%$theimage%> with custom field name you have.

Failed to load trackclick.js.php

dody — Wed, 02 Jun 2010 17:56:31 +0000

Today a user report that the outgoing hits doesn’t work on portal_dir template.

A quick check:
1) footer.html

11	<script language="javascript" type="text/javascript" src="<%$tpl_base%>/trackclick.js.php"></script>

2) check whenever trackclick.js.php file exist in template folder.
3) check the link that count has proper “name” attribute

If everything look good, then it should work well.

However in this user case it doesn’t work well. Somehow trackclick.js.php never been loaded. When I rename to .js file, it work well. When I try to load from other template folder (komet or kosmos), then it work well. So it should be the file access permission, the .htaccess file. For me, .htaccess file seems good too. So I decide to do a quick fix for this installation.

1) edit footer.html to load trackclick.js (instead of .php file)

11	<script language="javascript" type="text/javascript" src="<%$tpl_base%>/trackclick.js.php"></script>

2) rename trackclick.js.php to trackclick.js
3) edit trackclick.js

var base = "http://www.domainname.com";
 
var indexulinks = document.getElementsByTagName("a");
for(i = 0; i < indexulinks.length; i++) {
	if (indexulinks[i].name != '' && (indexulinks[i].name.indexOf("link") != -1 || indexulinks[i].name.indexOf("cat") != -1)) {
		indexulinks[i].onclick = indexu_click;
    indexulinks[i].oncontextmenu = indexu_click;
	}
}
 
function indexu_click() {
  if (document.images) {
    img = new Image();
    img.src = base+"/trackclick.php?id=" + this.name;
 
    var date = new Date();
    do {
      var curDate = null;
      curDate = new Date();
    }
    while(curDate-date < 300);
    date = null;
    curDate = null;
  }
  return true;
}