WordPress.org

Support

Support » Plugins and Hacks » [Resolved] [Plugin: RPS Image Gallery] blurry thumbs

[Resolved] [Plugin: RPS Image Gallery] blurry thumbs

Viewing 15 replies - 1 through 15 (of 18 total)
  • Plugin Author redpixelstudios
    Participant

    @redpixelstudios

    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.

    ernymiles
    Member

    @ernymiles

    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

    Plugin Author redpixelstudios
    Participant

    @redpixelstudios

    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.

    ernymiles
    Member

    @ernymiles

    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

    Plugin Author redpixelstudios
    Participant

    @redpixelstudios

    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.

    Plugin Author redpixelstudios
    Participant

    @redpixelstudios

    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.

    ernymiles
    Member

    @ernymiles

    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?

    Plugin Author redpixelstudios
    Participant

    @redpixelstudios

    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.

    ernymiles
    Member

    @ernymiles

    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.

    Plugin Author redpixelstudios
    Participant

    @redpixelstudios

    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.

    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!

    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/

    Plugin Author redpixelstudios
    Participant

    @redpixelstudios

    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:

    Plugin Author redpixelstudios
    Participant

    @redpixelstudios

    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.

    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

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘[Resolved] [Plugin: RPS Image Gallery] blurry thumbs’ is closed to new replies.