WordPress.org

Ready to get started?Download WordPress

Forums

Contextual Related Posts
[resolved] Cannot style it in a nice view (21 posts)

  1. utnalove
    Member
    Posted 2 years ago #

    Hello, I am trying to get the following styling: http://kevin.deldycke.com/2012/04/beautify-contextual-related-posts-wordpress-plugin/

    However it is appearing like this: http://glamourina.pl/merida-waleczna-z-bloga

    As you can see the div is too long. It should be very small to have the 3 squared boxes in the same line.

    I put the CSS code suggest in the "custom styles" tab. The settings are the same as suggested in the screenshot.

    What is wrong there?

    http://wordpress.org/extend/plugins/contextual-related-posts/

  2. Ajay
    Member
    Plugin Author

    Posted 2 years ago #

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

    Next, in the CSS, try this change

    #crp_related a {
      height: 150px;
    }
  3. utnalove
    Member
    Posted 2 years ago #

    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

  4. Ajay
    Member
    Plugin Author

    Posted 2 years ago #

    I still see the excerpt in the link above.

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

  5. utnalove
    Member
    Posted 2 years ago #

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

  6. utnalove
    Member
    Posted 2 years ago #

    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

  7. Ajay
    Member
    Plugin Author

    Posted 2 years ago #

    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

  8. utnalove
    Member
    Posted 2 years ago #

    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

  9. utnalove
    Member
    Posted 2 years ago #

    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 :(

  10. Ajay
    Member
    Plugin Author

    Posted 2 years ago #

    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?

  11. utnalove
    Member
    Posted 2 years ago #

    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 145x145.
    I can't use 150x150, 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.

  12. Ajay
    Member
    Plugin Author

    Posted 2 years ago #

    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 145x145 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.

  13. utnalove
    Member
    Posted 2 years ago #

    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?

  14. Ajay
    Member
    Plugin Author

    Posted 2 years ago #

    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

  15. utnalove
    Member
    Posted 2 years ago #

    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 150x150 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

  16. utnalove
    Member
    Posted 2 years ago #

    The plugin is now showing these thumbnails:

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

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

    Just try to change

    150x100.jpg
    to
    150x150.jpg

    or

    100x150

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

  17. Ajay
    Member
    Plugin Author

    Posted 2 years ago #

    Unfortunately, I don't think this is possible. You need to set the featured thumbnail to that size.

    get_the_post_thumbnail seems to only return the thumbnail size

  18. utnalove
    Member
    Posted 2 years ago #

    Hmm my theme is using

    the_post_thumbnail

    without the "get".

    If I crop the images 150x150, in the homepage, the images will become squared :(

    I hope in the newer version it will be possible to choose from the settings the images we would like to use, for example those ending with 150x150 already existing. Or by function name and properties.

    In my theme in order to get the images 150x150 there is the following function:

    the_post_thumbnail('gorillathumb',array('alt' => get_the_title(),'class' => 'photo'))

    .

    The size is defined here:

    add_image_size( $name = 'gorillathumb', $width = 150, $height = 150, $crop = true );

    In any case, thanks for your help.

  19. Ajay
    Member
    Plugin Author

    Posted 2 years ago #

    "gorillathumb" is a custom image size that is added by your theme and isn't a standard.

    The standard size is thumbnail which is what the plugin returns.

    Have you put 150 as the width and height of the thumbnail in the plugin settings page? It might return this size with this setting?

  20. utnalove
    Member
    Posted 2 years ago #

    Yes, I have tried, but it still picks up the little images. No worries, I spent many hours yesterday correcting the CSS, not it looks fine even if the images are not squared.
    Now I just have to find out a solution to make it work also on IE7 and IE8.

    Thanks for your help so far.

  21. Ajay
    Member
    Plugin Author

    Posted 2 years ago #

    Your welcome... IE7 and IE8 might be a bit of a task!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic