WordPress.org

Ready to get started?Download WordPress

Forums

WordPress Popular Posts
[resolved] Thumbnails and text no longer align after update (22 posts)

  1. webtinkering
    Member
    Posted 9 months ago #

    Hi Hector,

    First of all, thank you for making an awesome plugin. I wanted to tell you about my recent experience after updating to version 2.3.5. I use the standard css that comes with your plugin, however, after upgrading the alignment of any text when thumbnails are activated. The text aligns to the base and there is no margin between the image and the text. It works fine however for posts that do not have a thumbnail and the default no_thumb.jpg is shown. There the alignment and margins are OK.

    I investigated this issue and found that the posts with a thumbnail set are missing out on a class. They are assigned the classes wpp_def_noPath and wpp_featured but not the standard class that is set in the standard wpp.css file wpp-thumbnail. It appears that this is not set on line 1389 of wordpress-popular-posts.php. I am not sure whether this is a bug or not. I added wpp-thumbnails here so the line looks like this: return "<img src=\"". $new_img ."\" alt=\"\" border=\"0\" width=\"{$dim[0]}\" height=\"{$dim[1]}\" class=\"wpp-thumbnail wpp_cached_thumb wpp_{$source}\" />";.

    I'd be happy to hear if I missed a nifty setting here and maybe there is another way to fix this.

    Kind regards,
    Kevin

    http://wordpress.org/extend/plugins/wordpress-popular-posts/

  2. shawna1
    Member
    Posted 9 months ago #

    Hi,

    I have the same issue. I would like to know if there is a setting to fix this issue as well for someone who isn't comfortable with php.

    Thank you!

    Shawna

  3. Héctor Cabrera
    Member
    Plugin Author

    Posted 9 months ago #

    Hi guys,

    Sorry for the late reply, I've been a bit busy with work projects lately (hence why the lack of updates recently). I've made a test version that addresses this problem, please give it a try and let me know the results. It would be a good idea to backup your database before using it, though.

  4. longnha
    Member
    Posted 9 months ago #

    @Héctor Cabrera:

    There have problem with styling but it did solve the problem mentioned above.

    I will use it then, thank you.

  5. shawna1
    Member
    Posted 9 months ago #

    Hi Hector,

    Thanks so much! The test version worked for me!

  6. amykant
    Member
    Posted 9 months ago #

    Hello! I have installed the new version linked to above, and now the thumbnails are aligning left with the text wrapping, but the thumbnails are not wrapping properly.

    http://sandbox.sharpologist.com/

    Thoughts?

    Thanks!!!

  7. amykant
    Member
    Posted 9 months ago #

    Nevermind, made a quick tweak and now it works! WAHOO!

  8. webtinkering
    Member
    Posted 9 months ago #

    @amykant & @shawna1. I am glad you managed to fix your problems. Now, since you came here to try and get a solution I think it would be fair if you were to contribute your solution on here so others can benefit from that, just like you benefited from the help on here. Right?

  9. amykant
    Member
    Posted 9 months ago #

    I believe I turned off the custom html in the widget and then it worked.

  10. shawna1
    Member
    Posted 9 months ago #

    @webtinkering I used the test version that Hector posted above and it worked fine. I didn't have to do anything else.

  11. ppahv
    Member
    Posted 8 months ago #

    The test version also works for me. Thanks a lot!

  12. Héctor Cabrera
    Member
    Plugin Author

    Posted 8 months ago #

    The test version has been released as official 2.3.6! Anyone who comes to this thread please upgrade to the latest WPP available.

  13. magnoct
    Member
    Posted 8 months ago #

    I also had to deactivate custom HTML otherwise the images started directly beneath the title and if the title (no excerpt) was short that meant that the thumbnail was pushed right and ended up to the right (but still beneath the title) of the post/thumbnail above.

    I would like to use custom html as I would like to add a <hr> tag to help divide the thumbnails up as at the moment without custom html all the images touch each other top and bottom.

    I am sure if you enable custom html and only display titles you will see what I mean (I am using thumbnail size of 70x70). Thanks

  14. magnoct
    Member
    Posted 8 months ago #

    Any feedback on this?

    Thanks

  15. Héctor Cabrera
    Member
    Plugin Author

    Posted 8 months ago #

    Hi magnot,

    The custom HTML feature actually removes all CSS classes added by the plugin, hence why it loses the styling. The reason for this is that people using this functionality should use whatever HTML tags & CSS ids/classes, and of course adjust the CSS stylesheet to reflect the changes made to the HTML output generated by the plugin. So, you need to add the CSS classes to your custom HTML, otherwise the list will come out without any styles at all and use whatever CSS it inherits from your theme's stylesheet.

  16. magnoct
    Member
    Posted 8 months ago #

    Thank you for the reply.

    If my understanding is correct, then I can simply use current CSS classes in the custom HTML box to get the result I am after (which is a <hr> between each post and the images with a left float and the title wrapping the right hand side of the pictures).

    If my understanding is correct, could you point me in the right direction as to what I would put in the custom HTML box to achieve that.

    Many thanks :)

  17. magnoct
    Member
    Posted 7 months ago #

    sorry about this...but *bump* ;)

  18. Héctor Cabrera
    Member
    Plugin Author

    Posted 7 months ago #

    No problem, apologies for not replying earlier. Got any example of what's the HTML structure you're after?

  19. magnoct
    Member
    Posted 7 months ago #

    Thanks.

    Whatever custom HTML will give me both word wrap around the images and a gap between the images, ideally with a <hr>.

    Many thanks.

  20. Héctor Cabrera
    Member
    Plugin Author

    Posted 7 months ago #

    I assume you want an HR tag to show a divisory line between posts, correct? If so, you don't really need to use the custom HTML functionality. Changes via CSS should suffice. Also, by image wrapping I guess you're talking about this so my reply will be based on that.

    Make the following modifications to the wpp.css stylesheet:

    .wpp-list li { /* LI - post container */
    	overflow:auto;
    	display:block;
    	float:none;
    	clear:both;
    	margin-bottom:15px; /* adjust this value to your liking */
    	border-bottom:#333333 1px solid; /* adjust this value to your liking, #333333 is a hexadecimal color */
    }

    If you want to position the thumbnail to the right instead:

    /* thumbnail styles */
    .wpp-thumbnail {
    	display:inline;
    	float:right;
    	margin:0 5px 0 0;
    	border:none;
    }

    You might need to adjust a couple of things and / or add new styles.

  21. magnoct
    Member
    Posted 7 months ago #

    Many thanks, is this update proof? :)

  22. Héctor Cabrera
    Member
    Plugin Author

    Posted 7 months ago #

    Nope, because I'm not going to incorporate these modifications into the plugin. Some people might not want this.

    However, you can copy the wpp.css file into your theme's folder and changes will stick even after plugin's update.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.