Tweak-MOD: details.php enhanced (Part One)

[trez]

Hello,

Many people ask me about the "tweaks" i've installed on my commercial page. I can't reply to everyone, so i decided to publish some of the codes i used.
Today, we start with the details.php.

What

This tweak mod allows you to show options/image info/rating and comments only if the user wants to see them. The script uses cookies to remember the users preferences.

Versions
Tested on 1.7.1/1.7.2/1.7.3/1.7.4 , works on FF 1.0+, IE 5.0+ and Opera

Demo
http://unfb.info/4images/details.php?image_id=3
look under the image



Step 1
open /templates/default/header.html

look for:

Code: [Select]

<meta http-equiv="content-type" content="text/html; charset={charset}" />
<link rel="stylesheet" href="{template_url}/style.css" />
insert _below

Code: [Select]

<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:100%;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

/***********************************************
* Copyright by Martial B of http://getElementById.com/
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>
save and close

Step 2
open /templates/default/details.html

depending on your previous modifications, you have to be careful. But if you use the standard code do the following:

search for:

Code: [Select]

{lightbox_button}  {postcard_button}        {download_button}  {download_zip_button}
</div>
                  <br />
                  <table width="100%" border="0" cellspacing="0" cellpadding="1">
                    <tr>
                      <td class="bordercolor">
                        <table width="100%" border="0" cellpadding="3" cellspacing="0">
                          <tr>
                            <td class="head1" valign="top" colspan="2">{image_name}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row1"><b>{lang_description}</b></td>
                            <td valign="top" class="row1">{image_description}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row2"><b>{lang_keywords}</b></td>
                            <td valign="top" class="row2">{image_keywords}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row1"><b>{lang_date}</b></td>
                            <td valign="top" class="row1">{image_date}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row2"><b>{lang_hits}</b></td>
                            <td valign="top" class="row2">{image_hits}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row1"><b>{lang_downloads}</b></td>
                            <td valign="top" class="row1">{image_downloads}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row2"><b>{lang_rating}</b></td>
                            <td valign="top" class="row2">{image_rating} ({image_votes}
                              {lang_votes})</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row1"><b>{lang_file_size}</b></td>
                            <td valign="top" class="row1">{image_file_size}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row2"><b>{lang_added_by}</b></td>
                            <td valign="top" class="row2">{user_name_link}</td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                  {if iptc_info}
<br />
                  <table width="100%" border="0" cellspacing="0" cellpadding="1">
                    <tr>
                      <td class="bordercolor">
                        <table width="100%" border="0" cellpadding="3" cellspacing="0">
                          <tr>
                            <td class="head1" valign="top" colspan="2">IPTC Info</td>
                          </tr>
                          {iptc_info}
                        </table>
                      </td>
                    </tr>
                  </table>
                  {endif iptc_info}
{if exif_info}
<br />
                  <table width="100%" border="0" cellspacing="0" cellpadding="1">
                    <tr>
                      <td class="bordercolor">
                        <table width="100%" border="0" cellpadding="3" cellspacing="0">
                          <tr>
                            <td class="head1" valign="top" colspan="2">EXIF Info</td>
                          </tr>
                          {exif_info}
                        </table>
                      </td>
                    </tr>
                  </table>
                  {endif exif_info}
{if rate_form}
                  <br />
<div align="center">{rate_form}</div>
                  {endif rate_form}
{if allow_comments}
<a name="comments"></a>
<br />
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                    <tr>
                      <td class="head1" valign="top">
                        <table width="100%" border="0" cellpadding="3" cellspacing="1">
                          <tr>
                            <td valign="top" class="head1">{lang_author}</td>
                            <td valign="top" class="head1">{lang_comment}</td>
                          </tr>
                          {comments}
                        </table>
                      </td>
                    </tr>
                  </table>
                  <br />
                  {comment_form} {endif allow_comments}
and replace it with:

Code: [Select]

</div>




<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu('sub1')"><small>+/-</small> Options</div>
<span class="submenu" id="sub1">
{lightbox_button}&nbsp;&nbsp;{postcard_button}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{download_button}&nbsp;&nbsp;{download_zip_button}
</span>

<div class="menutitle" onclick="SwitchMenu('sub2')"><small>+/-</small> Image details</div>
<span class="submenu" id="sub2">
<table width="100%" border="0" cellspacing="0" cellpadding="1">
                    <tr>
                      <td class="bordercolor">
                        <table width="100%" border="0" cellpadding="3" cellspacing="0">
                          <tr>
                            <td class="head1" valign="top" colspan="2">{image_name}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row1"><b>{lang_description}</b></td>
                            <td valign="top" class="row1">{image_description}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row2"><b>{lang_keywords}</b></td>
                            <td valign="top" class="row2">{image_keywords}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row1"><b>{lang_date}</b></td>
                            <td valign="top" class="row1">{image_date}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row2"><b>{lang_hits}</b></td>
                            <td valign="top" class="row2">{image_hits}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row1"><b>{lang_downloads}</b></td>
                            <td valign="top" class="row1">{image_downloads}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row2"><b>{lang_rating}</b></td>
                            <td valign="top" class="row2">{image_rating} ({image_votes}
                              {lang_votes})</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row1"><b>{lang_file_size}</b></td>
                            <td valign="top" class="row1">{image_file_size}</td>
                          </tr>
                          <tr>
                            <td valign="top" class="row2"><b>{lang_added_by}</b></td>
                            <td valign="top" class="row2">{user_name_link}</td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                  {if iptc_info}
<br />
                  <table width="100%" border="0" cellspacing="0" cellpadding="1">
                    <tr>
                      <td class="bordercolor">
                        <table width="100%" border="0" cellpadding="3" cellspacing="0">
                          <tr>
                            <td class="head1" valign="top" colspan="2">IPTC Info</td>
                          </tr>
                          {iptc_info}
                        </table>
                      </td>
                    </tr>
                  </table>
                  {endif iptc_info}
{if exif_info}
<br />
                  <table width="100%" border="0" cellspacing="0" cellpadding="1">
                    <tr>
                      <td class="bordercolor">
                        <table width="100%" border="0" cellpadding="3" cellspacing="0">
                          <tr>
                            <td class="head1" valign="top" colspan="2">EXIF Info</td>
                          </tr>
                          {exif_info}
                        </table>
                      </td>
                    </tr>
                  </table>
                  {endif exif_info}
</span>

<div class="menutitle" onclick="SwitchMenu('sub3')"><small>+/-</small> Rating</div>
<span class="submenu" id="sub3">
{if rate_form}
                  <br />
<div align="center">{rate_form}</div>
                  {endif rate_form}
</span>

<div class="menutitle" onclick="SwitchMenu('sub4')"><small>+/-</small> Comments</div>
<span class="submenu" id="sub4">
{if allow_comments}
<a name="comments"></a>
<br />
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                    <tr>
                      <td class="head1" valign="top">
                        <table width="100%" border="0" cellpadding="3" cellspacing="1">
                          <tr>
                            <td valign="top" class="head1">{lang_author}</td>
                            <td valign="top" class="head1">{lang_comment}</td>
                          </tr>
                          {comments}
                        </table>
                      </td>
                    </tr>
                  </table>
                  <br />
                  {comment_form} {endif allow_comments} <br />
</span>

</div>
save and close

Step 3 (optional)

If you want to change the style of the links look in the new code in your header.html end edit the css.
I think you understand the algorithm of that code, so custom modifications shouldn't be a problem. For further questions please post in this thread.
Don't remove the copyright

[om6acw]

I like this, thanks Trez

[impss]

I like this as well , Thanks trez

 

[trez]

[CeJay]

I like this as well, but I can not use it with the Next Generation Template   

[trez]

Why? Errors? Checked every step?

you can use it with any template, but you have to understand at least a little bit html.

Post me your details.html, and i will show you how

[om6acw]

works great on first time for me http://www.myanimalsworld.com/174/details.php?image_id=1

when we can see part two, three etc.???
Thanks

[CeJay]

I know HTML.
However with that template it already has javascripting in it to breakdown the image details and left hand column.
I have to figure out where all the javascript is so I can get that removed to update with what you have.
This I can do, just need a little time to figure out where the person that made the template all put it 
Pretty sure most of it is in the html templates, but not sure what php files has it in. Didn't get a chance to go through all of them.

Not to mention the javascript ends up with errors half the time anyway so I am not liking that much (with the current configuration I have). 

[alexxa]

If you want to use this tweak properly it needs some modification.

You can not use table tag inside span tag according to HTML 4.01 and XHTML standards.

span is inline tag so it cannot contain block elements like table, tr, .....

Anyway, good tweak.
 

[trez]

works great on first time for me http://www.myanimalsworld.com/174/details.php?image_id=1

when we can see part two, three etc.???
Thanks

Looks good But why don't you change the background of the buttons to a lighter gray. You can do it in your header.html:

Code: [Select]

<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;

[trez]

@alexxa: Yes you can Just have a look at my custom modification (the blue and the red + under the image)

@CeJay: if you don't figure it out post the code and we can help you

[alexxa]

@alexxa: Yes you can Just have a look at my custom modification (the blue and the red + under the image)

Yes I know you can, but it is not allowed. You can use it but you break compatibility with some browsers.

You can check compatibility with validator (for e.g. http://validator.w3.org/).

But it is not so hard to change some html code and everything is ok.

 

[CeJay]

@CeJay: if you don't figure it out post the code and we can help you

Thanks. I will work on it sometime this week.