Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #19654

    I’ve found some posts about this over a year old and am wondering if I am missing something obvious.

    Is there a way center the thumbnail so that more of the image is shown prior to them mousing over it to see the full image?

    Right now, it shows everything starting from the left side so there is not a lot of image showing in thumbnail.

    kwicks accordion js does it so I’m sure it can be done, I just can’t figure out how.



    I wrote a lengthy answer below, but after re-reading your post a number of times i am no longer certain what it is that you are asking. Please look at the demo site , and run your mouse over the images in the accordion (i am guessing by your last sentence that is what you were talking about? though i am not sure where thumbnail comes into play).

    Plan A) *the easy way* Using FTP , find the image in the folder on your server that you do not like, and replace it with an image that you like which you already cropped, resized yourself using photoshop., replacing the old with the new.

    Warning: Algebra, Formulas Ahead

    Plan B)

    Always upload images bigger than the size you want those images to shrink down to. So if you are uploading images whose thumbnails you want to be 700 x 320 , then both the width of the image you upload must be bigger then 720 and the height of the image you upload must be bigger then 320. *BUT* the aspect ratio of the image you upload *must* also be identical to the aspect ratio you want your thumbnail to be. This would require for you to use photoshop or a similar program to make sure that you resize or crop if necessary the image.

    You can use the standard proportion formula to plug in the number and solve for x (or use a calculator online ). You need the height and width of your ideal size (what you want the image you upload to become). And you need either the height or the width of your current image you will be uploading. After you enter those 3 numbers into the formula, and solve, it will give you the size of the width or height your current image needs to get cropped to in order to be proportional to the perfecrt/ideal image and not get cropped by WordPress.

    The Math: Proportions

    (get the pocket protector out and put on the bifocals)

    You will first need to figure out how to crop /resize your image in order to make it proportional to your perfect sized image prior to upload (remember it must be bigger) , so you will need to pick either height or width (up to you) that will be cropped.

    perfect height / perfect width = current height of image i will upload (no crop) / X (what my width should be cropped to)


    perfect height / perfect width = X (what my height should be cropped to) / current width of image i will upload (no crop)

    Example Exercise 1: Algebra use in Real World

    Your image before upload is 490×200 and you want the thumbnail (ideal size) to be 100×50. You dont want to crop the 200 (height) but are ok to crop some of the 490 (width) and are not sure how much needs to be removed so your image becomes proportional:

    (100/50) = (x/200) is (100*200)/50 = 400 ;;; an image 100×50 is proportional to an image 400×200 so if your image is 490×200, you must remove 90 pixels from the height, or wordpress will do it for you. (Of course since you are removing the height yourself you can remove 20 from the top and 70 from the bottom or whichever way makes the most sense).

    If x is identical to the size of your image that you left out after you solved, then your image is already proportional to the ideal size and you should do nothing but upload it..

    Class dismissed, and don’t forget to read pages 34 to 190 for a surprise quiz tomorrow.




    Not the approach I’m looking for.

    I want them centered like this does :

    In fact, when I bought this theme I thought I was getting that one. My fault for not paying attention. Won’t happen again.

    I’m stripping out this themes accordion and am going to add that themes which uses kwicks.

    Not the ideal approach since the theme won’t center thumbnails and I can’t get a refund, I really have no choice.



    Hi azimpact,

    You can check the demo site:

    As you can see in the demo site, if the mouse is not hovered on the accordion thumbnails, by default those thumbnails/images are centered. Can you post a link to your site? so we can check it further.




    The thumbnails are not centered on the demo site. Look at the balloon. All the thumbnails align to the left.

    No worries, I stripped out the featured function and used the same effect as the link I posted that does center the thumbnails.



    Ok, I marked this thread as resolved.

    Best regards,


Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Centering Accordion Thumbnail’ is closed to new replies.