Gallery: Order, and comments

JEPad · **Joined:** Sat Sep 27, 2008 9:58 pm **Posts:** 4

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:

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

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

Thanks again.

JEPad · **Joined:** Sat Sep 27, 2008 9:58 pm **Posts:** 4

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 · **Posted:** Wed Sep 23, 2009 4:01 pm

Thanks for using Gallery

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

You can replace this:

Code:

<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:

<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 · **Joined:** Thu Jan 24, 2008 4:11 pm **Posts:** 99

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

Jos · **Posted:** Wed Jan 27, 2010 1:56 pm

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 · **Joined:** Thu Jan 24, 2008 4:11 pm **Posts:** 99

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 · **Posted:** Wed Jan 27, 2010 9:52 pm

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

try {$image->comment|htmlentities}

sonictrip · **Joined:** Thu Jan 24, 2008 4:11 pm **Posts:** 99

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 · **Posted:** Thu Jan 28, 2010 6:25 pm

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

Rednes · **Posted:** Fri Apr 02, 2010 10:58 am

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:

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:

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

Jos · **Posted:** Fri Apr 02, 2010 11:12 am

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 · **Posted:** Fri Apr 02, 2010 11:26 am

Jos wrote:

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:

<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 · **Posted:** Fri Apr 02, 2010 11:55 am

Rednes wrote:

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 · **Posted:** Fri Apr 02, 2010 1:06 pm

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

Thx!

idesignedit · **Joined:** Thu Sep 01, 2011 12:51 pm **Posts:** 2

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>

Gallery: Order, and comments

Who is online