Jump to content
Sign in to follow this  
Tang

Post-Thumbnail Migration from iblogPro4 to iBlogPro5

Recommended Posts

Tang    3
Tang

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
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Tang    3
Tang
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
James B    436
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Tang    3
Tang

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Tang    3
Tang

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Tang    3
Tang

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
James B    436
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Tang    3
Tang

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Tang    3
Tang

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • dawsonbarber
      By dawsonbarber+
      Scratch this topic: the usual way does work. I think I need sleep.
       
      (Couldn't prefix the topic with iblogpro6 because it's not in the topic prefix dropdown).
       
      Anyway, I've tried the usual way, with Danny's Skeleton theme, but it's not working.
       
      Could someone let me know what I need to do?
       
      Thanks
       
      Dawson
    • darcythe2nd
      By darcythe2nd
      I don't want to keep the pagelines, html5, or css3 icons in the solid footer. I don't see how to get rid of them. They're there even if I leave the website address blank. How to get rid of them??
    • darcythe2nd
      By darcythe2nd
      I installed this but am unable to find where I can change the color of the solidfooter to anything other than the original white! Please help!
    • hypman
      By hypman
      Hi
       
      I thought i had installed this properly a few days ago but now im not sure as i ve seen 2 versions of frameowrk in my themes. (see image)
       
      if i activate the multi coloured fromawork theme i see no error messages, but when i activate the other framework theme i see this again:
       
      Install Error!
      PageLines Framework must be installed in a folder called 'pagelines' to work with child themes and extensions.

      Current path: /home/stopsmok/public_html/ripley-hypnotherapy.co.uk/wp-content/themes/PageLines
       
       
      Will the ilblog not run correctly if i ignore this? i cant see nay issues with the theme?
       
      thanks
       
      ps the site is ripley-hypnotherapy.co.uk
    • hypman
      By hypman
      Hi guys
       
      Ive just installed framework then i added iblog pro 5 and the site seems ok but i ve got an error message:
       
      Install Error! PageLines Framework must be installed in a folder called 'pagelines' to work with child themes and extensions.

      Current path: /home/warringt/public_html/wp-content/themes/PageLines-Framework-master
       
       
      Im not sure how to correct this, but as i say the site looks ok anyway
       
      waringtoncycles.com
       
      Any ideas? ive read a little but im still confused lol
×