Align thumbnails

tedbell

Joined: 2012-05-08
Posts: 5
Posted: Tue, 2012-05-08 17:10

I would like to align the thumbs and captions on the red line.. Top line for thumbs and bottom red line for captions. They are all using different margin settings derived from php.

I tried adjusting margin-top in function thumb_img in item.php in gallery3\modules\gallery\models but it didn't work.

All tables are set to vertical align. I even wrapped the title/caption in a div, but more failure!

So, can someone please give me a hint or two on how to achieve this?

Also, probably a real easy question, if I dupe WIND theme and rename it and change the name in theme.info, why won't my new template show up?

THANKS!!

AttachmentSize
gallery3thumb.jpg65.59 KB
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 25961
Posted: Tue, 2012-05-08 20:07

http://codex.gallery2.org/Gallery3:Themes#Duplicate_and_deploy_your_copy_of_the_default_theme It should so up if you renamed the folder and the text in the theme.info file.

Your on the right track with css but there is some margins changes due to the the aspect ratio and the amount of text for the description.
I think you would have to edit the views/album.html.php of your custom theme. How are you adding the captions?

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
 
tedbell

Joined: 2012-05-08
Posts: 5
Posted: Wed, 2012-05-09 03:46

Thanks for the reply - here is the album.html.php - there must be an easy way to align the thumbs and captions. I've struggled with this and can't figure it out.

Basically, if I could just get the captions from g-bottom <div> to start at 120 pixels down from the top of the <li>g-item class, it would be perfect:

	<li id="g-item-id-<?= $child->id ?>" class="g-item <?= $item_class ?>">

			<?= $theme->thumb_top($child) ?>
			<a href="<?= $child->url() ?>">
			  <? if ($child->has_thumb()): ?>
			  <?= $child->thumb_img(array("class" => "g-thumbnail")) ?>
			  <? endif ?>
			</a>

		<div class = "g-bottom">
			<h5><?= html::purify($child->title) ?></h5>
			<h6><?= nl2br(html::purify($child->description)) ?></h6>

			<?= $theme->thumb_bottom($child) ?>
			<?= $theme->context_menu($child, "#g-item-id-{$child->id} .g-thumbnail") ?>
			<ul class="g-metadata">
			  <?= $theme->thumb_info($child) ?>
			</ul>
		</div>

	</li>

I tried many themes for Gallery3, none of them had title/caption on the thumbs, so none made any accommodations for alignment as could be expected.
 
tedbell

Joined: 2012-05-08
Posts: 5
Posted: Fri, 2012-05-11 20:13

The margin-top was being calculated by gallery3/lib/gallery.common.js - in a cunction called $.fn.gallery_valign

changing margin-top based on the variable $(this).height(); but don't know how to get thumbnail height just element height

this seems like a brute-force kludge, and perhaps there is a way for my theme to adjust this, so please let me know if there is a more elegant solution
 
tempg

Joined: 2005-12-17
Posts: 1633
Posted: Sat, 2012-05-12 21:50

Have you tried wrapping the img thumb (not the captions) in a new div? Give that new div a defined height. That should align the tops of the captions. It's been a while (so I don't remember the details), but you may be able to try this:

<? if ($child->has_thumb()): ?>
<div class="thumbheightdiv">
<?= $child->thumb_img(array("class" => "g-thumbnail")) ?>
</div>
<? endif ?>

You have to give that new div a defined height with css.

For the images, it's a little trickier. My method involved changing some core file, but you may be able to vertical-align the same thumbheightdiv to get it done. If it doesn't work, I can look at it later next week.
 
tedbell

Joined: 2012-05-08
Posts: 5
Posted: Sun, 2012-05-13 15:36

Thanks for your response.. is it possible to get the height of the thumb from this:

$child->thumb_img.height();

If so, then I can easily tell if thumb is in portrait or landscape and adjust margin-top accordingly! I'll have to test this out - If you know the correct syntax to grab that thumb height let me know if this one is wrong.
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 25961
Posted: Sun, 2012-05-13 22:02

$child->thumb_height

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
 
tedbell

Joined: 2012-05-08
Posts: 5
Posted: Mon, 2012-05-14 16:18

Thanks, Dave! You are swell! I ended up switching the CSS used for thumbnails in album.html.php, and I didn't have to alter core files for this! Thanks for all the help.

<? if ($child->has_thumb()): ?>
  <? if ($child->thumb_height > 90): ?>
    <?= $child->thumb_img(array("class" => "g-thumbnailtall")) ?>
  <? else: ?>
    <?= $child->thumb_img(array("class" => "g-thumbnail")) ?>
<? endif ?>