Gallery Module resizes to a different thumbnail size

[newvision]

I am using CMS MS version 1.11.8 and the latest Gallery Module. I have a couple of issues:

1.I have set the thumbnail size to 207 x 136 but it gives me something much smaller.
2. When i click on the thumbnail, i want it to go to a page and not to a larger version of the image. How can I fix that?

Thanks.

[velden]

Thumbnail sizes are set per template. So make sure you use the template where you set the thumbnail size.

If you don't want to go to the larger version of the image, why are you using the Gallery module? It's build to do that.

Maybe you can tell us what you want to make exactly (supply a link to example if available).

[newvision]

Thanks for your quick response. You are right. Maybe I do not want to use the Gallery. Here is what i am trying to do. At the bottom of the page, I want to show 8 images, 4 to a row. I have a set size for thos images. When someone click on the image, i want them to be able to go to a web paage or blog entry.

Currently the thumbnails have been resized even though I specified the size to exactly 207x136. whn I use that size, that give me the 2 rows of 4 each.

As you can see by the attached file, i am getting something else. I was using the Ligthbox.

[velden]

Although I think it's possible to make it with the Gallery module I would use another approach:

If it's for only one page you could consider integrating this in the PAGE template:

Modules needed:
CGSmartImage (plus dependencies) for resizing the images
GBFilePicker for selecting and uploading the images (you could also use the {content_image} tag but GBFilePicker allows for a much more intuitive experience in my opinion)

partial example (not fully tested):

Code: Select all

{content_module block="filepicker_block_1" module="GBFilePicker" assign="image1" label="Image 1" mode="browser" media_type="image" dir="images" tab="Eight images"}
{content block="url_1" oneline=1 label="Full url image 1" assign="url1" tab="Eight images"}
{content_module block="filepicker_block_2" module="GBFilePicker" assign="image2" label="Image 2" mode="browser" media_type="image" dir="images" tab="Eight images"}
{content block="url_2" oneline=1 label="Full url image 2" assign="url2" tab="Eight images"}

...
{if $image1 && $url1 != ''}
<div class="image-block">
<a href="{$url1}">
{CGSmartImage src=$image1 filter_croptofit='125,125,,1' noembed=1 alt=""}
</a>
</div>
{/if}

{if $image2 && $url2 != ''}
<div class="image-block">
<a href="{$url2}">
{CGSmartImage src=$image2 filter_croptofit='125,125,,1' noembed=1 alt=""}
</a>
</div>
{/if}

...

Above example will create an extra TAB when editing the page content. There you can (upload and) select an image and type a full url. Note that you can do that for every individual page that uses this page template. So nice if you want to be able to have several pages using their own set of images and links. Not nice if you want multiple pages using the same set.

Another possible approach is using:

- ListItExtended module (LI2)
- ListItXdefs module
- CGSmartImage (and dependencies)
- GBFilePicker

ListItExtended is a very flexible module to maintain all kinds of lists. It will let you use GBFilePicker too, you can define extra fields per item (for the url). Read the help and try to use it. If you need to make more lists (any kind) it's worth the effort to learn how to use this module!

[newvision]

Thanks! I will give this a try and let you know!

[newvision]

Where do I put that code? Do I put it anywhere in the Template for the page i want to work with?

[velden]

Typically in that Template indeed. Put it where you want the images to be in the html source.

There are alternatives ofcourse but this should do the job.

[newvision]

Great! Thanks!

[newvision]

Thanks. I cannot get that to work. I added the code to the Page Template where I wanted it to appear after installing the modules, CGSmartImage and GBFilePicker.

When I tried to edit the page, no new Tab appeared.

I have my images loaded in the directory:' /uploads/images/Portfolio'

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : ElegantBlue
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20120108
Modified: Nia Interactive for CMS Made Simple | niainteractive.com

-->
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Author" content="Nia Interactive : niainteractive.com" />
<title>{sitename} - {title}</title>
{cms_stylesheet}
{metadata}

<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="drkyre_slider, WOW Slider, Photo Slider jQuery, Image Slider HTML" />
	<meta name="description" content="drkyre_slider created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />
	<!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="engine1/style.css" />
	<__script__ type="text/javascript" src="engine1/jquery.js"></__script>
	<!-- End WOWSlider.com HEAD section -->
</head>

</__body>
<div id="wrapper">

<!-- #header -->
<div id="header-wrapper">
<div id="header">
<div id="logo">
<a href="index.php"><img src="/drkyre/uploads/Elegant_Blue/dk_logo.png" border="0" height="115"></a>
</div>
</div>
</div>
<!-- end #header -->

<!-- #menu -->
<div id="menu-wrapper">
<div id="menu">
<ul>
<li>{menu number_of_levels='1'}</li>
</ul>
</div>
</div>
<!-- end #menu -->

<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">

<div id="page-content">
	<!-- Start WOWSlider.com BODY section -->
	<div id="wowslider-container1">
	<div class="ws_images"><ul>
<li><a href="http://drkyre.com/"><img src="data1/images/dr.kyre_adept.jpg" alt="Dr.Kyre Adept" title="Dr.Kyre Adept" id="wows1_0"/></a>Dr. Kyre is a multi talented professional. You may find her writing about cooking or spirituality, creating her signature mouth-watering chocolate truffles, or helping clients recode their inner programming so they can reconnect with their divine blueprint and live happy lives.</li>
<li><a href="http://drkyre.com/food.html" target="_self"><img src="data1/images/food.png" alt="Food" title="Food" id="wows1_1"/></a>A former chef, Kyre delights in excellent food – in your house as well as hers.  Her cookbooks are available in all ebook formats, with mouth-watering pictures by Madeleine Vite.  Click here to find the book page.</li>
<li><a href="http://drkyre.com/books.html"><img src="data1/images/books1.png" alt="Books" title="Books" id="wows1_2"/></a>Can you spell “spiritual overachiever”?  With renowned photographer Madeleine Vite (top row) or as a lightworker (bottom row), Kyre now has ten books in print.  Click here and take your pick!</li>
<li><a href="http://tealsheepfoundation.org"><img src="data1/images/tealsheep2good.png" alt="Teal Sheep Foundation" title="Teal Sheep Foundation" id="wows1_3"/></a>We just love to do good in the world… especially for those who are creatively eccentric.  The Teal Sheep Foundation supports excellence in the arts, writing, healing, spirituality and chocolate!  Click here for more.</li>
<li><a href="http://art-of-integration.com.html" target="_self"><img src="data1/images/creating_the_future.png" alt="ART of Integration" title="ART of Integration" id="wows1_4"/></a>Are you living the fabulous life you were designed to enjoy?  If not, we can use techniques that quickly and effectively reset your energy fields so that you can step forward into your perfect future. </li>
<li><a href="http://churchofchocolate.org"><img src="data1/images/church_of_chocolate.png" alt="Church of Chocolate" title="Church of Chocolate" id="wows1_5"/></a>We all know that really good chocolate IS a religious experience.  That’s why Kyre produces exceptional chocolate truffles as part of her spiritual communion.  One bite, and you’ll think you’ve died and gone to heaven…</li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Dr.Kyre Adept">1</a>
<a href="#" title="Food">2</a>
<a href="#" title="Books">3</a>
<a href="#" title="Teal Sheep Foundation">4</a>
<a href="#" title="ART of Integration">5</a>
<a href="#" title="Church of Chocolate">6</a>
</div></div>
<span class="wsl"><a href="http://wowslider.com">Image Sliders</a> by WOWSlider.com v4.8</span>
	<a href="#" class="ws_frame"></a>
	</div>
	<__script__ type="text/javascript" src="engine1/wowslider.js"></__script>
	<__script__ type="text/javascript" src="engine1/script.js"></__script>
	<!-- End WOWSlider.com BODY section -->
<div id="content">

<!-- #content -->
<div class="post">
<h2 class="title"><a href="index.php">{title}</a></h2><p>

<div class="entry">
{content}
</div>
</div>

<div style="clear: both;">&nbsp;</div>

{content_module block="filepicker_block_1" module="GBFilePicker" assign="image1" label="Image 1" mode="browser" media_type="image" dir="images" tab="Eight images"}
{content block="url_1" oneline=1 label="Full url image 1" assign="url1" tab="Eight images"}
{content_module block="filepicker_block_2" module="GBFilePicker" assign="image2" label="Image 2" mode="browser" media_type="image" dir="images" tab="Eight images"}
{content block="url_2" oneline=1 label="Full url image 2" assign="url2" tab="Eight images"}

...
{if $image1 && $url1 != ''}
<div class="image-block">
<a href="{$url1}">
{CGSmartImage src=$image1 filter_croptofit='160,105,,1' noembed=1 alt=""}
</a>
</div>
{/if}

{if $image2 && $url2 != ''}
<div class="image-block">
<a href="{$url2}">
{CGSmartImage src=$image2 filter_croptofit='160,105,,1' noembed=1 alt=""}
</a>
</div>
{/if}

...


</div>
<!-- end #content -->

<!-- #sidebar -->
<div id="sidebar">
<ul>

<li><h2>Menu</h2>
{menu number_of_levels="2" start_level="1" collapse="1"}
</li>

<li><h2>Latest News</h2>
<p>New Website<br>
New Theme</p>
</li>



</ul>
</div>
<!-- end #sidebar -->

</div>
<div style="clear: both;">&nbsp;</div>
</div>
</div>
</div>
<!-- end #page -->
</div>

<div id="footer">
<p>Copyright (c) 2012 {sitename}. Powered by Nia Interactive.</p>
</div>
<!-- end #footer -->

<__body>
</__html>

I am not sure what to do next. Can you offer any suggestions?
Thanks!

[velden]

It looks fine except for the '...' (twice) which are there to let you know you could repeat those steps 8 times if you want.

The '...' should however show up on the webpage (front end). If not, that template is not used for your page (double check!).

It should work that way.

I see a lot of hard coded text etc in your template. That should not be necessary but I assume 'work in progress'.

[newvision]

I removed the three dots and copied that content between the dots and placed that 7 times to reflect the totoal of 8 images. I went to eit the page and there was a tab. I uploaded the 8 images using the file picker. I thought I placed the imeaged in a folder called, 'uploads/images/homeport' but it actually placed the iages in a folder called 'uploads/GBFilePickerThumbs'.

Now when I try to view the page, I still do not see anything.

anysuggestions on what and where i need to make changes?
Thanks!

[newvision]

i've uploded my site to drkyre.com. I am using cmsms 1.11.8. On the hoje page at the bottom, I am try to display the same images as in my previous post. I could not get them to display.
I am using CGSmartImage and GBFilePicker.

When I go to edit the page, their is a tab labeled, 'Eight Images." However, I can only pick two. Even when I pick two, nothing happens. I am not sure where they are going. They are not appearing on the front page, that's for sure. Below is the code from the template as well as som screen shots for CGSmartimage stuff.
Please let me know if you can spot my problem and what I can do about it. Thanks!

Code: Select all

<h4><strong>Staying Clear and Focused in the Midst of Diversity</strong></h4>
<p><br />Question: What do cookbooks, books on spirituality, a non-profit organization, chocolate, and personal coaching have in common?</p>
<p><br />Answer: Dr. Kyre Adept.</p>
<br />
<p>Dr. Kyre is a multi talented professional. You may find her writing about cooking or spirituality, creating her signature mouth-watering chocolate truffles, or helping clients recode their inner programming so they can reconnect with their divine blueprint and live happy lives. Dr. Kyre models what she teaches her clients and customers. Her cookbooks are well designed, precise and easy to follow; she expresses her spirituality clearly in her life; and her intuition allows her to zero in on the exact steps her coaching clients need in order to get their lives back on track.</p>
<p>Passion and purpose are important in her life: she helps her clients and customers tap into their passions and purpose too, whether it’s trying out beautifully-presented recipes or finding their way in life. They learn to listen to the small voice of intuition that sets them on the right path, get clear about exactly what they want and need to do next, and focus on doing the right things.</p>
<p>Her education is as diverse as her talents. She holds both a BA and an MA in architecture from Hull School of Architecture in England, and a PhD in Esoteric Studies from American Pacific University in Hawaii. She is a Reiki master and a professional coach trained by The Coaches Training Institute (CTI), one of the oldest coach training schools in the industry. Dr. Kyre is one of only 40 certified practitioners/instructors of Geotran™, a straightforward technique for personal transformation.</p>
<p>Click on any of the links below for details of the diverse ventures that bring joy, hope and happiness to Dr.Kyre’s clients and customers.</p>
<p> </p>
<p> </p>
{content_module block="filepicker_block_1" module="GBFilePicker" assign="image1" label="Image 1" mode="browser" media_type="image" dir="images" tab="Eight images"} {content block="url_1" oneline=1 label="Full url image 1" assign="url1" tab="Eight images"} {content_module block="filepicker_block_2" module="GBFilePicker" assign="image2" label="Image 2" mode="browser" media_type="image" dir="images" tab="Eight images"} {content block="url_2" oneline=1 label="Full url image 2" assign="url2" tab="Eight images"} {content_module block="filepicker_block_3" module="GBFilePicker" assign="image3" label="Image 3" mode="browser" media_type="image" dir="images" tab="Eight images"} {content block="url_3" oneline=1 label="Full url image 3" assign="url3" tab="Eight images"} {content_module block="filepicker_block_4" module="GBFilePicker" assign="image4" label="Image 4" mode="browser" media_type="image" dir="images" tab="Eight images"} {content block="url_4" oneline=1 label="Full url image 4" assign="url4" tab="Eight images"} {content_module block="filepicker_block_5" module="GBFilePicker" assign="image5" label="Image 5" mode="browser" media_type="image" dir="images" tab="Eight images"} {content block="url_5" oneline=1 label="Full url image 5" assign="url5" tab="Eight images"} {content_module block="filepicker_block_6" module="GBFilePicker" assign="image6" label="Image 6" mode="browser" media_type="image" dir="images" tab="Eight images"} {content block="url_6" oneline=1 label="Full url image 6" assign="url6" tab="Eight images"} {content_module block="filepicker_block_7" module="GBFilePicker" assign="image7" label="Image 7" mode="browser" media_type="image" dir="images" tab="Eight images"} {content block="url_7" oneline=1 label="Full url image 7" assign="url7" tab="Eight images"} {content_module block="filepicker_block_8" module="GBFilePicker" assign="image8" label="Image 8" mode="browser" media_type="image" dir="images" tab="Eight images"} {content block="url_8" oneline=1 label="Full url image 8" assign="url8" tab="Eight images"} ... {if $image1 && $url1 != ''}
<div class="image-block"><a href="{$url1}"> {CGSmartImage src=$image1 filter_croptofit='160,105,,1' noembed=1 alt=""} </a></div>
{/if} ... {if $image2 && $url2 != ''}
<div class="image-block"><a href="{$url2}"> {CGSmartImage src=$image2 filter_croptofit='160,105,,1' noembed=1 alt=""} </a></div>
{/if} ... {if $image3 && $url3 != ''}
<div class="image-block"><a href="{$url3}"> {CGSmartImage src=$image3 filter_croptofit='160,105,,1' noembed=1 alt=""} </a></div>
{/if} ... {if $image4 && $url4 != ''}
<div class="image-block"><a href="{$url4}"> {CGSmartImage src=$image4 filter_croptofit='160,105,,1' noembed=1 alt=""} </a></div>
{/if} ... {if $image5 && $url5 != ''}
<div class="image-block"><a href="{$url5}"> {CGSmartImage src=$image5 filter_croptofit='160,105,,1' noembed=1 alt=""} </a></div>
{/if} ... {if $image6 && $url6 != ''}
<div class="image-block"><a href="{$url6}"> {CGSmartImage src=$image6 filter_croptofit='160,105,,1' noembed=1 alt=""} </a></div>
{/if} ... {if $image7 && $url7 != ''}
<div class="image-block"><a href="{$url7}"> {CGSmartImage src=$image7 filter_croptofit='160,105,,1' noembed=1 alt=""} </a></div>
{/if} ... {if $image8 && $url8 != ''}
<div class="image-block"><a href="{$url8}"> {CGSmartImage src=$image8 filter_croptofit='160,105,,1' noembed=1 alt=""} </a></div>
{/if} ... <!-- end #content -->

[velden]

Please use the 'Code' block in this forum's editor.

I only hope dat

Code: Select all

{if $image8 && $url8 != ''}

is actually

Code: Select all

{if $image8 && $url8 != ''}

in your template.

I didn't check the conditional statement but think it should work.
Else for testing change a condition:

Code: Select all

{if true}
<div class="image-block"><a href="{$url1}"> {CGSmartImage src=$image1 filter_croptofit='160,105,,1' noembed=1 alt=""} </a></div>
{/if}

and look what happens.


I think it's strange you can only select 2 images. It seems like your changes in the template don't reflect when editing the page.