Author Topic: [developing] - web 2.0 custom template  (Read 38558 times)

0 Members and 2 Guests are viewing this topic.

Offline trez

  • Hero Member
  • *****
  • Posts: 613
    • View Profile
    • blog / photography
[developing] - web 2.0 custom template
« on: October 14, 2011, 06:28:10 PM »
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 ;)




Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: [developing] - web 2.0 custom template
« Reply #1 on: October 14, 2011, 08:27:02 PM »
Wow nice

Offline Saschilys

  • Jr. Member
  • **
  • Posts: 51
    • View Profile
Re: [developing] - web 2.0 custom template
« Reply #2 on: October 14, 2011, 09:11:45 PM »
Very very nice...

Offline trez

  • Hero Member
  • *****
  • Posts: 613
    • View Profile
    • blog / photography
Re: [developing] - web 2.0 custom template
« Reply #3 on: October 16, 2011, 09:36:56 PM »
[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: [Select]
.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;
}


In order to work with div's, rather with tables my search.html looks not like this (just the part with the content):

Code: [Select]
<table width="960" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
<td align="left">
{if content} {content} {endif content}
</td>
</tr>
</table>

And the thubnail_bit.html (actually it's thumbnail_search_bit.html)

Code: [Select]
<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>

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: [Select]
//-----------------------------------------------------
//--- 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");
}







The whole code is optimized for a 960px template width and cropped 200x200px thumbnails, but you get the idea.









Offline xeta

  • Pre-Newbie
  • Posts: 3
    • View Profile
Re: [developing] - web 2.0 custom template
« Reply #4 on: October 19, 2011, 10:34:46 PM »
 :D Looks really great

Offline trez

  • Hero Member
  • *****
  • Posts: 613
    • View Profile
    • blog / photography
Re: [developing] - web 2.0 custom template
« Reply #5 on: October 20, 2011, 01:16:56 AM »
Show / Hide Div's with Cookie?

I wanted to create a search navigation bar, witch will also be used in the category browsing - almost everywhere in the site. The navigation bar consists of two parts, the navigation and the filter.
Well the filter is really the search_form template, but redesigned.

So my biggest problem was to remember the div-state - an open filter should be open, a closed one should be closed. So there's only one way - using cookies (a pain in the ...).
Anyway, if you ever need a search filter (or closed/open div) with "memory function", here's the code:

First, we assign the cookie function (before the </head> tag):

Code: [Select]
<script type="text/javascript">


function Open(cls,nu,h,days){
 var objs=bycls(cls,document),z0=0;
 for (var z0=0;z0<objs.length;z0++){
  objs[z0].style.height=(z0!=nu?0:objs[z0].offsetHeight>h-5?0:h)+'px';
 }
 if (typeof(days)=='number'){
  cookieset(cls,nu+'|'+objs[nu].offsetHeight,days);
 }
 return false;
}

 function cookieget(nme){
  var rtn=cookie(nme),objs=bycls(nme,document);
  if (rtn){
   rtn=rtn.split('|');
   if (objs[rtn[0]]){
    objs[rtn[0]].style.height=rtn[1]+'px';
   }
  }
 }

 function cookie(nme){
  var re=new RegExp(nme+'=[^;]+','i');
  if (document.cookie.match(re)){
   return document.cookie.match(re)[0].split("=")[1];
  }
  return null
 }

 function cookieset(nme,v,days){
  document.cookie=nme+'='+v+';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
 }

 function bycls(nme,el){
  for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
   if(reg.test(els[z0].className)){
    ary.push(els[z0]);
   }
  }
  return ary;
 }

</script>

Then we need to search for the cookie (again before the closing head tag):

Code: [Select]
<script type="text/javascript">
window.onload = function() {
  cookieget('filter_search');
}
</script>


assign the div to our styleshteet (style.css) :

Code: [Select]
.filter_search {
position:relative;
overflow:hidden;
height:0px;
}

and put the div where you want to appear it:

Code: [Select]
<div class="filter_search">
your content
</div>

now we need to toggle it (show/hide). Best with a button, isn't it?
Draw a nice button and insert it like this:

Code: [Select]
<a class="filter_button" href="" onclick="return Open('filter_search',0,140,1);"></a>

The "140" you see is the height of the expanded div - change it to your needs.

So what's left? Aaah, the button. Assuming you didn't change filenames, put this in your style.css:

Code: [Select]
       .filter_button {
width: 90px;
height: 30px;
            cursor: pointer;
            display: block;
            background-image: url( 'images/filter.png' );

}
        .filter_button:hover {
            background-image: url( 'images/filter_hover.png' );
}

Just change the path/width/height to your button and you are ready to go.
So this is how it looks like on my sandbox (sorry, no demo available yet).



Closed filter bar





Button Hover





Expanded filter bar





If you need any help on that stuff, just drop me a line ;) Cheers

PS: Project will be finished in 6-7 days.
PPS: 4images is awesome!





« Last Edit: October 20, 2011, 12:48:53 PM by trez »

Offline trez

  • Hero Member
  • *****
  • Posts: 613
    • View Profile
    • blog / photography
Re: [developing] - web 2.0 custom template
« Reply #6 on: October 22, 2011, 01:18:53 PM »
Well,

this is getting kind of a diary. Anyway, i implemented yesterday my own
MOD [MOD] - Image Preview in Upload [AJAX] [IE/FF/Opera/Chrome] into the site design.
I have many additional image fields. So I did a multi-step upload form, with the image preview being "sticky" on the
right and it look's now like this:

------------HOVER on customized Browse button

------------HOVER on the "next page / continue submission" link

--------------- last page of the form


Making such a form is easy - You just need to make 3 hidden div's (for a 3-step form) and a simple javascript
pagination to control the visibility. I don't think there is a need for a MOD like this, but I will post the code I used if someone is interested.

PS: The image on the right site is sticky the whole time, because it's in a different div. Here's the logic:

Code: [Select]
<table>
  <tr>
     <td width="50%">
          <form>
              <div id=1>
                   your form 1 page
              </div>
              <div id=2>
                   your form 2 page
               </div>
              <div id=pagination></div>
       </td>
       <td width="50%">
           your preview image div
       </td>
     </tr>
</table>


Anyway, just tell me if you need some real code example.

Offline trez

  • Hero Member
  • *****
  • Posts: 613
    • View Profile
    • blog / photography
Re: [developing] - web 2.0 custom template
« Reply #7 on: October 31, 2011, 05:02:17 PM »
I released yesterday a MOD witch notify's users of any activity concerning their images.
You can find the MOD here: [developing] Notifications & User Activity v0.1

To be honest, it really sucks with the standard template, but if  you are heavily customizing your site (I assume it, because you read this thread) it will look pretty good, if you
give it a little try. I attached a screenshot of what i mean.

PS: If you are wondering about the karma/rank etc - that's another custom mod I will publish maybe next week.

Offline pwa

  • Pre-Newbie
  • Posts: 8
    • View Profile
Re: [developing] - web 2.0 custom template
« Reply #8 on: November 07, 2011, 10:45:38 PM »
great job!
what next?  :-)

how you count "likes" - as lightbox adds?


Offline kai

  • Administrator
  • Addicted member
  • *****
  • Posts: 1.421
    • View Profile
    • 4images - Image Gallery Management System
Re: [developing] - web 2.0 custom template
« Reply #9 on: November 08, 2011, 08:58:19 AM »
great work trez! :)
Your first three "must do" before you ask a question:
1. Forum rules
2. FAQ
3. Search

Offline trez

  • Hero Member
  • *****
  • Posts: 613
    • View Profile
    • blog / photography
Re: [developing] - web 2.0 custom template
« Reply #10 on: November 08, 2011, 07:58:56 PM »
great job!
what next?  :-)

how you count "likes" - as lightbox adds?

With an additional field in the images_table. Just set a new field and add an sql in page_header to update it (+1/-1) on adding and deleting images from/to lightbox.

---------------------------------------------------------

On a very visited site, you get thousands of pictures every month. I wanted my user so show the very best for the past 7 days, so I did a simple mod called "Weekly TOP".
It takes all the images (uploaded in the past 7 days) and shows only images with a high count of activity. For example votes + lightboxcount , or rating + comments. You can modify it
to what you want (accessing fields in the image table).

For example, if we want to show images with 20 "actions" including comments and votes the line used would look like this:
Code: [Select]
AND (i.image_votes + i.image_comments) > 20
Or show pictures that have at least 5 comments and at least 5 votes by doing this:
Code: [Select]
AND i.image_votes > 5 AND i.image_lightboxcount > 5
Now, we need to do the cutoff (for the time). For example if you want to show the weekly top images for the past 7 days it would look like this:
Code: [Select]
$new_cutoff = time() - 60 * 60 * 24 * 7;

7 is days. Replace it with 14, to get the images for the past 2 weeks and so on. You can of course show a weekly top, a monthly top and a yearly top.
It's a great way to show off your best new images on the site.  For example like in this screenshot, showing the module on my site:




If someone has interest in me publishing a MOD about all this just tell me.


Offline pwa

  • Pre-Newbie
  • Posts: 8
    • View Profile
Re: [developing] - web 2.0 custom template
« Reply #11 on: November 08, 2011, 09:22:31 PM »
you dont afraid of slow down site with high rate visits?
I test already mod of mini_top (and next mini top of day/week/month)

Big minus is calculating winner list every page load (generating unnecessary DB load)

For me better solution is periodically generating actual 'winner list' - via cron or by user visit every 15minut or sth else...

Mayby this not important... I havnt enough web mastering experience

----
i tested your solution with css overlaing text on thums... it is problem with IE...
it needs "left: 0px;" in CSS .imgteaser a:hover .desc   or you know better solve.



Offline trez

  • Hero Member
  • *****
  • Posts: 613
    • View Profile
    • blog / photography
Re: [developing] - web 2.0 custom template
« Reply #12 on: November 08, 2011, 09:43:54 PM »
you dont afraid of slow down site with high rate visits?

No, 4images is fast if you don't install "wrong" mod's that do big queries. I am also caching almost everything.
4images can handle 1000+ simultaneous users without any problem if your code is good and cache is enabled.  


Big minus is calculating winner list every page load (generating unnecessary DB load)

Cache it :) I am using that block only on the mainpage, where I have only 6 queries, so it makes no problems.

For me better solution is periodically generating actual 'winner list' - via cron or by user visit every 15minut or sth else...

It's something very different but yes, you are right. I would do the cron every one week and then show the (fixed) result e.g. winners for past week, querying only a handful of rows.

i tested your solution with css overlaing text on thums... it is problem with IE...
it needs "left: 0px;" in CSS .imgteaser a:hover .desc   or you know better solve.

Is it working? I don't have trouble with IE7, don't know about future versions 'cause I hate that browser : )



Offline pwa

  • Pre-Newbie
  • Posts: 8
    • View Profile
Re: [developing] - web 2.0 custom template
« Reply #13 on: November 08, 2011, 09:59:13 PM »
you dont afraid of slow down site with high rate visits?

No, 4images is fast if you don't install "wrong" mod's that do big queries. I am also caching almost everything.
4images can handle 1000+ simultaneous users without any problem if your code is good and cache is enabled. 


what you mean "cached"? - at db cache? at php? or content setting cache attr for browser? or all :-)
OK - it ma firs steps with 4image... i test some solutions from over week - this is beggining of me way :-)

i tested your solution with css overlaing text on thums... it is problem with IE...
it needs "left: 0px;" in CSS .imgteaser a:hover .desc   or you know better solve.

Is it working? I don't have trouble with IE7, don't know about future versions 'cause I hate that browser : )
I hate IE too... but some users use it :-(
Yes - working for me (IE8) - but I'm not sure that it is correct solution - I'm programmer but not html/css/php :-(

Offline trez

  • Hero Member
  • *****
  • Posts: 613
    • View Profile
    • blog / photography
Re: [developing] - web 2.0 custom template
« Reply #14 on: November 08, 2011, 11:24:43 PM »
yeah, db cache. Caching the results of the queries ;)

If it's working on every browser - then your solution is right :) If not write e a PM and i'll test it