Archived

This topic is now archived and is closed to further replies.

  • 0

Post-Thumbnail Migration from iblogPro4 to iBlogPro5


Question

Posted · Report post

originally coming from iBlogPro3 - there was a custom-field called »thumb« carrying all my 200px x 200px post-thumbnails. I also used them in iBlogPro4 with no problem. Now in my migration-project to iBlogPro5 these custom fields still exists, but thumbnails don't show up like before - maybe it simply doesn't exist in the new framework. No problem, I thouht and started to manually grab the URLs and put them as »feature-post-thumbnail« in one of these legacy posts. But now the thumbs show up in 75px x 75px size in the post. The corresponding images are sitting in a Nextgen-Gallery folder with original size 200px x 200px and that folder seems to create a problem. If I copy on of these images over to the WP-Media folder and set as »feature-post thumbnail« they show up much bigger: 165px x 165px. Almost there, I thought, but still to small.

 

So next I found the reason for the smaller size with Firebug in the »postloop« section:
 

<a class="post-thumb img fix" style="width: 25%; max-width: 200px">

 

putting the width to 100% … and my original 200px x 200px thumb size was back! Great, I thought, but what code to put into the customize CSS plugin to change this? Firebug only gave me:

element.style {
    max-width: 200px;
    width: 25%;
}

but no matching compiled CSS. Just putting that snippet in, gives no result. I'm not a pro and maybe it's simple, but I'm stuck with that an need help with the correct CSS.

 

And of course it would be great to have a simple way to bulk edit my old posts to get the thumbnails back into place without the need to move them away from ther original NGG-folder. Maybe with a plugin like Auto Post Thumbnail PRO?

Share this post


Link to post
Share on other sites

16 answers to this question

Posted · Report post

James, php really is a timeconsuming friend - too hard for me to learn now. A friend of mine helped me with the problem and found a solution in CSS for this thread keeping responsiveness + full thumbnail-size … we were so close … haha:

a.post-thumb {
	width: 30% !important;
}

That did the trick :D Aloha & Mahalo

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Tang

 

By default Wordpress won't regenerate thumbnails after the settings have been adjusted in settings>media to a new size. You'll need to use a plugin like - http://wordpress.org/extend/plugins/regenerate-thumbnails/ to re-size the existing thumbnails to the new dimensions.

Share this post


Link to post
Share on other sites

Posted · Report post

James, I did never change these settings. They always have been 200x200px since my first iBlogPro3-theme, but yes, I can play around with the plugin. It just seemed so easy, cause changing the HTML in Firefox to 100% did the trick. And not to forget - all these pictures have the original size of 200 x 200px. So there is no need to shrink or modify their size anyway, but something is putting the 25% width on them … crazy.

Share this post


Link to post
Share on other sites

Posted · Report post

Looking at your screenshot the only other css I can think to try would be.

 

a.post-thumb img {
    width: 100% !important;
    min-width: 200px !important;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Excellent, so it's resized the image, you'll need to look higher up in the css to find the frame container which seems to be smaller and adjust the size of that to match. That will probably also affect the margin which will fix the text alignment too.

Share this post


Link to post
Share on other sites

Posted · Report post

Since it only gives element.style, you should try the selector: a.post-thumb img

Share this post


Link to post
Share on other sites

Posted · Report post

a.post-thumb img {
	width: 100%;
	max-width: 200px;
}

or

a.post-thumb img  .element.style {
	width: 100%;
	max-width: 200px;
}

in Custom -CSS changes nothing. HTML stil shows style: width: 25% after refreshing the page. Something is missing, I guess.

Share this post


Link to post
Share on other sites

Posted · Report post

okay, playing around with CSS eventually gives me the perfect look, but this way I kill the resposiveness of the thumbnails. They stay big when shrinking the site to tablet or smartphone-size. That is perhaps why the width was set to 25%. That made resizing easy and is giving good looking results. Raising it to 30% brings back the 200 x 200px plus resposniveness. To make it short: best solution was editing the origin of that, which is in … > pagelines > includes > class.posts.php

    /**
     * Post Thumbnail Markup
     *
     * Get post thumbnail and markup
     *
     * @since   2.0.0
     *
     * @param   string $mode - right, left, or top
     * @param   string $format - ...
     * @param   string $frame - not used
     *
     * @return  string - the thumbnail markup
     *
     * @version 2.2 - fixed image size when thumbnail is displayed on top of excerpt
     * @todo review if top displayed image should be centered above post, or remain left aligned
     */
	function post_thumbnail_markup( $mode = '', $format = '', $frame = '' ) {

		$thumb_width = get_option( 'thumbnail_size_w' );

		$classes = 'post-thumb img fix';

		$percent_width  = ( $mode == 'top' ) ? 100 : 30;

        $style = ( 'top' == $mode ) ? 'width: 100%' : sprintf( 'width: %s%%; max-width: %spx', apply_filters( 'pagelines_thumb_width', $percent_width ), $thumb_width );

		if ( $mode == 'left-excerpt' )
			$classes .= ' alignleft';
		elseif ( $mode == 'right-excerpt' )
			$classes .= ' alignright';
        /** By default image will left align, explicitly adding this class for 'top' == $mode is not needed at this time.
         * elseif ( $mode == 'top' ) $classes .= ' left';
         */

		global $post;

		$img = ( $mode == 'top' ) ? get_the_post_thumbnail( null, 'large' ) : get_the_post_thumbnail( null, 'thumbnail' );

		$the_image = sprintf( '<span class="c_img">%s</span>', $img );

		$thumb_link = sprintf( '<a class="%s" href="%s" rel="bookmark" title="%s %s" style="%s">%s</a>', $classes, get_permalink( $post ), __( 'Link To', 'pagelines' ), the_title_attribute( array( 'echo' => false ) ), $style, $the_image );

        $output = ( 'top' == $mode ) ? sprintf( '<div class="full_img fix">%s</div>', $thumb_link ) : $thumb_link;

		return apply_filters( 'pagelines_thumb_markup', $output, $mode, $format );

	}

on line 406 I changed the value of 25 to 30 … and everything is perfect now!

		$percent_width  = ( $mode == 'top' ) ? 100 : 30;

But I want to write this into the > plugins > pagelines-customize > functions.php … Problem is, I have no idea how to do this correctly! Playing around with .php easily kills the site. But as you can see, I constantly mutate from a piano-player to a code-player ;)

Share this post


Link to post
Share on other sites

Posted · Report post

Have you managed to get this resolved, the images are showing 200px on the site but I can't see if it's the new or the old site.

 

http://screencast.com/t/y8wIPoej7YqZ

 

If not, try the following

 

 

Take out the .element.style (that's not needed, that is just telling you the style is applied inline'

 

Change max-width to just width or even min-width. Try adding !important to the end of the css before the ;

 

a.post-thumb img {
    width: 200px !important;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry James, but nothing changed. I give you a little more oft the Firebug-HTML:

<section id="postloop" class="copy clone_1 section-postloop">
<div class="copy-pad">
<article id="post-529" class="post-529 post type-post status-publish format-standard hentry category-bewusstsein category-glueck-und-gluecklichsein category-liebe tag-beziehung tag-gluecklichsein tag-leben-im-jetzt tag-liebe tag-zeit fpost post-number-1">
<div class="hentry-pad">
<section class="post-meta fix media">
<a class="post-thumb img fix" style="width: 25%; max-width: 200px" title="Link To Making Love – Liebe machen? Being in Love – In Liebe Sein!" rel="bookmark" href="http://www.tangsworld.dev/making-love-liebe-machen-being-in-love-in-liebe-sein/">
<span class="c_img">
</a>

and it's so easy just to change the style width 25% to 100%  in Firefox, but no way to do it in Custom CSS yet. What part of the framework ist resposible for these 25% anyway?

And yes, the live site you visited, still is wonderfull iBlogPro4, where everything was limited, but clean and easy.

Anyway here is, how it looks now on my localhost with the 25% resulting in 165x165px thumb:

 

http://www.screencast.com/t/AiJnB97sO

 

and that's how it should look like:

 

http://www.screencast.com/t/V8owsfNt

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

The Feature thumbnail settings are controlled by your Wordpress media thumbnail settings size. You can check these by going to Wordpress Admin Dashboard > Settings > Media > Thumbnail size.

 

Would it be possible to provide a link to the site in question please.

Share this post


Link to post
Share on other sites

Posted · Report post

Still no solution. Thumbnail sizes either in WP-Media as well as in Nextgen-Gallery are set to 200 x 200px. Site is on localhost under development. I could eventually give TeamViewer8 remote access for the site to someone, who wants to help. 

Share this post


Link to post
Share on other sites

Posted · Report post

Can you provide a screenshot of Dashboard > Settings > Media so that we can at least see how you've set up the thumbnail size?   It will help considerably.  A screenshot of what you're seeing on the site helps too.

 

Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Tang

 

Glad you got that sorted. We can't support editing core files as if you update it will wipe the changes, you'll need to remember the changes you made.

 

If you wanted to add to the customize plugin you'd probably have to use a filter to edit the values using the 'function post_thumbnail_markup', but yes that will be a php coding jobby.

Share this post


Link to post
Share on other sites