WordPress.org

Ready to get started?Download WordPress

Forums

RPS Image Gallery
[resolved] blurry thumbs (19 posts)

  1. hillaryharris1635
    Member
    Posted 1 year ago #

    I just downloaded your plugin and it looks great for what I need except that the thumbs are really low res... but the enlarged image is crystal clear. Any suggestions?

    Thank you! Hillary

    http://wordpress.org/extend/plugins/rps-image-gallery/

  2. redpixelstudios
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks for trying RPS Image Gallery. You have a few options that should take care of the blurry thumbnail images. The first one to try is to increase the pixel dimensions of the thumbnail size in Media Settings. By default, the thumbnail size is set to 150 x 150 pixels.

    After doing so, you will need to regenerate thumbnails for the images that have already been uploaded and are associated with the gallery. You can use the nifty plugin Regenerate Thumbnails for this purpose.

    It may also be possible to increase the number of columns that your gallery is displaying thus reducing the display size of the thumbnail images and preventing them from being stretched.

    Let us know if you require further assistance.

  3. ernymiles
    Member
    Posted 1 year ago #

    Isn't there a way to avoid stretching the images at all and just display them at their correct resolution with appropriate padding, like the default WP gallery? It always looks horrible to scale images on web pages and this should be avoided. Thanks

  4. redpixelstudios
    Member
    Plugin Author

    Posted 1 year ago #

    The option to set the images to a fixed width does not exist in the current version of RPS Image Gallery but we have added it to the list of feature requests.

    The default gallery output is designed to fill its container. Technically, there is nothing wrong with scaling images as long as there is enough resolution (information) to support the transformation. That being said, some browsers do render scaled images better than others so some degradation of image quality could still be present even if there is enough resolution. However modern browsers do not exhibit this behavior.

    For the time being, you can set the container to a fixed width, increase the size of your thumbnail images, increase the number of columns in the grid view, or override the CSS to force the images to a specific width.

    We hope that you find this information useful. Let us know if you require an additional details.

  5. ernymiles
    Member
    Posted 1 year ago #

    Thanks, that is useful. Regarding filling the container width, it appears there is a margin to the left and right of the grid - i.e. the grid does not stretch all the way to completely fill the container. Is there a way to achieve this by overriding the CSS?

    Thank you

  6. redpixelstudios
    Member
    Plugin Author

    Posted 1 year ago #

    Glad we could help regarding the image quality. The issue of margins is a bit trickier but we have just made some changes to RPS Image Gallery (version 1.2.8) that will make the overrides possible.

    There are now classes assigned to the list items that specify whether that item begins or ends a gallery row. You can use these to change the display of these specific instances. Here is an example of the styles that can be used to override the default margins:

    .rps-image-gallery .gallery-icon.gallery-icon-begin-row img,
    .rps-image-gallery .gallery-icon.gallery-icon-begin-row .wp-heading-text.gallery-heading,
    .rps-image-gallery .gallery-icon.gallery-icon-begin-row .wp-caption-text.gallery-caption {
    	margin-left: 0 !important;
    	margin-right: 10% !important;
    }
    
    .rps-image-gallery .gallery-icon.gallery-icon-end-row img,
    .rps-image-gallery .gallery-icon.gallery-icon-end-row .wp-heading-text.gallery-heading,
    .rps-image-gallery .gallery-icon.gallery-icon-end-row .wp-caption-text.gallery-caption {
    	margin-left: 10% !important;
    	margin-right: 0 !important;
    }

    Keep in mind that you should use 1, 2, 4, or 5 columns since those values will result in a gallery that fills the entire container, left to right. If the container is divided by any of the other column values in the approved range (1 through 9), the result is not an integer.

    Please let us know if you have additional questions.

  7. redpixelstudios
    Member
    Plugin Author

    Posted 1 year ago #

    Back to your original question about preventing image stretching, you can achieve this by overriding the RPS Image Gallery styles. Try the following styles to prevent the images from stretching and mimic the default WordPress Gallery behavior:

    .rps-image-gallery a {
         text-align: center;
    }
    .rps-image-gallery .gallery-icon img {
         width: auto !important;
         margin: 5% 0 !important;
         display: -moz-inline-stack;
         display: inline-block;
         zoom: 1;
         *display: inline;
    }

    Hope this helps.

  8. ernymiles
    Member
    Posted 1 year ago #

    It would be great if you found a way to fill the width of the container with an arbitrary number of columns. Surely you can use floating point numbers for the width percentages?

  9. redpixelstudios
    Member
    Plugin Author

    Posted 1 year ago #

    It seems that the result would be similar whether using percentages or floating point numbers considering that the container width is an unknown and the browser rounds pixel measurements to an integer. Please feel free to share if you have information or an example that would help illustrate your point.

  10. ernymiles
    Member
    Posted 1 year ago #

    Sure, it wouldn't be absolutely exact either way. Due to the discreetness of pixels you will not have exact partitioning, (but with today's pixel densities, who will tell?). However, your current implementation creates very large margins unless 1, 2, 4, or 5 columns are selected... we're talking about pixels here, but the margins are unnecessarily large (in the order of dozens of pixels) at the moment.

  11. redpixelstudios
    Member
    Plugin Author

    Posted 1 year ago #

    You can certainly override the CSS that specifies the margins. The default margins are set to 5% of the container width, so setting them to a lower value should allow you achieve the desired effect.

  12. ernymiles
    Member
    Posted 1 year ago #

    The margins are due not to any margin CSS setting, but to the fact that you don't set the % widths of the li items properly. For example, if you have 8 images per row, you set the li width to 12% instead of 12.5%. I find your insistence on sticking to integers extremely odd.

    .rps-image-gallery.gallery-columns-8 li {
    width: 12.5%;
    }

    Looks fine!

  13. rosedai
    Member
    Posted 1 year ago #

    I too am trying the same thing. When I add a URL to another website for the user to be able to download the publication I get a blank white screen. http://www.ewholesalecaps.com/

  14. redpixelstudios
    Member
    Plugin Author

    Posted 1 year ago #

    ernymiles,

    Just to clarify, the margins are being set using CSS attributes. Without styles, the gallery displays as an unordered list rather than a series of inline-block elements. It appears that you were successful in overriding the width of the list items in your 8 column layout.

    Based on our review the widths of the list items are specified properly, according to CSS specifications, though we have rounded the values to the next lowest whole number. It seems that no matter what precision value we use in rounding, there could be sizing issues because of three factors:

    1. the container width of the gallery is an unknown
    2. browsers handle rounding differently
    3. CSS does not specify a certain precision for floating point numbers

    To help explain, let's take the example that you provided of the 8 column layout. You are correct that the width of each column would be 12.5%.

    100% / 8 columns = 12.5% per column

    Now let's assume that the container width is 630 pixels. Each of the columns will be 78.75 pixels wide.

    630 pixels * .125 = 78.75 pixels

    Since browsers cannot render 75 hundredths of a pixel, they will round up or down, depending on their programmed behavior. In the case of rounding up, the width of the columns would exceed the container by 2 pixels.

    79 pixels * 8 columns = 632 pixels

    In the case of rounding down, you would come up short of the container width by 6 pixels.

    78 pixels * 8 columns = 624 pixels

    You could easily address this by adjusting the width of your container so that the column width calculation would result in an integer. Though that might affect your overall page layout.

    As you can see, there is no easy answer to this issue, and no right or wrong, just a series of hardware and software constraints that we must understand to address display issues on a case by case basis. In our opinion, overriding the included CSS (which we consider a starting point) still remains to be your best bet. That being said, adjusting the CSS that is bundled with RPS Image Gallery so that floating point percentages are used is being discussed and considered. If implemented, the list item widths (and resulting row widths) would be:

    9 columns = 11.11%  (99.99%)
    8 columns = 12.5% (100%)
    7 columns = 14.285% (99.99%)
    6 columns = 16.666% (99.99%)
    5 columns = 20% (100%)
    4 columns = 25% (100%)
    3 columns = 33.33% (99.99%)
    2 columns = 50% (100%)
    1 column = 100% (100%)

    We hope and believe that this explanation and proposed modification should bring this thread to a close. Should you require additional information, please consider reviewing the following:

  15. redpixelstudios
    Member
    Plugin Author

    Posted 1 year ago #

    rosedai,

    Please consider opening a new thread with your request since it doesn't seem to fit within this discuss. Also provide a link to a specific example of the issue along with details regarding how to replicate the problem. Thanks in advance.

  16. ymel
    Member
    Posted 1 year ago #

    Dear Redpix,

    Thank you for your plugin. How can I have thumbnails which all keep the pictures's original dimensions? In this case my thumbnails would have different dimensions (and may look ugly next to each other) but I do not mind.
    Best Regards,
    y

  17. redpixelstudios
    Member
    Plugin Author

    Posted 1 year ago #

    RPS Image Gallery uses the image thumbnail in the gallery grid view by default. You could modify the media settings so that your thumbnail images are not cropped to exact dimensions or you could choose an alternate image size for the gallery grid view.

    The first option would require you to go into Media Settings and uncheck the box labeled "Crop thumbnail to exact dimensions". Keep in mind that any other areas where the thumbnail images are used will be affected by this change. To make the update retroactive, you will need to use a plugin like Regenerate Thumbnails.

    The second option would involve adding a shortcode attribute. For example, if you wanted to use the medium size image for the gallery grid view, you would use the following:

    [gallery size="medium"]

    Keep in mind that you can add image sizes to your WordPress configuration if it is not convenient to use one of the predefined sizes.

    We hope that you find this information useful. Thank you for using RPS Image Gallery.

  18. ymel
    Member
    Posted 1 year ago #

    Dear RedPixel,

    thank you for your suggestions, I will try it and report how it works.
    The Best,
    y

  19. mikeshawtoday
    Member
    Posted 1 year ago #

    Wow. the second post from the top did it for me. I went to Settings, Media, and changed the thumbnail size from 150 to 500. then I regenerated the thumbnails. Perfect. I'm not using anything fancy- not RedPixel. I just set up a simple gallery at http://www.mikeshawtoday.com/gallery/ using the WordPress defaults. Thanks for the great tip, RedPixel Studios.
    Mike Shaw

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic