Resizing Gallery Image Size
  • JiddleJiddle
    January 2012
    Hi Mike, I'm loving the look of the Galleria theme so far. However, can you provide me with instructions on how to resize the gallery image to accommodate a wider aspect ratio?

    thank you in advance!
  • mikemike
    January 2012
    Here are directions on how to change the height, width, and number of thumbnails for the Galleria theme. It might be a bit overwhelming at first but it's mostly just simple CSS edits of adjusting pixel width/heights.

    The maximum height of images can be adjusted by one line of code in the CSS:

    1. Open the CSS Stylesheet /includes/css/:
    'slideshow.css'

    2. Find:
    div.slideshow a.advance-link {
    display: block;
    line-height: 485px; /* This should be set to be at least the height of the largest image in the slideshow with padding */
    text-align: center;
    }

    3. Edit the line-height to the maximum height you want and your done!

    -----------------------------------------------------------------------


    Here's how you can increase the maximum width of the gallery.

    7 Areas to Edit (Don't get overwhelmed, You are only adjusting the widths. Example. If adding 20px more to maximum width, only add 20px more to each of these div's listed below. 644px becomes 664px, 940px becomes 960px, 640px becomes 660px, and so forth...)

    Edits to stylesheet /includes/css standard.css
    div.slideshow a.advance-link {
    width:644px; /* This should be set to be at least the width of the largest image in the slideshow with padding */
    }

    #maincontainer .slideshow { width:640px; }

    div.controls {width:640px; overflow:hidden; padding-top:12px;}


    Edits to stylesheet standard.css
    #contentmain {margin:0 auto; width:940px; }

    #mainbox {margin-left:300px; width:640px; z-index:15; position:relative;}

    #footer {width:940px; margin:12px auto 0px auto; padding-bottom:5px; text-align:right; font-size:11px; color:#929292; z-index:10; position:relative;}

    #gallery {margin-top:5px; margin-bottom:-36px; overflow:hidden; width:644px; position:relative; left:-4px; background:url(../images/gallerybg.png) 0px 500px no-repeat;}

    -----------------------------------------------------------------------


    The main limitation will be running under the main navigation sidebar. To adjust the navigation farther left:
    Open:standard.css
    #navigation {background: url(../images/background.png) top left repeat-y; width:940px; margin-left:-470px; height:100%; position:absolute; top: 0px; left: 50%; z-index:9;}

    Edit: 940px wider and margin-left = -50% of your wider 940px. Like the current layout. This will adjust the left navigation farther left and your overall layout wider. Example: width:1000px, margin-left:-500px; leaving all the other styles as is.


    -----------------------------------------------------------------------

    Dealing with the WordPress TimThumb image resizer (It will continue to resize your images):
    You need to go into the theme folder includes > framework > extensions > template-tags.php

    Once you open the template-tags.php file just go Find (ctl+f or cmd+f) for any 465. This is the height and replace it with your new size and then your width as well if you choose so. There should only be 3 places you need to replace it in that file and that should be all you have to do.


    Increasing the number of thumbnails is located in the Javascript:
    includes > framework > extensions > extension.header.php
    // Initialize Advanced Galleriffic Gallery
    numThumbs: 7,
  • JiddleJiddle
    January 2012
    I made the adjustments of the files above but no dice yet. 4345farmdale.com is the site. It is not displaying correctly. any help would be greatly appreciated.

    thanks Mike
  • JiddleJiddle
    January 2012
    i guess i should note that the only adjustment I made was to the gallery width, no height adjustment. The increase was +94px
  • mikemike
    January 2012
    I would keep going over the directions, looks like you missed a step.

    Note: We cannot provide free development for customizations. If you want a quote on pricing to make customizations, feel free to send me an e-mail.
  • JiddleJiddle
    January 2012
    thanks for responding so quickly Mike. I'll go over the directions again, and Ill contact you if I need further help.
  • JiddleJiddle
    January 2012
    Mike i got it to work thanks for all your help.

  • JiddleJiddle
    January 2012
    Hey mike, I got the size adjustment to work properly on a computer display. However on iphone and ipad, the grey background in the middle does not display correctly, it is not wide enough. The URL is 4345farmdale.com

    any help would be appreciated.

  • mikemike
    January 2012
    I think it's a min-width issue but I can't help with trouble-shooting customizations.
  • JiddleJiddle
    January 2012
    thanks i'll look in that direction

  • MartijnMartijn
    May 2013
    Mike,
    Does the above instructions also apply for version 3 of Galleria?
    I adjusted everything but now it cuts the image on the right hand side. On that side (right) it also does not show the white image border anymore. The rest looks great and as I want it. Is there anything else I have to adjust?

    I couldn't execute the following steps because I was not able to find the files:

    "Dealing with the WordPress TimThumb image resizer (It will continue to resize your images):
    You need to go into the theme folder includes > framework > extensions > template-tags.php

    Once you open the template-tags.php file just go Find (ctl+f or cmd+f) for any 465. This is the height and replace it with your new size and then your width as well if you choose so. There should only be 3 places you need to replace it in that file and that should be all you have to do.

    Increasing the number of thumbnails is located in the Javascript:
    includes > framework > extensions > extension.header.php
    // Initialize Advanced Galleriffic Gallery
    numThumbs: 7,"

    Thank you very much in advance.
  • mikemike
    May 2013
    You do not deal with the timtumb resizer. We pulled that from the Galleries. Instead you adjust the image size in the functions.php file at the top.
    http://codex.wordpress.org/Function_Reference/add_image_size

    All of the other directions remain the same.
  • MartijnMartijn
    May 2013
    I already changed that to 700x467, but it doesn't resolve my problem that the right side of the images are cut off. I would appreciate it if you could have a look at the website and send me some guidelines how I can resolve that issue. Many thanks Mike!
  • mikemike
    May 2013
    As mentioned above we only provided the directions. Customizations must be made by the buyer. You can always hire a developer for a few hours if you need help with customizations.
  • MartijnMartijn
    May 2013
    I cannot find the following file to change the number of thumbnails: includes > framework > extensions > extension.header.php
    I hope you can tell me where I can find this file.
    Many thanks.
  • mikemike
    May 2013
    See footer.php.
  • MartijnMartijn
    May 2013
    Great, found it! Thanks Mike.