Support » Plugin: Contextual Related Posts » [Plugin: Contextual Related Posts] Cannot style it in a nice view

Viewing 15 replies - 1 through 15 (of 20 total)
  • Plugin Author Ajay

    (@ajay)

    First, remove the Excerpt, by changing the Settings in the page.

    Next, in the CSS, try this change

    #crp_related a {
      height: 150px;
    }

    Hi Ajay, I removed the excerpts. However the height: 150px; was already there.

    This was/is the css I am using: http://pastebin.com/dFYcNK4L

    Plugin Author Ajay

    (@ajay)

    I still see the excerpt in the link above.

    Can you try editting the above css tag with the code above?

    maybe the cache was disturbing. i Cleaned the cache right now. Can you please refresh the page? Do you see the excerpt went away?

    I got it. I had to replace

    #crp_related a {
      width: 150px;
      height: 150px;
    }

    with

    #crp_related a {
      height: 150px;
    }

    Now it’s working more or less ok.
    I had to make the images smaller:
    Maximum width of the thumbnail:145px
    Maximum height of the thumbnail:empty

    Because sometimes I have also vertical thumbnail images.

    Thanks much for your help

    Plugin Author Ajay

    (@ajay)

    I can still see the width attribute set for #crp_related a {

    Please delete that and try?

    You should also try to scale down all the image sizes, i.e. from 150 to 100 and 144 to 92 to fit it in one line

    I just replied few seconds ago. It looks it is ok now. Does it look well also in your browser?

    Do you have some additional suggestions regarding the CSS or settings?
    The current CSS is: http://pastebin.com/kNDHQPMi

    Hmm, to be sincere I found something here:
    http://img401.imageshack.us/img401/8650/screenesi.png

    The grey area is too short for landscape images and too big for vertical images 🙁

    Plugin Author Ajay

    (@ajay)

    It looks clean in my browser, but I notice that there is a problem with the thumbnail settings. Do you have them set as a different height and width?

    I am using:
    Maximum width of the thumbnail: 145
    Maximum height of the thumbnail:0

    Now (1 minute ago) I changed it to:
    Maximum width of the thumbnail: 145
    Maximum height of the thumbnail:145

    So now if you check it’s 145×145.
    I can’t use 150×150, because the images get too big and the third image goes to the next line.

    But the view didn’t change. You can see also here: http://img401.imageshack.us/img401/8650/screenesi.png

    You see that the grey background of the titles is too short in the right, and it is too big for the vertical image you can see in this post.

    Plugin Author Ajay

    (@ajay)

    I checked the post above. few changes you can do to tweak.

    Add width: 155px; to #crp_related li

    Increase width of #crp_related .crp_title { to 149px

    BTW, if you’re using Firefox, you can rightclick and hit inspect element and play around with styles etc.

    You’ll still need to use the 145×145 thumbnails. However, note that WordPress won’t automatically resize old thumbnail. You’ll need to use a plugin like http://wordpress.org/extend/plugins/auto-post-thumbnail/ to recreate old thumbnails.

    Backup if you make changes.

    Wow it looks great now! I was trying to play with firebug, but it looks like I wasn’t changing the right things the right way ^_^

    I would avoid to use timthumb or similar. Already my theme generates several image of different sizes for every image uploaded. And I am too afraid to change something. I prefer to leave it this way.

    I think that with the changes you suggested also the vertical images look well in a squared box.

    Take please a look here: http://img16.imageshack.us/img16/5990/centervo.png

    It is fine, but I think that if the image instead of showing in the left could be in the middle it would be much better.
    The code is:`#crp_related img {
    max-width: 150px;
    margin: auto;
    }`

    But it’s still in the left. I tried to replace

    margin: auto;

    with margin-left:auto; margin-right:auto; but it;s the same.

    Do you know why this stile is not applying?

    Plugin Author Ajay

    (@ajay)

    Am not really sure on that. Not much of an expert on CSS. I just play around and see how it fits best.

    I strongly suggest using the square thumbnail option

    Thanks much. You helped a lot :)) I’ll try to ask around in some forum.

    This plugin and your support deserved 5 stars 🙂

    ===========
    BTW – how to get the squared thumbnails?
    I want to avoid issues with other parts of the theme. My theme already creates 150×150 images. You can see in the homepage in the left sidebar. Isn’t it possible to have CRP use those squared thumbnails?

    The code of the sidebar is: http://pastebin.com/KgWPEthj

    The plugin is now showing these thumbnails:

    For landscape images:
    http://glamourina.pl/wp-content/uploads/2012/06/top-secret005-150×100.jpg

    For vertical images:
    http://glamourina.pl/wp-content/uploads/2012/08/kosmiczne-printy08-100×150.jpg

    Just try to change

    150×100.jpg

    to

    150×150.jpg

    or

    100×150

    to

    150×150

    . You will see that squared images already exist in the blog. But how can I “tell” the plugin to use only the 150×150?

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Plugin: Contextual Related Posts] Cannot style it in a nice view’ is closed to new replies.