Enlarge thumbnail pictures on listing ads from 75px to 100px on Classipress 3.3
Thumbs on default theme for Classipress are too small and you can make them look better with just a little modification of style.css file. So, here we are going to enlarge thumbnail pictures on front page when looping ads.
The default size for thumbnails is 75 x 75px. Here is how you can make it look better by enlarging them to 100 x 100px.
This modification was tested on WordPress 3.5.2 and Classipress 3.3.
This tutorial requires you to change these two files:
wp-content/themes/classipress/style.css
wp-content/themes/classipress/includes/theme-functions.php
It is recommended to make backup of these two files before changing them.
Let’s start with style.css.
Step 1
Around line 242 find:
.content_res img.attachment-ad-thumb { max-width: 75px; }
Replace with:
.content_res img.attachment-ad-thumb { max-width: 100px; }
Around line 399 find:
.post-block .post-right {float:right;max-width:458px;min-width:380px;} |
Replace with:
.post-block .post-right {float:right;max-width:433px;min-width:380px;} |
Around line 1222 find:
.post-block .post-left { max-width: 102px; /* 102px / 560px */ } |
Replace with:
.post-block .post-left { max-width: 127px; /* 102px / 560px */ } |
Around line 1305 find:
.post-block .post-left { max-width: 85px; } |
Replace with:
.post-block .post-left { max-width: 110px; } |
Step 2
Now open file theme-functions.php (on newer versions of Classipress this file was renamed to functions.php)
Around line 337 find:
$adthumbarray = wp_get_attachment_image( $image_id, 'ad-thumb' ); |
Replace with:
$adthumbarray = wp_get_attachment_image( $image_id, 'ad-small' ); |
Around line 356 find:
echo '<a title="' . the_title_attribute('echo=0') . '" href="' . get_permalink() . '"><img title="" src="' . appthemes_locate_template_uri('images/no-thumb-75.jpg') . '" alt="" />';</a> |
Replace with:
echo '<a title="' . the_title_attribute('echo=0') . '" href="' . get_permalink() . '"><img title="" src="' . appthemes_locate_template_uri('images/no-thumb-100.jpg') . '" alt="" width="100" height="100" /></a>'; |
Around line 540 find:
$img_check = '<img title="" src="' . appthemes_locate_template_uri('images/no-thumb-75.jpg') . '" alt="" />'; |
Replace with:
$img_check = '<img title="" src="' . appthemes_locate_template_uri('images/no-thumb-100.jpg') . '" alt="" width="100" height="100" />'; |
That’s it. Now you have a better looking classipress site.
If you find any issues with this tutorial, please be so kind and write a comment. I’ll try to help as much as I can.
If you find this tutorial useful, please consider making a small donation.
Hi,
Maybe you thought about mod that allows to make limit of characters or images for paid package ? 🙂
I will put it on my list. Thank you for the idea.
Thanks you so much. As per your tutorial I have changed it in our website.
Hi, I use classipress 3.4 and I couldn’t find anything to replace in functions.php file. Seems like they change a lot that file. Can you please see if you can this update this tutorial to work for clasipress 3.4. thanks
This modification was created for 3.3. It will probable not work on 3.4. When I get the version I’ll check.
Hello, tell a version 3.4 might increase the photo? You can write this post?
Hi, Can you please teach how to increase the featured slide size and image size aswell.
Which version of Classipress are you using?
Blaz
Hi, how can I do it so I can see the thumbs also on responsive mobile devices?
This old theme is not responsive, so please switch to a responsive theme.