Template parsing question

Some day, I'll actually know what I'm doing and won't have to ask questions like this.

I'll start off by posting the code to /modules/boonex/photos/templates/base/thumb.html   This is the code block that produces the thumbnail blocks on an album view page, with each thumbnail a link to the corresponding view photo page.

<div class="sys_file_search_pic bx_photos_file_search_pic" style="background-image: url('__imgUrl__');">

<bx_if:admin>

<div class="bx_sys_unit_checkbox">

<input type="checkbox" name="entry[]" value="__id__"/>

</div>

</bx_if:admin>

<a href="__fileLink__"><img src="__spacer__"></a>

</div>

The line of interest to me is:  <a href="__fileLink__"><img src="__spacer__"></a> where __fileLink__, when parsed, is the link to the respective view photo page.


What I want to do is add a rel attribute to that line so it looks like this: <a href="__fileLink__" rel="__pic__"><img src="__spacer__"></a> where __pic__ is the url of the large image that is loaded into the view photo page.

The __pic__ is replaced with the actual image url when the code in /modules/boonex/photos/templates/base/view_unit.html is parsed.  Here's the code to view_unit.html .....


<div class="fileUnit">
<div class="navPanel" style="width:__width_ext__px;">
<div class="navPanelLink">
<bx_text:_sys_album />: <a href="__albumUri__">__albumCaption__</a>
</div>
<bx_if:prev>
<a href="__linkPrev__" title="__titlePrev__"><img src="<bx_icon_url:prev32.png />" class="navPanelLinkPrev"/></a>
</bx_if:prev>
<bx_if:next>
<a href="__linkNext__" title="__titleNext__"><img src="<bx_icon_url:next32.png />"  class="navPanelLinkNext"/></a>
</bx_if:next>
</div>
<div class="fileUnitPic" style="width:__width_ext__px;">
<img src="__pic__" class="fileUnitSpacer"/>
</div>   
<div class="clear_both"></div>
</div>
<div class="fileTitle" style="width:__width_ext__px;">
__fileTitle__
</div>
<div class="fileUnitInfo" style="width:__width_ext__px;">
<div class="fileUnitInfoRate">
__rate__
</div>
<div class="fileUnitInfoCounts">
<div class="fileUnitInfoFav">
<img src="<bx_icon_url:action_fave.png />" title="<bx_text:_bx_photos_view_alt_fav />"/>
__favInfo__
</div>
<div class="fileUnitInfoView">
<img src="<bx_icon_url:eye.png />" title="<bx_text:_bx_photos_view_alt_view />"/>
__viewInfo__
</div>       
</div>
</div>



The challenge I face, is to be able to add that rel="__pic__" attribute and have __pic__ replaced with the actual url of the large image when the code is parsed, just as it is in view_unit.html.


I kinda know how all this works, but can't seem to figure out the specific changes I need to make for this to happen.  I'm hoping some kind soul will educate me a bit here.


I won't say exactly why I want to do this just yet, but if I can get over this hump, I promise an incredibly cool feature that everyone will want.  I just don't want to ruin the surprise.

okey, i see your point. Have you defined the __pic__ in the class of the module?

RE:

I haven't done anything.  This is all standard issue D7 photos module

Well i can tell you where you would need to make the change to pass __pic__ to template. Not exactly where you would think it would be.

templates\base\scripts\BxBaseSearchResultSharedMedia.php at line 305 is this function

function _getSharedThumb ($iId, $sFileLink, $sHash = '') {
$sIdent = strlen($sHash) > 0 ? $sHash : $iId;
$urlToLargePhoto = Need to figure this part out.
$aUnit = array(
'imgUrl' => $this->getImgUrl($sIdent),
'spacer' => getTemplateIcon('spacer.gif'),
'fileLink' => $sFileLink,
'img' => $urlToLargePhoto,
'bx_if:admin' => array(
'condition' => $this->bAdminMode,
'content' => array('id' => $iId)
)
);
return $this->oModule->_oTemplate->parseHtmlByName('thumb.html', $aUnit);
}

Add what i put in red. But loading the variable with the path to the large photo is the part we still need to figure out. Maybe there is a simple function call that will return that, i don't quite know.

Okey, let's see...

for now we've got the path and file of the photo, defined as __imgUrl__ , and it's showing on the website as the background of the div.

<div class="sys_file_search_pic bx_photos_file_search_pic" style="background-image: url('__imgUrl__');">

But this is the rel link to the thumbnailed version if i'm not mistaken...right?

On the View photo page..... The url of the large image is __pic__    It is parsed in /modules/boonex/photos/classes/BxPhotosPageView.php

The code for thumb.html is parsed in /templates.base/scripts\BxBaseSearchResultSharedMedia.php

What I need to do, is add code to /templates.base/scripts\BxBaseSearchResultSharedMedia.php   ..... that obviously exists in /modules/boonex/photos/classes/BxPhotosPageView.php   .... so that __pic__ is parsed, just like it is in BxPhotosPageView.php

But..... like I said.... if I actually knew what I was doing, I wouldn't have to ask the question.

Yea, something like that. But not as easy as i would have liked. The photos module functions are bouncing me all over the place. Boonex coders are nutz. Always doing things the hard way. I am still trying to figure this out.

RE:

Exactly.  Every time I try to track something down, I find bits and pieces all over the place.  I'll send you a PM so you can see what my ultimate goal is.

I think i can do this with a mod to the photos module to add a service call to return the path to the larger image. Then the service call can be called from the BxBaseSearchResultSharedMedia.php script.

Should not take me to long.

Deano, I sent you a PM with a demo of the intended functionality.  Tell me that isn't some cool stuff :)

Taking a time out for dinner.

This is one royal pain in my A$$

Someone needs to show boonex how to write code the easy way.

I am not sure this will be compatable with that jquery plug in of yours.

The path to the large image lookes like this.

m/photos/get_image/file/c6bd67e86f2d80b247f4a6aca371bda8.jpg

So it is actually calling function to get the image passing it's hash. I am not sure if this will work with your jquery plugin or not becuse it is not a actual disk path.

RE:

Glad it's not just me.  I've been looking at this for the last 24 hours, and finally decided that I'm in over my head.

It seems like it should be really simple since the file thumb.html and view_unit.html are so closely related to each other..... but it isn't.

Ok. Modify the template thumb.html as you already pointed out.


The code change. templates\base\scripts\BxBaseSearchResultSharedMedia.php at line 305


function _getSharedThumb ($iId, $sFileLink, $sHash = '') {
$sIdent = strlen($sHash) > 0 ? $sHash : $iId;
$aUnit = array(
'imgUrl' => $this->getImgUrl($sIdent),
'spacer' => getTemplateIcon('spacer.gif'),
'pic' => BX_DOL_URL_ROOT . 'm/photos/get_image/file/' . $sHash . '.jpg',
'fileLink' => $sFileLink,
'bx_if:admin' => array(
'condition' => $this->bAdminMode,
'content' => array('id' => $iId)
)
);
return $this->oModule->_oTemplate->parseHtmlByName('thumb.html', $aUnit);
}

Turns out this was mostly already there. Just needed to stick the url on the front of the hash and add jpg to the end.

Thanks Deano... that did what I wanted it to do.  

I thought the rest would be easy, but I'm having a hard time getting the jquery plugin to work.   I'll keep plugin' away at it though...

Finally... a bit of success.  Here's what I'm working on: DEMO


Just hover over a thumbnail for a second or two.  It's a little crude, but it shows promise.  This uses a jquery plugin that pops up a larger image when hovering over a thumbnail.  It uses the 'rel' attribute of the thumbnail/link, with the rel attribute set to the actual image as discussed earlier in this thread.   The size of the image that pops up, can be larger or smaller, and is easy to adjust.

There's more work to do, before this is ready for general use.  I need to figure out how to automatically position the popup div so that it never appears off the screen.  I also might have a js conflict with the popup login window...... I may have broken that myself..not sure.

I'm working on this because I hate the CoolIris slide show. I don't like the idea of viewing pictures on my site via cooliris.com   With that said. CoolIris is fairly easy to replace with a local flash viewer/slide show  that will read a media rss.  Even with a really good slide show working on my site, it still didn't seem quite right.  There's just a little too much going on with all the thumbnails that link to the photo's page, and a slide show directly below.  I get the feeling that people will just look at the slide show, and never bother to click on a thumbnail to get to the photos page, where they can vote and leave comments.  For me, popping up a slightly larger image when hovering on a thumb, gives a person a better look at the image, and does not discourage clicking through to the photo's page like the slide show does.  This is all, of course, only my opinion.

Any suggestions or comments are welcome.

Like..... what in the jquery plugin, is causing my db top menus to disappear.

good work - I like this change - especially since it works on the photos - home page

http://houstonlively.com/index.php

I hope you find the solution to the problem

if you want to remove the link - towards the site cooloris - edit : album_preview.html

Modules/boonex/photos/templates/base/album_preview.html

change this line

flashvars="feed=__rss_url__"

by

flashvars="feed=__rss_url__?variable1=&showFullscreen=false"

This gives you

<div class="album_preview">    
<object id="o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="__height__" style="display:block;">    
<param name="wmode" value="opaque"/>       
<param name="movie" value="__swf_url__" />        
<param name="allowFullScreen" value="true" />      
<param name="allowScriptAccess" value="always" />
<param name="flashvars" value="feed=__rss_url__" />   
<embed type="application/x-shockwave-flash"              
src="__swf_url__"
flashvars="feed=__rss_url__?variable1=&showFullscreen=false"
width="100%"
height="__height__"
allowFullScreen="true"         
allowScriptAccess="always"        
wmode="opaque">  
</embed>    
</object>
</div>

Have you not considered shadowbox?? http://www.shadowbox-js.com/ I use this on my D6 site.

Works great as a slide show, or as a lightbox for displaying images. Also integrates into jquery framework so offers nice fade / shrink animations.

Not too hard to integrate - simply need to add some css tags to the image elements.

/DM

RE:

My entire reason for doing this, is in my opinion, a slide show of any kind, on the album page, is just too obtrusive.   I don't want to do anything  that would discourage clicking through to the view photo page with the comments and ratings, etc.  Any kind of slide show will do exactly that.

Shadowbox, litebox, or anything else that ends in 'box' are just more slide shows.  BTW.... in this case, integrating shadow box on the album page, is not just a matter of adding some css tags to the thumbnails.  In a normal *box implementation, clicking an image anchor triggers the *box, but you can't do that here because the click has to take the user to the view photo page.  Triggering a *box on mouseover wouldn't make any sense, so you'd need to give the user some other way of viewing the *box slide show.  At that point, you may as well just use the CoolIris thing, or whatever you might want to replace CoolIris with.   A litebox slide show does have it's place, but I don't think this is one of them.  I do use a *box in a business directory that I'm still customizing HERE.  Just click on any thumbnail to see it.  You can also scroll down to the google map... click on 'View Larger Map', and watch what happens.

For D7 album pages, I like the larger image on hover concept.  The thumbnails are just large enough to grab a persons interest, or not grab a persons interest....whichever the case may be.  With a hover popup image, the user is given a better look at images of interest, and is only one click away from the view photo page.  I think the probability of a user clicking through to the photo page is increased this way... or at least not diminished.

All of this, is of course, only my opinion.

Sorry HL - I see your point, just glanced over posts earlier, guess I should read a bit deeper.

I added shadowbox to my site to add a bit of glitz to the otherwise dull D6 layout, but then I'm not particularly bothered if users click through to the image pages themselves - in fact I guess if I was to look at it, I tried to achieve the opposite - present all images without users having to navigate away from the thumbs page (which is what I assumed you were doing).

/DM

PS You should package this up and offer it in the Marketplace, it's a nice addition. I would definitely use it on my site.

DeeEmm is this correct?

Sorry Stuart, that is danielmaarseille's post, not mine.

/DM

yes it is ok - test -

This line is in the original file

<param name="flashvars" value="feed=__rss_url__" />

change only

flashvars="feed=__rss_url__"

by

flashvars="feed=__rss_url__?variable1=&showFullscreen=false"

I like this idea! Although site members enjoy the cooliris slide show feature. I would like them to vote on photos as well.

GREAT Work Houston and Deano

one question, a few of my sites are using the Joosocial bar, which has the "drag" photos feature the other sites are normal. Will this mod work with the JooSocial mod "meebo bar" perhaps?

RE:

I just like the ergonomics of this a little better, and it does make a page a bit more interesting.  It will work any place a photo thumbnail is used, including the photos block on the front page, and related photos blocks.  A positive side effect of this, is that if a user hovers over a thumbnail to view a larger version, then clicks through to the photo page, the photo page loads almost instantly since the image is already loaded.

The image preview of this is working to my satisfaction.  Auto positioning will keep the preview on screen now, and I've added a reminder to the preview that should help to encourage clicks. 

I'll probably put this in the market after it's all done.  Photo previews is just the first step.  I also want to do this for videos, where hovering over a video thumbnail will pop up a video preview.

I know this is a 2 year old post, but I'm hoping one of you geniuses can help me do this, but with the video mod. You can see my post here: http://www.boonex.com/forums/#topic/How-to-include-Youtube-thumbnail-on-video-page-.htm