thumbnail problem

ed's Avatar

ed

14 Jun, 2017 09:55 PM

url is https://highersourcewebsites.com/dbc/
i have set up the home page slider with thumbnail sizes 60 x 80
i have regenerated all thumbnails using regenerate thumbnail plugin to 60 x 80
and yet i am still seeing some of the thumbs being cut off at the top, where i would hope to see the entire image
resized down to the 60x80.
If you can, please let me know what i am doing wrong, and the steps to correct it.
ed

  1. Support Staff 1 Posted by Dmitry Semenov on 15 Jun, 2017 05:20 AM

    Dmitry Semenov's Avatar

    Hello,

    Not sure if I fully understand, you have an image, for example - https://highersourcewebsites.com/dbc/wp-content/uploads/2017/06/PAN... its dimensions are 458x961. If you reduce its width to 60px keeping the aspect ratio - the height would be 126px, but not 80px as you defined.

    If you want to modify where exactly the thumbnails get cropped check this reply -
    http://help.dimsemenov.com/discussions/royalslider-wordpress/44864-...

  2. 2 Posted by ed on 15 Jun, 2017 03:31 PM

    ed's Avatar

    Hi and thanks for your reply ( and quick too). I understand a bit more, and having now changed these settings:
    thmbnails, bullets, tabs so that Thumnail width is now 60 and Thumbnail height is now 80
    and also changed the image options so that thumb image width is now 0
    and thumb image height is also now 0
    i am getting ( more or less) the thumbnails to look better.

    the media settings ( general panel) is set so that thumbnail size is 60(width) and 80(height).
    just so i understand - setting the thumb image width and height to zero is causing the slider to use the defined thumbnail size in that media setting?
    ( and i do not have the crop thumbnail to exact dimensions ticked). do i want to have that ticked if i were to regenerate the thumbs?
    if you were to look at the home page now, the thumbs are much better, but there are a few that do not use the entire area of the 60x80 dimension - is there anything to be done about those?
    thanks for your help!
    ed

  3. Support Staff 3 Posted by Dmitry Semenov on 15 Jun, 2017 07:07 PM

    Dmitry Semenov's Avatar

    just so i understand - setting the thumb image width and height to zero is causing the slider to use the defined thumbnail size in that media setting?

    Yes, removing values will make slider use default WordPress "thumbnail" image size.

    if you were to look at the home page now, the thumbs are much better, but there are a few that do not use the entire area of the 60x80 dimension - is there anything to be done about those?

    You may use CSS background-image instead of IMG element for thumbnails, which will allow filling the area with the image. To do this click on Edit Slide Markup in general options and instead of {{thumbnail}} add:

    <div class="rsTmb">
      <div class="rsTmbBackground" style="background: url({{thumbnail_url}})"></div>
    </div>
    

    Then go to your theme style.css and add something like:

    .rsTmbBackground {
       background-size: cover;
       background-position: 50% 50%;
    }
    .rsTmb,
    .rsTmbBackground {
      width: 100%;
      height: 100%;
    }
    
  4. 4 Posted by ed on 15 Jun, 2017 10:14 PM

    ed's Avatar

    thanks for your recent explanations and suggestions.
    when i put in place css and had edited the slide markup i did see changes that would have been workable, except i was getting a sort of duplicate image side by side, or duplicate images up and down.
    (images that were good in height were seeing double left to right) and
    (images that were short in height were seeing double top and bottom).

     i tried making a few changes to background like no repeat but that seemed to have no effect, with or without !important. i tried changing the percentages to see what effect that had, and was not getting anywhere that way either.
    so right now i removed all the extra markup and will try any other suggestions you might have. thanks!

  5. Support Staff 5 Posted by Dmitry Semenov on 16 Jun, 2017 05:15 AM

    Dmitry Semenov's Avatar

    My bad, add also:

    background-repeat: no-repeat;
    

    after background-position: 50% 50%;, that's probabaly the issue.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac