• Registered: 2012-02-26
  • Posts: 9

Topic: Thumbnails Showing Cropped Version of Image

Hello!

I'm running Wordpress version 3.3.1.
I'm running Pro version of WP-Simpleviewer version 2.3.0.

I will supply all the details of the gallery settings below, if it helps with solving the problem.

My images display perfectly, and the thumbnails display perfectly, but if I make ANY adjustments to the images in the gallery (which is done via the PAGE's UPLOAD/INSERT image facility) then the thumbnail images cease to display the full size image, and just a cropped version of them.

For example, please look at this image: http://grab.by/cUzq
Main image shows most of the woman's head. When you see the thumbnail in bottom right corner, it only displays as far as the lips.

To reset the problem, each time I work on the images via the PAGE (whether uploading, deleting, or even changing image order), after saving, I must go to SIMPLEVIEWER GALLERY > EDIT GALLERIES and go into each gallery, and click SAVE (without making any changes on the gallery.)

Without even having to clear the cache, a refresh of the page will display the images correctly. Example here: http://grab.by/cUzs  As you can see the woman's picture in bottom right corner, now displays the actual main image, but in a reduced format.

Any suggestions about how to stop this bug happening? I assume I shouldn't HAVE to go an re-save the main gallery settings each time?

Thanks!

As promised, here are the gallery settings:
image source: Wordpress Library
Gallery Style: Modern
Thumb Position: bottom
Frame Width, px: 0
Max image width, px : 860
Max image height, px : 700
text color: fafafa
frame color : fafafa
open button : not ticked
full screen button: not ticked
thumbnail rows: 1
thumbnail columns : 12
gallery width: 960px
gallery height: 730px
background color: Nothing written in
background transparent: Box ticked
Use flash: Box ticked
pro options:

useColorCorrection="TRUE"
stageBorder="0"
stageHPadding="0"
stageVPadding="10"
stageVAlign="TOP"
stageHAlign="CENTER"
lockTopStack="TRUE"
lockBottomStack="TRUE"
enableKeyboardControls="FALSE"
enableMouseWheel="FALSE"
enableAPI="FALSE"
firstImageIndex="0"
randomizeImages="FALSE"
enableLooping="TRUE"
dropShadowStrength="0"
imageClickMode="NAVIGATE"
imageScaleMode="SCALE"
imagePreloading="PAGE"
imageSmoothing="TRUE"
imageFrameStyle="SQUARE"
imageCornerRadius="0"
imageDropShadow="FALSE"
imageTransitionType="CROSS_FADE"
imageTransitionTime=".8"
flashBrightness="1"
imageHAlign="RIGHT"
imageVAlign="TOP"
imageBackColor="#000000"
imageBackOpacity="0"
showOverlay="HOVER"
showImageNav="NEVER"
imageNavStyle="BIG"
imageNavScale="0.5"
imageNavColor="#333333"
imageNavBackColor="#ffffff"
imageNavBackOpacity="0"
imageNavPadding="0"
hideOverlayOnTransition="TRUE"
overlayFadeTime="0.3"
showBigPlayButton="FALSE"
thumbWidth="70"
thumbHeight="50"
thumbPadding="2"
thumbFrameColor="#fafafa"
thumbFrameHoverColor="#333333"
thumbFrameStyle="SQUARE"
thumbCornerRadius="0"
thumbFrameWidth="1"
thumbHoverFrameWidth="1"
showThumbVisited="FALSE"
showThumbLoadBar="TRUE"
thumbLoadBarHeight="10"
thumbClickShift="1"
thumbDropShadow="FALSE"
thumbHAlign="RIGHT"
thumbVAlign="BOTTOM"
thumbPreloading="PAGE"
thumbLoadBrightness="0.7"
doThumbPopOut="TRUE"
changeCaptionOnHover="FALSE"
changeImageOnHover="TRUE"
thumbNavStyle="CIRCLE"
thumbNavPosition="BOTTOM"
thumbNavColor="#222222"
thumbNavHoverColor="#e0e0e0"
thumbNavBackColor="#fafafa"
thumbNavBackOpacity="0.5"
thumbNavPadding="0"
thumbNavSlideTime="1"
buttonBarPosition="NONE"
showDownloadButton="FALSE"
showNavButtons="FALSE"
showAutoPlayButton="FALSE"
showAudioButton="FALSE"
showToolTips="FALSE"
buttonBarHAlign="RIGHT"
buttonBarVAlign="TOP"
buttonBarPadding="0"
buttonBarColor="#ffffff"
buttonBarHoverColor="#ffffff"
buttonBarBackColor="#fafafa"
buttonBarBackOpacity="0.5"
buttonBarScale="1"
floatButtonBar="FALSE"
titlePosition="NONE"
titleFontName="Trajan Pro, Trebuchet MS, serif"
titleFontColor="#fafafa"
titleFontSize="18"
titlePadding="0"
titleBackColor="#fafafa"
titleBackOpacity="0"
titleWidth="220"
titleHeight="5"
titleDropShadow="FALSE"
floatTitle="TRUE"
titleTextAlignment="LEFT"
captionPosition="BOTTOM"
captionFontName="Trajan Pro, Trebuchet MS, serif"
captionFontColor="#fafafa"
captionFontSize="14"
showImageNumber="FALSE"
imageNumberFontSize="12"
captionPadding="0"
captionTextAlignment="LEFT"
captionBackColor="#fafafa"
captionBackOpacity="1"
captionWidth="200"
captionHeight="200"
captionDropShadow="FALSE"
enableCaptionLinks="TRUE"
floatCaption="TRUE"
autoPlayOnLoad="FALSE"
displayTime="5"
showAutoPlayStatus="FALSE"
goNextOnAutoPlay="FALSE"
autoPlayThumbs="FALSE"
audioURL=""
loopAudio="FALSE"
playAudioOnLoad="FALSE"
audioVolume="0"
backgroundURL=""
backgroundScale="STRETCH"
watermarkURL=""
watermarkHAlign="RIGHT"
watermarkVAlign="BOTTOM"
watermarkPadding="0"
watermarkLinkURL=""
watermarkLinkTarget="_self"
flickrUserId=""
flickrSetId=""
flickrGroupId=""
flickrTagMode="ALL"
flickrSort="DATE-POSTED-DESC"
flickrImageSize="LARGE"
flickrImageCount="500"
flickrShowTitle="TRUE"
flickrShowDescription="TRUE"
flickrShowPageLink="FALSE"
flickrPageLinkText=""
flickrTitleFontName="Trajan Pro, Trebuchet MS, serif"
flickrTitleFontSize="22"
showBackButton="FALSE"
backButtonText=""
backButtonURL=""
backButtonFontColor="#FFFFFF"
backButtonFontSize="12"
backButtonFontName="Trajan Pro, Trebuchet MS, serif"
backButtonBackColor="#000000"
backButtonBackOpacity="0.5"
backButtonX="10"
backButtonY="10"
useFixedLayout="FALSE"
imageAreaX="280"
imageAreaY="60"
imageAreaWidth="500"
imageAreaHeight="500"
thumbAreaX="10"
thumbAreaY="140"
captionX="10"
captionY="520"
titleX="10"
titleY="100"
buttonBarX="700"
buttonBarY="10"
mobileShowNav="TRUE"
mobileShowThumbs="TRUE"
mobileShowCaption="TRUE"
languageCode="AUTO"
preloaderColor="#fafafa"

  • Registered: 2008-07-06
  • Posts: 6,334

Re: Thumbnails Showing Cropped Version of Image

After making any changes (such as adding a caption to an image or reordering images via the 'Add Media -> Gallery' tab), it is necessary to 'Update' the post in order for the XML file to be rewritten with the changes.
Even if editing a gallery via the 'SimpleViewer -> Edit Galleries' option, the user must 'Update' the corresponding post afterwards (via the 'Edit Post' option) in order for the gallery to be updated correctly. This is a known bug and should hopefully be fixed in the next version of WP-SimpleViewer.
I cannot replicate your exact problem. Making changes within the 'Add Media -> Gallery' tab and updating the post does not change the appearance of the thumbnails in my tests.
Editing a gallery via the 'SimpleViewer -> Edit Galleries' option does change the appearance of the thumbnails but this can be solved by subsequently updating the post as documented in Step #4 here.
It would be helpful to confirm that the bug you have encountered is related to the known bug above if you could post the URLs to two galleries; one with thumbnails which are OK and one with thumbnails which are cropped. Thank you.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-02-26
  • Posts: 9

Re: Thumbnails Showing Cropped Version of Image

As the website is live, I can only briefly leave it incorrect as the owner obviously doesn't want the cropped thumbnails on view.

Step by step, here is the problem:
1. Open PAGE.
2. Click UPLOAD/INSERT.
3. Didn't make any adjustment on the page, just went down the bottom and clicked SAVE ALL CHANGES.
5. Closed overlay screen with x in top right corner.
6. Clicked UPDATE on PAGE.
7. Now refresh the live page: http://www.briandaly.co.uk/briandaly/womens/
Please note, you don't have to even empty cache. The error happens itself.

Respond to this message after you have viewed the problem, and then I will go back in and do the following (which I know resolves it but which is a very long winded way to fix it).

Step by step, to resolve it:
1. Do NOT open Page, instead go to SIMPLEVIEWER in left navigation.
2. Click on EDIT GALLERIES.
3. Click on EDIT GALLERY against the corresponding 'womens' images gallery.
4. Do NOT change anything, just click SAVE.
5. Go to live page and refresh: http://www.briandaly.co.uk/briandaly/womens/
Please note, again, you do not have to empty the cache. The error gets resolved through the re-saving of the gallery base settings. I do NOT have to go back into the PAGE and save.

I won't do the second part until you've seen the problem occurring after I've done the first part!

  • Registered: 2008-07-06
  • Posts: 6,334

Re: Thumbnails Showing Cropped Version of Image

Respond to this message after you have viewed the problem, and then I will go back in and do the following (which I know resolves it but which is a very long winded way to fix it).

OK. I think I've seen what I need to. Please revert the gallery to the way you like it and I will take another look and report back with my findings.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-02-26
  • Posts: 9

Re: Thumbnails Showing Cropped Version of Image

As a side note, the 'mens' gallery is a good example of the images working fine where I changed the order of them, and then went into the Simpleviewer Gallery > Edit Gallery > Save Gallery, and refreshed the page. All the images are showing in the thumbnail at the correct dimensions:

http://www.briandaly.co.uk/briandaly/mens/

  • Registered: 2012-02-26
  • Posts: 9

Re: Thumbnails Showing Cropped Version of Image

Okay. women's gallery is now updated : http://www.briandaly.co.uk/briandaly/womens/
and as you can see the thumbnails are now the full size of the image.

  • Registered: 2008-07-06
  • Posts: 6,334

Re: Thumbnails Showing Cropped Version of Image

Your problem is related to the known bug but it would appear that you prefer the buggy version.
WP-SimpleViewer uses the 150px x 150px thumbnails created by WordPress and it is those that appear cropped in your gallery as you have chosen to use rectangular thumbnails.
The known bug deletes the thumbURL values from the XML file (until the post is updated) and forces SimpleViewer to use the imageURL values (the main images themselves) as the thumbnails which happens to work well in your case as you have set your thumbnails to have the same aspect ratio as your main images.
You would need to edit one of the 'wp-simpleviewer' files in order to always use the main images as thumbnails.
Open the file 'wp-simpleviewer/buildgallery.php' in a plain text editor and change the line 1014 from:

$imageObjects[] = new Image($imageUrl, $thumbUrl, $this->imageDirPathRelGallery, $caption, $linkUrl, $linkTarget);

... to:

$imageObjects[] = new Image($imageUrl, $imageUrl, $this->imageDirPathRelGallery, $caption, $linkUrl, $linkTarget);

This should force SimpleViewer to use the URL for the main image for both the imageURLs and the thumbURLs.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-02-26
  • Posts: 9

Re: Thumbnails Showing Cropped Version of Image

Resolved! Perfect!

Thank you very much for your assistance. This definitely fixes the problem perfectly.

Best regards,
Eileen G