TGPX Thumb Template Converted to Bootstrap Grid CSS
Hello. I am dumb with the {insert} and {foreach} commands when trying to get TGPX to display thumbs in 3 rows by 6 columns when using with bootstrap grid system.
Can anyone help?
This is the original TGPX code that is generated by the script:
PHP Code:
<!-- START TGPX MIXED PICTURE Gallery Codes -->
<table align="center" cellpadding="2" border="0">
<tr>
{* Load 18 galleries *}
{galleries
var=$galleries
preview=true
type=any
category=MIXED
format=pictures
amount=18
globaldupes=true
getnew=true
allowused=true
order=date_approved DESC
reorder=date_approved DESC}
{* Display loaded galleries as thumbnails in a 6 per row format *}
{foreach from=$galleries var=$gallery counter=$counter}
<td><a href="/gallery/click.php?id={$gallery.gallery_id|urlencode}&l=pic-gal-1&u={$gallery.gallery_url|urlencode}" title="{$gallery.description|htmlspecialchars} Pictures" target="_blank"><img src="{$gallery.preview_url|htmlspecialchars}" alt="{$gallery.description|htmlspecialchars}" style="border:1px solid #0000c4;" width="160" height="210" /></a>
<br /><span class="smallest">({$gallery.thumbnails|htmlspecialchars}) <a href="/gallery/click.php?id={$gallery.gallery_id|urlencode}&l=pic-gal-1&u={$gallery.gallery_url|urlencode}" target="_blank" title="Teen Picture Gallery.. {$gallery.clicks|htmlspecialchars} Views">Pictures of {$gallery.tour_title|htmlspecialchars}</a>...<br /></span>
</td>
{insert location=+6 counter=$counter max=18}
</tr><tr>
{/insert}
{/foreach}
</tr>
<tr>
<td><div style="position: absolute; left: 16px; top: 5px;" class="smallest"><a href="../galleries/" title="Newest Galleries">Galleries Home</a> Posted Teen Picture Galleries <b>Page 1</b> | <a href="pictures_page2.php" title="Picture Gallery Page 2">Page 2</a> | <a href="pictures_page3.php" title="Picture Gallery Page 3">Page 3</a> | <a href="pictures_page4.php" title="Picture Gallery Page 4">Page 4</a></div></td>
<td><br /><div style="position: absolute; right: 16px; bottom: 5px;" class="smallest"><a href="../galleries/" title="Newest Galleries">Galleries Home</a> Posted Teen Picture Galleries <b>Page 1</b> | <a href="pictures_page2.php" title="Picture Gallery Page 2">Page 2</a> | <a href="pictures_page3.php" title="Picture Gallery Page 3">Page 3</a> | <a href="pictures_page4.php" title="Picture Gallery Page 4">Page 4</a></div></td>
</tr>
</table>
<!-- END TGPX MIXED PICTURE Gallery Codes END -->
This is the code I have that almost works but shows slight indentations on each row:
PHP Code:
<!-- START TGPX MIXED PICTURE Gallery Codes -->
<div class="row">
{* Load 18 galleries *}
{galleries
var=$galleries
preview=true
type=any
category=MIXED
format=pictures
amount=18
globaldupes=true
getnew=true
allowused=true
order=date_approved DESC
reorder=date_approved DESC}
{* Display loaded galleries as thumbnails in a 6 per row format *}
{foreach from=$galleries var=$gallery counter=$counter}
<div class="col-sm-2">
<a href="/gallery/click.php?id={$gallery.gallery_id|urlencode}&l=pic-gal-1&u={$gallery.gallery_url|urlencode}" title="{$gallery.description|htmlspecialchars} Photos" class="thumbnail home-thumb">
<img src="{$gallery.preview_url|htmlspecialchars}" alt="{$gallery.description|htmlspecialchars}">
</a>
</div>
{insert location=+6 counter=$counter max=18}
</div>
<div class="row">
{/insert}
{/foreach}
<!-- END TGPX MIXED PICTURE Gallery Codes END -->
This is the bootstrap code to show thumbs that I am trying to convert to the TGPX code:
PHP Code:
<div class="row">
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic1.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic2.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic3.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic4.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic5.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic6.jpg" alt="title">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic1.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic2.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic3.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic4.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic5.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic6.jpg" alt="title">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic1.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic2.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic3.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic4.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="#" class="thumbnail home-thumb">
<img src="images/pic5.jpg" alt="title">
</a>
</div>
<div class="col-sm-2">
<a href="info_new.php" class="thumbnail home-thumb">
<img src="images/pic6.jpg" alt="title">
</a>
</div>
</div>
A BIG thank you to anyone that can get the code to work. ANY help is appreciated. |
