zenphoto forums » Themes

add EXIF data to "cimi" theme?

(11 posts)
  • Started 4 years ago by psterling
  • Latest reply from micheall
  1. psterling

    Junior
    Joined: Nov '09
    Posts: 6

    I've been trying to add an EXIF info section (similar to the lightbox-style EXIF window in the "Zenpage-default" theme) to the "cimi" theme. I've edited the image.php file, adding:

    <link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
    <script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>

    AND

    <?php
    if (getImageEXIFData()) { echo "<div id=\"exif_link\">".gettext("Image Info")."</div>";
    printImageMetadata('', false);
    }
    ?>

    However, the EXIF data shows up just fine, but it is never hidden, as in the zenpage-default theme. I know I'm doing something wrong, but I'm not sure what. Can anyone help me determine how to add this EXIF info link functionality to the "cimi" theme. Thanks!

    Posted 4 years ago #
  2. micheall

    Contributor
    Joined: Aug '09
    Posts: 537

    Have you take a look at the coding in a theme that has this functionality like the example or zenpage themes? You're close, but you are missing something, take a look you'll see it.

    Posted 4 years ago #
  3. Zenphoto support team
    kagutsuchi

    Assistant developer
    Joined: Aug '09
    Posts: 518

    I believe you're missing the JavaScript for the toggle that is present in other themes. You can either look at an existing theme or take a look at the theming tutorial that has the code: http://www.zenphoto.org/2009/03/theming-tutorial/#image.php

    Posted 4 years ago #
  4. psterling

    Junior
    Joined: Nov '09
    Posts: 6

    Thanks, guys, for pointing me in the right direction. I guess I exhausted all my brain cells in my Town Council meeting last night, because I still can't get this to work. The output seems almost identical to another theme I've tried that correctly shows the EXIF data hiding/unhiding. I'm fairly competent with PHP, but I'm still a marked amateur with javascript. I thought maybe the link to my css was invalid, but it seems to be parsing correctly. I feel really dumb, here! Here's what I'm working with:


    <?php if (!defined('WEBPATH')) die(); ?>

    <?php include ('theme-functions.php'); ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title><?php printGalleryTitle(); ?> | <?=getAlbumTitle();?> | <?=getImageTitle();?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="imagetoolbar" content="false" />
    <link rel="stylesheet" href="<?= $_zp_themeroot ?>/zen.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
    <script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    var ua = navigator.userAgent;
    var opera = /opera [56789]|opera\/[56789]/i.test(ua);
    var ie = !opera && /msie [56789]/i.test(ua);
    var moz = !opera && /mozilla\/[56789]/i.test(ua);
    function toggle(obj) {document.getElementById(obj).style.display=(document.getElementById(obj).style.display!="block")? "block" : "none";}
    <?php if (hasNextImage()) { ?>var nextURL="<?=getNextImageURL();?>";<?php } ?>
    <?php if (hasPrevImage()) { ?>var prevURL="<?=getPrevImageURL();?>";<?php } ?>
    function keyDown(e){
    if (!ie) {var keyCode=e.which;}
    if (ie) {var keyCode=event.keyCode;}
    if(keyCode==39){<?php if (hasNextImage()) { ?>window.location=nextURL<?php } ?>};
    if(keyCode==37){<?php if (hasPrevImage()) { ?>window.location=prevURL<?php } ?>};}
    document.onkeydown = keyDown;
    if (!ie)document.captureEvents(Event.KEYDOWN);
    document.oncontextmenu=new Function("return false");
    //document.onselectstart=new Function ("return false");
    document.ondragstart=new Function ("return false") ;
    function opacity(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;
    if(opacStart > opacEnd) {
    for(i = opacStart; i >= opacEnd; i--) {
    setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
    timer++;
    }
    } else if(opacStart < opacEnd) {
    for(i = opacStart; i <= opacEnd; i++){
    setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
    timer++;
    }
    }
    }
    function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
    }
    function toggleComments() {
    var commentDiv = document.getElementById("comments");
    if (commentDiv.style.display == "block") {
    commentDiv.style.display = "none";
    } else {
    commentDiv.style.display = "block";
    }
    }

    -->
    </script>
    <?php printPreloadScript(); ?>
    <?php zenJavascript(); ?>
    </head>

    <body>
    <?php printAdminToolbox(); ?>
    <div id="framework">
    <div id="main">

    <div id="gallerytitle">
    <h2>" title="Gallery Index"><?=getGalleryTitle();?></h2>
    </div>

    <div id="breadcrumb">
    <div class="left">">home > "> <?php printAlbumTitle(false);?> > <?php printImageTitle(true); ?></div><div class="right dark">use arrow keys to navigate </div>
    </div>

    <div id="imgnav">
    <?php if (hasNextImage()) { ?>
    " title="Next Image"><span>Next Image</span>
    <?php } else { ?>
    <div class="block"><span>Next Image</span></div>
    <?php } ?>
    <?php if (hasPrevImage()) { ?>
    " title="Previous Image"><span>Previous Image</span>
    <?php } else { ?>
    <div class="block"><span>Previous Image</span></div>
    <?php } ?>
    <div>" title="<?=getImageTitle();?>">full size</div>
    </div>

    <div id="image">
    " title="<?=getImageTitle();?>"> <?php printDefaultSizedImageAlt(getImageTitle()); ?>
    </div>

    <div id="narrow">

    <?php if (getImageDesc() !='') { ?>
    <div id="desc">
    <?printImageDesc(true); ?>
    </div>
    <?}?>

    <!-- exif -->
    <?php
    if (getImageEXIFData()) {
    echo "<div id=\"exif_link\">".gettext("Image Info")."</div>";
    printImageMetadata('', false);
    }
    ?>

    <div id="toggle"><?php $num = getCommentCount(); echo ($num == 0) ? "No Comments" : ("Comments ($num)"); ?>, Add comment</div>

    <? if (isset($error)) { ?>
    <div id="imgcommentform" style="display:block;">
    <div class="error"><p>There was an error submitting your comment. Name, a valid e-mail address, and a comment are required.</p></div>
    <? } else { ?>
    <div id="imgcommentform" style="display:none;">
    <? }?>
    <!-- If comments are on for this image AND album... -->
    <form id="commentform" action="#" method="post">
    <div><input type="hidden" name="comment" value="1" />
    <input type="hidden" name="remember" value="1" />
    <p><label for="name">Name:</label><input type="text" id="name" name="name" size="20" value="<?=$stored[0];?>" /></p>
    <p><label for="email">E-Mail:</label><input type="text" id="email" name="email" size="20" value="<?=$stored[1];?>" /></p>
    <!-- <p><label for="website">Site:</label><input type="text" id="website" name="website" size="40" value="<?=$stored[2];?>" /></p> -->
    <p><textarea name="comment" rows="6"></textarea></p>
    <input type="submit" value="Add Comment" onmouseover="this.className = 'pushbuttonl'" onmouseout="this.className = 'pushbutton'" class="pushbutton" />
    </div>
    </form>
    </div>
    </div>

    <div id="comments">

    <?php while (next_comment()): ?>
    <div class="comment">
    <div class="commentmeta">
    <span class="commentauthor"><?php printCommentAuthorEmail(); ?></span>
    <span class="commentdate"><?=getCommentDate();?>, <?=getCommentTime();?> <?php printEditCommentLink('Edit', ' | ', ''); ?></span>
    </div>
    <div class="commentbody">
    <?=getCommentBody();?>
    </div>
    </div>
    <?php endwhile; ?>

    </div>

    </div>
    <div id="credit">Powered by zenphoto | theme by cimi</div>
    </div>

    </body>
    </html>

    I appreciate the help you've both given thus far. Hopefully you can tell me what I'm doing wrong? THANKS!!!

    Posted 4 years ago #
  5. psterling

    Junior
    Joined: Nov '09
    Posts: 6

    I'm confident the link itself is not the culprit, because the link is parsed identically in both my non-working and working versions:

    <div id="exif_link">
    <aa href="#TB_inline?height=345&width=400&inlineId=imagemetadata" title="Image Info">Image Info</a>
    </div>

    Note: I had to put "aa href" in the code above so you could see my full link code. I wasn't sure how to do it otherwise so this forum didn't parse it as an actual link...

    Posted 4 years ago #
  6. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 15,114

    That link is a thickbox script link. You will have to add the scripts for that, too:

    <link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
    	<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>

    This is found on top of the default theme's image.php for example.

    Don't forget to read the Forum rules and usage resources
    Posted 4 years ago #
  7. psterling

    Junior
    Joined: Nov '09
    Posts: 6

    Thanks, but I already have those lines you suggested toward the top of the code above. I was just trying to narrow down the possibilities for where my error is. It's a little more difficult, as the "cimi" theme's code is in a slightly different order than the "default" theme's code, for which I was comparing it against.

    Still searching as to why I can never display my EXIF data in the hidden state...

    Posted 4 years ago #
  8. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 15,114

    Well, I don't know anything about the specifics of that theme.

    Don't forget to read the Forum rules and usage resources
    Posted 4 years ago #
  9. psterling

    Junior
    Joined: Nov '09
    Posts: 6

    Looks like it was a problem in my css file. Now, everything displays just fine hidden, but I can't get it to show the EXIF data when I press the link! At least I'm getting somewhere. I'm betting that the display problem now is in the css file as well. Thanks for trying to help. I love this software!

    Posted 4 years ago #
  10. psterling

    Junior
    Joined: Nov '09
    Posts: 6

    I figured everything out by referring to the help section at http://jquery.com/demo/thickbox/

    Posted 4 years ago #
  11. micheall

    Contributor
    Joined: Aug '09
    Posts: 537

    glad to hear you got it figured out, from what it looks like in the code you posted above it was the link because you weren't calling the #tb in your image link. Unless you had that and it wasn't in the code posted above.

    Posted 4 years ago #

RSS feed for this topic

Reply

You must log in to post.