4images Modifications / Modifikationen > Templates & Styles (Requests & Discussions)
[developing] - web 2.0 custom template
trez:
Hey there,
I am currently developing a web 2.0 template from scratch, involving several mods with a 1.7.10 installation of 4images. I just started one week ago, just finishing the details page. My goal is to transform 4images in a modern, photography orientated (yeah and social) template (almost full AJAX) since the original template is somewhat outdated - and most people don't realize the power of 4images, so here I am ;)
I-phone / I-pad development is also on its way, and I will post those mod's for free.
I will post here every few days until the site is ready and you can see it in action. I am not willing to share the whole template, but I will share mods, design modifications etc. with you. I will also need some beta testers when the project I am doing goes online. This topic will also include codes to small javascript and AJAX modifications, that are easy but get that "wow" effect for your website.
Here's a little sneak preview of the details:
Stay tuned ;)
Sunny C.:
Wow nice
Saschilys:
Very very nice...
trez:
[Tweak]
Since I am using bigger (and cropped) thumbnails for better design in my search I didn't like the information (comments, lightbox etc) to be shown when I just view the pictures. I decided to do a hover, to show relevant information for the picture only if a user wants it. It looks like this:
A lot of image galleries use that kind of showing additional information.
You can test it live here:
Demo: http://gruncharov.com/sneak/hover/
Best thing is, that no Javascript is required - it's only via CSS.
Here is the CSS:
--- Code: ---.imgteaser {
margin: 0;
overflow: hidden;
position: relative;
}
.imgteaser a {
text-decoration: none;
}
.imgteaser a:hover {
text-decoration: none;
cursor: pointer;
}
.imgteaser a img {
margin: 0;
background: #fff;
}
.imgteaser a .desc { display: none; }
.imgteaser a:hover .desc{
display: block;
font-size: 10px;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #fff;
position: absolute;
bottom: 0px;
padding: 10px;
margin: 0;
width: 180px;
border-top: 1px solid #999;
text-decoration: none;
}
.imgteaser a:hover .desc strong {
display: block;
margin-bottom: 5px;
font-size: 11px;
}
--- End code ---
In order to work with div's, rather with tables my search.html looks not like this (just the part with the content):
--- Code: ---<table width="960" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="left">
{if content} {content} {endif content}
</td>
</tr>
</table>
--- End code ---
And the thubnail_bit.html (actually it's thumbnail_search_bit.html)
--- Code: ---<div style="float: left; padding-right: 30px; padding-bottom: 30px;">
<div style="width: 200px; border: 1px solid #dddddd; padding: 1px;">
<div class="imgteaser">
<a href="details.php?image_id={image_id}&mode=search"><img src="data/thumbnails/{cat_id}/{thumbnail_file_name}">
<span class="desc">
<strong>{image_name}</strong>
by <b>{user_firstname} {user_lastname}</b><br /><br />
{image_comments} comments | {image_votes} votes | {image_lightboxcount} likes
</span>
</a>
</div>
</div>
</div>
--- End code ---
And this is the block in my search.php to get rid of all the td's, tr's and so on (sorry I didn't commented them out, but you get the picture)
--- Code: ---//-----------------------------------------------------
//--- Show Search Results -----------------------------
//-----------------------------------------------------
if ($num_rows_all && $show_result == 1) {
$link_arg = $site_sess->url(ROOT_PATH."search.php?show_result=1");
include(ROOT_PATH.'includes/paging.php');
$getpaging = new Paging($page, $perpage, $num_rows_all, $link_arg);
$offset = $getpaging->get_offset();
$site_template->register_vars(array(
"paging" => $getpaging->get_paging(),
"paging_stats" => $getpaging->get_paging_stats()
));
$imgtable_width = ceil((intval($config['image_table_width'])) / $config['image_cells']);
if ((substr($config['image_table_width'], -1)) == "%") {
$imgtable_width .= "%";
}
$additional_sql = "";
if (!empty($additional_image_fields)) {
foreach ($additional_image_fields as $key => $val) {
$additional_sql .= ", i.".$key;
}
}
$sql = "SELECT i.image_id, i.cat_id, i.user_id, i.image_name, i.image_description, i.image_keywords, i.image_date, i.image_active, i.image_media_file, i.image_thumb_file, i.image_download_url, i.image_allow_comments, i.image_comments, i.image_downloads, i.image_votes, i.image_rating, i.image_hits".$additional_sql.", c.cat_name".get_user_table_field(", u.", "user_name").", u.user_lastname, u.user_firstname
FROM (".IMAGES_TABLE." i, ".CATEGORIES_TABLE." c)
LEFT JOIN ".USERS_TABLE." u ON (".get_user_table_field("u.", "user_id")." = i.user_id)
WHERE i.image_active = 1
$sql_where_query
AND c.cat_id = i.cat_id $cat_id_sql
ORDER BY ".$config['image_order']." ".$config['image_sort'].", image_id ".$config['image_sort']."
LIMIT $offset, $perpage";
$result = $site_db->query($sql);
$count = 0;
$bgcounter = 0;
while ($image_row = $site_db->fetch_array($result)) {
show_image($image_row, "search");
$thumbnails .= $site_template->parse_template("thumbnail_bit_search");
$count++;
} // end while
// $thumbnails .= "</table>\n";
$content = $thumbnails;
unset($thumbnails);
} // end if
else {
$site_template->register_vars(array(
"search_keywords" => format_text(stripslashes($org_search_keywords), 2),
"search_user" => format_text(stripslashes($org_search_user), 2),
"lang_search_by_keyword" => $lang['search_by_keyword'],
"lang_search_by_username" => $lang['search_by_username'],
"lang_new_images_only" => $lang['new_images_only'],
"lang_search_terms" => $lang['search_terms'],
"lang_or" => $lang['or'],
"lang_and" => $lang['and'],
"lang_category" => $lang['category'],
"lang_search_fields" => $lang['search_fields'],
"lang_all_fields" => $lang['all_fields'],
"lang_name_only" => $lang['name_only'],
"lang_description_only" => $lang['description_only'],
"lang_keywords_only" => $lang['keywords_only'],
"category_dropdown" => get_category_dropdown($cat_id)
));
if (!empty($additional_image_fields)) {
$additional_field_array = array();
foreach ($additional_image_fields as $key => $val) {
if (isset($lang[$key.'_only'])) {
$additional_field_array['lang_'.$key.'_only'] = $lang[$key.'_only'];
}
}
if (!empty($additional_field_array)) {
$site_template->register_vars($additional_field_array);
}
}
$content = $site_template->parse_template("search_form");
}
--- End code ---
The whole code is optimized for a 960px template width and cropped 200x200px thumbnails, but you get the idea.
xeta:
:D Looks really great
Navigation
[0] Message Index
[#] Next page
Go to full version