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 "<div class='cat_nl'>";
}
$url = SEOReplace($row['name']).'/';
print "<div class='cat_item'><a href='$url'>
<img src='$img_path/{$row['image']}' title='{$row['name']}' alt='{$row['name']}' /></a></div>";
if ($i % $item_per_row == 0 || $i==$limit) {
print "</div>";
}
}
<%/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;
} |
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
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 '<body onload="initialize()" onunload="GUnload()">';
}
else {
print "<body>";
}
<%/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 = "
<script src=\"http://maps.google.com/maps?file=api&v=2&key={$api_key}\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(\"gmapnav_canvas\"));
map.setCenter(new GLatLng({$latlng}), 10);
var latlng = new GLatLng({$latlng});
map.addOverlay(new GMarker(latlng));
map.addControl(new GSmallMapControl());
}
}
</script>
";
}
print $gmap_js;
<%/php%> |
In indexu 5.x the password is stored in plain text.
If you upgrade from indexu 5.x to indexu deluxe, the installer will convert it automatically to md5.
If you experience user can not login after upgrade, then it could be that the conversion process fail.
If you have this problem, here is a solution.
Create a file called convertmd5.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <?php
include "application.php";
if ($_REQUEST['c']) {
ConvertMD5password();
}
else {
print "<p>Do you want to convert user password to MD5? <br>
Make sure that the password is not in MD5</p>
<p><a href='convertmd5.php?c=yes'>Convert now</a></p>";
}
function ConvertMD5password(){
global $dbConn;
$result = $dbConn->Execute("select * from `idx_users` where length(password) <30");
while (!$result->EOF) {
$dbConn->Execute("UPDATE `idx_users` SET `password` = '".md5($result->Fields("password"))."' WHERE `username` = '".$result->Fields("username")."'");
$result->MoveNext();
}
return true;
}
?> |
Upload this file to indexu root folder, then run with browser.
After it is done, you need to delete this file for security.
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.
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.