Gallery: Order, and comments

[JEPad]

Jos!  Gallery is great.  I'm a complete neophyte and have gotten it up and looking good on my pages. Thanks!

2 questions:  

1. How to set the order of the images?  Are they displayed in the order that they are uploaded?  Or in alphabetical order by filename (seems not to be that).  Could you provide instructions on how to get images into desired order, using the current version?  Thanks.

EDIT: I think it may actually be alpha by filename--checking on that now. sorry...



2. I can't seem to get comments displaying in any of the templates.  Could you provide some guidance?  I saw some discussion of putting

Code: Select all

title="{$image->title}<br />{$image->comment|escape:'html'}"

into the template, but it didn't work for me.  

Thanks again.

[JEPad]

Hi and sorry for my error--question 1 is solved for now.  The order in the images folder is the order the gallery will appear, and that is alpha by filename.  So question 2 remains.  Thanks again.

[Jos]

Thanks for using Gallery

In order to display image-comments, I give you an example for the Lightbox template.

You can replace this:

Code: Select all

<div class="img">
{if $image->isdir}
	<a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}"
alt="{$image->title}" /></a><br />{$image->title}
{else}
	<a href="{$image->file}" title="{$image->title}" rel="lightbox[gallery]"><img
src="{$image->thumb}" alt="{$image->title}" /></a>
{/if}
</div>

With this:

Code: Select all

<div class="img">
{if $image->isdir}
	<a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}"
alt="{$image->title}" /></a><br />{$image->title}
{else}
	<a href="{$image->file}" title="{$image->title}<br
/>{$image->comment|escape:'html'}" rel="lightbox[gallery]"><img
src="{$image->thumb}" alt="{$image->title}" /></a>
{/if}
</div>

You see a html escaping parameter after the $image->comment variable. Thats needed for Lightbox to include html in the comment. I found that in the Lightbox documentation on http://www.huddletogether.com/projects/lightbox2/

For other templates it might be similar, maybe the html escaping is not needed. The Fancybox template won't be suitable because of the tiny space. I didn't test it in the other templates myself.

[sonictrip]

Anyone know how to get HTML comments working for the Fancybox template? Thanks.

[Jos]

Better ask that the makers of Fancybox

Gallery has the field {$image->comment} available for this... Where to put it is up to Fancybox

[sonictrip]

Yeah i tried it with that and with this: {$image->comment|escape:'html'}

It'll show normal text from the comments but just not HTML text that you can stick website links in. For example, i have a gallery of website screenshots and i want to have links in the title or comments that people can click on to go to the website. Currently, you need to copy and paste the url.

[Jos]

so with {$image->comment} the html gets encoded?

try {$image->comment|htmlentities} 

[sonictrip]

Ok i tried {$image->comment|htmlentities} but it still displays the raw html code instead of a link:


Website Description - Website Description

I had a look at a page about Fancybox and it seems it might not support inline HTML yet... wonder could it be just something that needs changing in the template or is it a change which has to be done in the js file?

[Jos]

I'm afraid it has to be changed somewhere in the Fancybox files then.

[Rednes]

Hi guys,

I want the description to appear in or under the fancybox window. So not at the thumbs. For that ya probably need to edit some stuff in this js file. ( modules/gallery/templates/fancybox/jquery.fancybox.pack.js ).

The original file is hardly readable so I've thrown in some enter's which made it a bit more readable:
(download the .txt file attached to this post)

At this point I only know what the element is called where the image title is being displayed(fancybox-title-main). Im starting here because the image title is being produced in a way I may also want for the description.

In the attached  javascript file at line 304 you see:

Code: Select all

function aa(a)
{
	if(a&&a.length)
		switch(c.titlePosition)
		{
			case "inside":return a;
			case "over":return'<span id="fancybox-title-over">'+a+"</span>";
			default:return'<span id="fancybox-title-wrap">
                                                <span id="fancybox-title-left"></span>
                                                <span id="fancybox-title-main">'+a+'</span>
                                                <span id="fancybox-title-right"></span></span>'
		}
	return false
}

variable "a" in the fancybox-title-main element is the image title.


What I want to know now is, how is variabe "a" being filled with the title you enter in the admin section of the gallery module.


edit: Just found out that you can put html code in the Title field in Admin->Gallery->Yourgallery. This sort of fixes my problem but im still gonna try to use the description field in Admin->Gallery->Yourgallery to display the image description.
So you can add html to the Title field in the Admin section of the Gallery module, example:

Code: Select all

Picture Title<br />
This is the picture description.<br />
go to <a href='your.url.com'>this</a> site

[Jos]

You better not want to edit the javascript files.

Take a look at what options Fancybox has built in nowadays on http://fancybox.net/
Note the setting for different title positions: 'outside', 'inside' and 'over'. It should not be to difficult to look at the sourcecode of the given examples and build that into the gallerytemplate...

[Rednes]

You better not want to edit the javascript files.

Take a look at what options Fancybox has built in nowadays on http://fancybox.net/
Note the setting for different title positions: 'outside', 'inside' and 'over'. It should not be to difficult to look at the sourcecode of the given examples and build that into the gallerytemplate...

Yeah I noticed alot of settings are avaiable in the js file. But Ill go have a look at it. Thx


edit:
I've added an option ( 'titleposition': 'inside' ) in the javascript part of the Fancybox template in Admin->Gallery.

Code: Select all

<__script__ type="text/javascript" src="modules/Gallery/templates/jquery/jquery.js"></__script>
<__script__ type="text/javascript" src="modules/Gallery/templates/fancybox/jquery.fancybox.pack.js"></__script>
<__script__ type="text/javascript" src="modules/Gallery/templates/jquery/jquery.mousewheel.pack.js"></__script>

<__script__ type="text/javascript">
$(document).ready(function() {
	$("a.group").fancybox({
		'speedIn':		300,
		'speedOut':	300,
		'overlayColor':	'#666',
		'overlayOpacity':	0,
                                'titlePosition':'inside'

	});
});
</__script>

Now I want to get the description field in there aswell.

[Jos]

Now I want to get the description field in there aswell.

My first post in this topic shows you how... It's nearly the same for Lightbox and Fancybox: add the $image->comment variable to the title-attribute.

[Rednes]

Ah right...passing it threw with the title attribute


Thx!

[idesignedit]

Where do you add:

<div class="img">
{if $image->isdir}
<a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}"
alt="{$image->title}" /></a><br />{$image->title}
{else}
<a href="{$image->file}" title="{$image->title}<br
/>{$image->comment|escape:'html'}" rel="lightbox[gallery]"><img
src="{$image->thumb}" alt="{$image->title}" /></a>
{/if}
</div>

Where is this template in the folder structure?

I can see:

<div class="img">
<?php if ($this->_tpl_vars['image']->isdir): ?>
<a href="<?php echo $this->_tpl_vars['image']->file; ?>
" title="<?php echo $this->_tpl_vars['image']->titlename; ?>
"><img src="<?php echo ((is_array($_tmp=((is_array($_tmp=$this->_tpl_vars['image']->thumb)) ? $this->_run_mod_handler('escape', true, $_tmp, 'url') : smarty_modifier_escape($_tmp, 'url')))) ? $this->_run_mod_handler('replace', true, $_tmp, '%2F', '/') : smarty_modifier_replace($_tmp, '%2F', '/')); ?>
" alt="<?php echo $this->_tpl_vars['image']->titlename; ?>
" /></a><br />
<?php echo $this->_tpl_vars['image']->titlename; ?>

<?php else: ?>
<a href="<?php echo ((is_array($_tmp=((is_array($_tmp=$this->_tpl_vars['image']->file)) ? $this->_run_mod_handler('escape', true, $_tmp, 'url') : smarty_modifier_escape($_tmp, 'url')))) ? $this->_run_mod_handler('replace', true, $_tmp, '%2F', '/') : smarty_modifier_replace($_tmp, '%2F', '/')); ?>
" title="<?php echo $this->_tpl_vars['image']->titlename; ?>
" rel="lightbox[gallery]"><img src="<?php echo ((is_array($_tmp=((is_array($_tmp=$this->_tpl_vars['image']->thumb)) ? $this->_run_mod_handler('escape', true, $_tmp, 'url') : smarty_modifier_escape($_tmp, 'url')))) ? $this->_run_mod_handler('replace', true, $_tmp, '%2F', '/') : smarty_modifier_replace($_tmp, '%2F', '/')); ?>
" alt="<?php echo $this->_tpl_vars['image']->titlename; ?>
" /></a>
<?php endif; ?>
</div>