WordPress.org

Forums

WordPress Related Posts
[resolved] Custom Thumb Size and Centerness (13 posts)

  1. BitSin
    Member
    Posted 8 months ago #

    Thanks for your amazing plugin, once again.

    I'm trying to customize the plugin for a friend. But before that, I'm running it on a test website to make sure everything is OK!

    I checked the "Custom Thumb Size" box, but seems it has no affect for me! [SCR]

    P.S. I checked for "related_post wp_rp" and seems it has enough space for bigger thumbs.

    Thanks a bunch in advance :)

    https://wordpress.org/plugins/wordpress-23-related-posts-plugin/

  2. PetraP
    Member
    Plugin Author

    Posted 8 months ago #

    Hey,

    thanks for reaching out - I'll gladly help!
    I think if you add this into you custom CSS code, it should work:

    .related_post_title {
    }
    ul.related_post {
    }
    ul.related_post li {
    width:150px !important;
    }
    ul.related_post li a {
    }
    ul.related_post li img {
    height:150px !important;
    width:150px !important;
    }

    Check the screenshot for easier navigation.

    Let me know how it goes,
    Petra

  3. PetraP
    Member
    Plugin Author

    Posted 8 months ago #

    Hey,

    I have checked out your blog and noticed you are using thumbnails in 205x130(px) size, so the code is a bit different - width: 205px !important and height:130px !important:

    .related_post_title {
    }
    ul.related_post {
    }
    ul.related_post li {
    width:205px !important;
    }
    ul.related_post li a {
    }
    ul.related_post li img {
    height:130px !important;
    width:205px !important;
    }

    Sorry for not noticing this earlier and I hope this helps :)

  4. BitSin
    Member
    Posted 8 months ago #

    Hey Petra,

    Thanks for the reply. Seems the ul.related_post li { width:205px !important; } part did the job. (I already had the "li img" sizes in custom CSS but no change.

    Now, I two another problems came up.

    1) It started showing random "Unknown" thumbs. [SCR]

    2) In desktop, it fits 3 in each row just perfect, but in smaller devices, it has big white spaces. [SCR]

    Also, is it possible to have two different number of related posts on Desktop and Mobile devices? For example, 6 (three in each row) for PC, and 4 (one in each row with full-width) on Mobile?

    I really appreciate your time and help. :)

  5. PetraP
    Member
    Plugin Author

    Posted 8 months ago #

    Hey,

    thanks for getting back to me!

    1.) can you give me a direct link to this post, I have clicked around but couldn't find those generic thumbnails anywhere?

    2.) sure, we can adjust this - for example, you can add this to your previous custom CSS code (just put it at the bottom):

    @media screen and (max-width: 480px){
     .wp_rp_content {
    padding-left: 15px !important;
    }
    ul.related_post li {
    margin-left:40px !important;
    }
    }

    Save, refresh and you are good to go (hopefully) :)

    And about having different number of related posts (desktop, mobile device) - unfortunately this is not possible (sorry).

    Please let me know how it turned up, take care and have a lovely day,
    Petra

  6. BitSin
    Member
    Posted 8 months ago #

    Hey Petra,

    Thanks for the reply, once again.

    1) The random invalid thumb problem solved by itself somehow!

    2) The margin is too long [SCR], I tried modifying it, but all I got at the end was the everything in center. Is it possible to make it like using 90% of available width in Mobile device? (To cover the white space)

    Thank you so much for your time and effort.

  7. PetraP
    Member
    Plugin Author

    Posted 7 months ago #

    Hey,

    try replacing the previous code with this one:

    @media screen and (max-width: 480px){
     .wp_rp_content {
    width:100% !important;
    padding-left:15px !important;
    }
    ul.related_post li {
    width:95% !important;
    height:95% !important;
    }
    ul.related_post li a {
    width: 95% !important;
    height: 100% !important;
    }
    ul.related_post li img {
    height:auto !important;
    width:90% !important;
    }
    }

    Everything put together should look something like this:

    .related_post_title {
    }
    ul.related_post {
    }
    ul.related_post li {
    width:230px !important;
    }
    ul.related_post li a {
    }
    ul.related_post li img {
    height:130px !important;
    width:230px !important;
    }
    
    @media screen and (max-width: 480px){
     .wp_rp_content {
    width:100% !important;
    padding-left:15px !important;
    }
    ul.related_post li {
    width:95% !important;
    height:95% !important;
    }
    ul.related_post li a {
    width: 95% !important;
    height: 100% !important;
    }
    ul.related_post li img {
    height:auto !important;
    width:90% !important;
    }
    }

    Keeping my fingers crossed :)

    All the best,
    Petra

  8. BitSin
    Member
    Posted 7 months ago #

    Hey Petra,

    Still the same. [SCR]. All I need is to fulfill the white space around with thumb and title in Mobile Devices.

    Maybe we need to use bigger thumbs? But in that case how can we fit 3 in each row on bigger devices?

  9. PetraP
    Member
    Plugin Author

    Posted 7 months ago #

    Hey,

    sorry for not replying sooner! Just to be sure that the code is actually working - would you be so kind and change width:90% !important to 100%:

    @media screen and (max-width: 480px){
     ...code..
    ul.related_post li img {
    height:auto !important;
    width:100% !important;
    }
    }

    Are thumbnails any bigger when seen on mobile device? They should be :)
    If they will not change at all, please make a screenshot of your plugin settings, especially of the CSS code, so that I can have a closer look.

    Take care and have a nice day,
    Petra

  10. BitSin
    Member
    Posted 5 months ago #

    Hey Petra,

    Sorry for very very late reply. I was on a business trip.
    I changed the code from 90% to 100%, but nothing has been changed. [Screenshot]

    Here are plugins settings: [Page 1] - [Page 2] - [Page 3]

    I really appreciate your help. :)

  11. PetraP
    Member
    Plugin Author

    Posted 5 months ago #

    Hey,

    welcome back :)
    Would it be possible to make me a guest account on your blog, so that I take a closer look at this? You can send those credentials to support[at]zemanta[dot]com.

    Let me know what you think, take care and have a lovely day,
    Petra

  12. BitSin
    Member
    Posted 5 months ago #

    Hey,

    Sure. Just sent you an Email.

    Thank you.

  13. PetraP
    Member
    Plugin Author

    Posted 4 months ago #

    Hey,

    hope you don't mind but I am going to mark this topic as resolved as we fixed things via email.

    All the best,
    Petra

Reply

You must log in to post.

About this Plugin

About this Topic