Ask your WordPress questions! Pay money and get answers fast!

Manual cropping of Mimbo thumbnails WordPress

SOLVED

Hi Guys,

I'm currently building a website for a good friend of mine. I have very little programming knowledge so I'm looking for a complete solution that will be easy to integrate. Copy / paste / enjoy :)

Also, please be super clear as to where exactly I have to add / remove / modify things.

• • • • • • • • • • • • •

The site is built with the [[LINK href="http://www.darrenhoyt.com/2007/08/05/wordpress-magazine-theme-released/"]]free Mimbo theme[[/LINK]]. Basically, we want to have a bit more control over the cropping ratio of the photos displayed on the home page (featured article and recent articles thumbnails).

Right now, Mimbo uses [[LINK href="http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/"]]Timthumb[[/LINK]] to automatically crop the photos to a certain fixed size with a certain ratio. But that's not enough for us.

We're looking for a way to use the new thumbnail / photo cropping possibilities offered by Wordpress 2.9+.

• • • • • • • • • • • • •

Two things here :
- I have never activated or used this function before. So it might take a couple minutes for me to understand. But I'm sure it's quite easy to understand.

- A friend tried to help us with this, using the [[LINK href="http://www.seoadsensethemes.com/"]]WP Post Thumbnail plugin[[/LINK]]. But it didn't work.

• • • • • • • • • • • • •

What we're looking for
When writing a new article and uploading a new photo, we would like to be able to manually crop the thumbnail that will be used on the home page (on the featured article and the recent articles). This thumbnail will then be displayed next to the matching article on the home page, categories pages, search pages, etc.

Important note
The photos always have the same height (it's the width that changes) and the text on the right wraps around the photo.

• • • • • • • • • • • • •

Thanks a lot in advance. I hope you'll be able to help us :)

Do not hesitate to contact me if you have any questions or comments.
Cheers !

• • • • • • • • • • • • •

Edit (Thursday April 8, 2010 - 9:49)

Thanks for all the info / potential answers. I actually have a business meeting this morning, but will be back later to try these solutions.


• • • • • • • • • • • • •

Edit (Monday April 12, 2010 - 0:55)

Thanks again to those who suggested potential answers. I'm sorry, but I tried many of those solutions and couldn't make them work properly. And since I'm not that good at programming, I can't really take your answer and extrapolate to find the perfect solution.

This is why I'm extending the question by 3 days.

• Also, you can download my current version of the (slightly modified) Mimbo theme. Maybe its easier for you to install my version of the theme and test your answer.

Thanks again for helping me !

• • • • • • • • • • • • •

Edit (Monday April 12, 2010 - 3:00 Eastern Time)

A quick edit to let everyone know that Buzu B and I are trying to find a solution. Please note that the question is not totally answered yet, but Buzu B is working on it as we speak.

And we just want to be fair and transparent :)

• • • • • • • • • • • • •

2010-04-07 by Fr4nco Phil

Answers (4)

2010-04-08

Buzu B answers:

It looks like you are not getting the help you need here. I see the guys all have been really kind, but they seem to completely forget you are new to this. Let me try and see if I can explain it a bit better so you understand it right away.
First of all there is really no much to do to accomplish what you want. You basically only have to delete a few characters and that is it.

First of all, go to your theme folder and locate the file index.php
Open index.php and go to line 19
You will see something like this:

<?php echo get_post_image (get_the_id(), '', '', '' .get_bloginfo('template_url') .'/scripts/timthumb.php?zc=1&w=260&h=230&src='); ?></a>

Now, you have to understand one thing, the part that calls timthumb is the one that goes from that period (.) until just before the closing parenthesis.
This part:

.get_bloginfo('template_url') .'/scripts/timthumb.php?zc=1&w=260&h=230&src='

So, you only need to erase that part of the code. Once you do that, line 19 has to look like this:

<?php echo get_post_image (get_the_id(), '', '', ''); ?></a>

You can also go to line 43 and repeat the same process. In like 43 you will see another line like 19, you just need to delete the part we deleted in line 19 and that should do it.

Try with those two. If you get the desired results, then we can continue with the next sections.

This answer assumes you have already setup your post with your custom-cropped images.

Buzu B comments:

Have you tried my answer? I just tried with the files you uploaded and it works just fine. I'm uploading the index.php file. Download it and put it instead of the one you have now. I just edited the lines I told you in my last response the way I explained in it.

It works, but if you run into any problem, just let me know.

Buzu B comments:

Sorry for all those replies something was wrong with the site. Also it seems the file wasn't uploaded. Please tell me where I can send it to you.

Buzu B comments:

I just sent it to you.

2010-04-07

Sidd answers:

What is stopping you from using v 2.9.2 ?
Editing photos then will be very easy with the built-in editing feature.

You can then manually crop them and " Apply changes to:
1 All image sizes
2 Thumbnail
3 All sizes except thumbnail "

These options [1,2,3] of selectively applying the cropping could potentially answer the question.

Fr4nco Phil comments:

@Sidd : Good idea, I'm updating WP as we speak.

Fr4nco Phil comments:

Cool.
I understand the possibilities, but I don't know how/where to modify the code (to bypass Timthumb and tell Mimbo to use these thumbnails).

Like I said in my question, since I'm bad at coding, I'm looking for a step by step, copy-paste solution. :)

2010-04-07

Erez S answers:

wordpress should have built-in small image editor for thumbnails,so you can use it for cropping

Erez S comments:

and it also have built-in option for thumbnails so you don't have to use timthumb

Fr4nco Phil comments:

Same here :)

I understand the possibilities, but I don't know how/where to modify the code (to bypass Timthumb and tell Mimbo to use these thumbnails).

Like I said in my question, since I'm bad at coding, I'm looking for a step by step, copy-paste solution. :)

Erez S comments:

here is what you should do,go to the theme folder and look for the following code:
echo get_post_image (get_the_id(), '', '', '' .get_bloginfo('template_url') .'/scripts/timthumb.php?zc=1&w=YYY&h=XXX&src=');
and the YYY is the width and the XXX is the height,now replace it with:
if ( has_post_thumbnail() ) { the_post_thumbnail(array(YYY,XXX)); }
put the original value of YYY on the new code,and the original value of XXX on the original code,and here is where you can find the code you need to replace:
index.php and archivelist.php
and then all you have to do is to upload the images with the built-in thumbs engine of wordpress
enjoy

Fr4nco Phil comments:

Will try this. It's not that simple (for a total newbie) but I'll try it.

Erez S comments:

you are using the theme without any changing? if yes,then here is index.php and archivelist.php,simply download it and put it in your theme directory ,this will ask you to replace some files and you should confirm,and then upload it to your site and you are done :)
link:http://www.mediafire.com/?zhmzmymhgoj
if not working,try those files:
link:http://www.mediafire.com/?5moy3jmlg2i
hope this worked for you :)

Erez S comments:

Check this out: http://blog.studio-xl.com/timthumb-cropping-mod/ this is hack for TimThumb which add cropping option to timthumb,and that's exatly what you need !
Hope this helped you

2010-04-08

Mathieu Hallé answers:

Salut mec !
Voici des instructions simple:

1- update ton wordpress a 2.9.2
(pour updater automatiquement: http://www.francophil.ca/wp-admin/update-core.php)

2- dans le répertoire de ton theme, il y a un fichier function.php (wp-content > themes > mimbo)
sur la premiere ligne en haut de tout, ajoute ceci:
// thumbnail support if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 99999, 200, true); }

3-regarde la page d'édition d'un article (post), en bas a droite
tu devrai voir une boit qui te permet de sélectionner un fichier comme thumbnail.

4-Maintenant, il faut changer partout dans ton theme plein de chose.
il faudrait que j'installe ton theme pour le modifier et de dire ou/quoi changer.
si tu me donne tes info FTP, je peut te faire la modifications assez rapidement.
sinon, as tu fait des modification autre au theme ? car je pouris probablement t'envoyer une version du theme avec cette fonction incluse...

désoler de ne pouvoir te donnée que 50% de la reponce pour cette fois ...

Fr4nco Phil comments:

Hey Mathieu, I see you speak french. Thanks !
But just to be fair with everybody, I'll reply in english :)

- -

I'll try this too.
You can download Mimbo [[LINK href="http://www.darrenhoyt.com/2007/08/05/wordpress-magazine-theme-released/"]]here[[/LINK]]. But it has been modified.

If you could show me how I can apply the changes to the Featured article and the Recent Articles (and then prove your code actually works) I could give you the FTP info so you can modify the other pages :)

Fr4nco Phil comments:

At least, I did your #1, 2 and 3.
Now I see the Thumbnails box when editing an article. Good start. I didn't realize this was missing.