portfolio gallery thumbnails zooming in

(8 posts) (2 voices)

1. 

   hewdini
   Member

   I am trying to create a gallery but the thumbnails keep getting zoomed in and makes my gallery page look really bad.
   I am currently using a 4 column layout but even when I switch to a 3 column I just get a bigger version of the zoomed image.

   I am filling in these fields:
   Portfolio Gallery Image (optional)
   Portfolio Fullsize Image (required)

   This is the image file I am using for the Portfolio Gallery Image: "http://gamechangersunite.com/database/images/2011/05/westjet_thumb.jpg"

   I have even tried putting this image in both the fullsize image field and the gallery image field and other image variation, but the end result is still what you see in the below examples.

   Here are two examples of what I am talking about of it not working. same image file in both a 3 and 4 column layout.
   http://gamechangersunite.com/database/gamechangers-100/
   http://gamechangersunite.com/database

   Thanks for your assistance in solving this.

   Posted 1 year ago #
2. 

   Elliott
   Support

   Hello hewdini,

   What you will want to do is create a thumbnail of your fullsize image and place it inside the "Portfolio Gallery Image" field. This will have it display in the gallery and your fullsize image will still display on your post and within prettyPhoto.

   Let us know if this helps hewdini.

   Posted 1 year ago #
3. 

   hewdini
   Member

   I have created a thumbnail, is this not the correct sizing for a thumbnail? as it is the correct width. does the thumbnail have to be the exact dimensions given?

   here is the link to my current thumbnail again, http://gamechangersunite.com/database/images/2011/05/westjet_thumb.jpg

   Posted 1 year ago #
4. 

   Elliott
   Support

   If your using the portfolio gallery then you thumbnail should be 276 x 151. Otherwise it will be resized to fit into the frame.

   You can click on the "+ more info" when editing your posts to view more information on that specific option as well as image dimensions that will be used.

   Posted 1 year ago #
5. 

   hewdini
   Member

   Well being that this thumbnail is smaller than those dimension why is it being zoomed up on in my gallery? I cannot even read the logo on it as it is too zoomed in.

   Posted 1 year ago #
6. 

   Elliott
   Support

   Whether it is smaller or larger than 276 x 151 it will still be resized to fit those dimensions.

   Are you wanting to take off image resizing? If that is the case then you will also need to edit the image frame that appears around the portfolio images.

   Posted 1 year ago #
7. 

   hewdini
   Member

   Would it be possible to have it resize based on the width "276" and not the height "151"? This would make it so that my image of 171x33 would go to a max of 276x53 instead of what it is doing now of becoming 782x151 which is causing this zooming effect.

   If that is not possible how would i go about removing image resizing?

   Thanks

   Posted 1 year ago #
8. 

   Elliott
   Support

   Sorry, since your using Awake open up /wp-content/themes/awake/lib/functions/shortcode.php and on line 111 you should see this,

   //define image height & width
   if($column == 4){ $img_height = '110'; $img_width = '176'; }
   if($column == 3){ $img_height = '160'; $img_width = '255'; }
   if($column == 2){ $img_height = '260'; $img_width = '412'; }
   if($column == 1){ $img_height = '355'; $img_width = '570'; }

   That will change the dimensions to what it is resized too. You may also need to change the CSS values of the image containers also though. Open up /wp-content/themes/awake/style.css and you can find them on line 609,

   /* ------- 1. Preloaders ------- */
   .gallery_set .load_img {
   	display:inline-block; overflow:hidden; padding:0 0 4px 0; position:relative; width:100%; }
   .gallery_set .one_fourth .load_img {
   	background:url(styles/_shared/slider_loader.gif) no-repeat scroll 86px 50px transparent; height:128px; }
   .gallery_set .one_third .load_img {
   	background:url(styles/_shared/slider_loader.gif) no-repeat scroll 121px 78px transparent; height:174px; }
   .gallery_set .one_half .load_img {
   	background:url(styles/_shared/slider_loader.gif) no-repeat scroll 208px 124px transparent; height:276px; }
   .gallery_set .two_third .load_img {
   	background:url(styles/_shared/slider_loader.gif) no-repeat scroll 290px 176px transparent; height:372px; }
   .portfolio_full_item{
   	margin-bottom:20px;width:900px;}
   .portfolio_full_item .load_img{
   	background:url(styles/_shared/slider_loader.gif) no-repeat scroll 50% 50% transparent; height:534px; }

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.