Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Need help with image resizing in slider (directorypress) WordPress


I've coded the _single.php file in directory press to allow users to upload images which will be displayed in a slider. The slider itself is displayed in a tab.

I've managed to do everything but get the images to resize. I want them to be 600px wide, they are appearing 600px wide but are cropped to this size rather than being resized so that quite a bit of the image is missing.

I've attempted, unsuccessfully to alter the code in the _single.php file and the style.css to change this. After banging my head against a brick wall for a couple of days, i thought I might see if someone else can help me out.

The Url to have a look is:[[LINK href="http://"]] Once there, click on the gallery tab. If you clickhover over the images and click inspect element you'll see what I mean.

Can someone tell me what code needs changing, what it needs changing to and what file and whereabouts in that file I need to make the changes.

Thanks in anticipation.

<strong>Here's the code from the styles.css</strong>

/* =============================================================================
Slider 1 Styles
========================================================================== */

#siteFeature {position:relative; background:#efefef; border:1px solid #fff; }
#siteFeature #tabContainer a:link, #siteFeature #tabContainer a:visited { background: transparent url(../images/_slider_inactive.png) no-repeat; }
#siteFeature #tabContainer a:hover{ background:#fff url(../images/_slider_inactive1.png) no-repeat; }
#siteFeature #tabContainer a h4 { color: #666; padding:10px 11px 0px 11px; }
#siteFeature #tabContainer a.selected h4, #siteFeature #tabContainer a.selected p { color: #fff; text-shadow: 0px 1px 0px #666; }

#siteFeature #txtBoxContainer a { color:#fff;}
#siteFeature h3 { color:#fff; }

.w_960 {

.imgScroller {max-width: 600px;}

.tab-area {margin-top: 10px; }
#singleslider {
#singlesliderContent {

.singlesliderImage {
text-align: center;


<strong><strong>Here's the code from the _single.php

At the top of the file I've put:</strong></strong>


function single_slider() { ?>
<script src="<?php echo PPT_PATH; ?>js/jquery.s3Slider.js" type="text/javascript"></script>
<script type="text/javascript"> jQuery(document).ready(function() { jQuery('#singleslider').s3Slider({timeOut: 4000 });}); </script>
<?php }

<strong><strong>And inside the tab div I've put:</strong></strong>
add_action('wp_footer', 'single_slider');

<div id="tab2" class="page_content">

<div class="imgScroller left">
// IMAGE DISPLAY // V7 - with slider integration
if(strlen(get_post_meta($post->ID,"images", true)) > 1) {
$srcimages = get_post_meta($post->ID,"images", true);
$galimages = explode(",", $srcimages);
echo '<div id="singleslider">';
echo '<ul id="singlesliderContent">';
foreach($galimages as $galimage) {
// check to see if the filename is long enough
if ( strlen($galimage) > "3" ) {
// check if url is included in image name
if (strpos($galimage,"/themes/directorypress/thumbs/") !== false) {
$imgPath = "";
} else {
$imgPath = get_bloginfo('template_directory') .'/thumbs/';
echo '<li class="singlesliderImage">';
echo '<img src="' . $imgPath . $galimage . '" class="max-width:600px; max-height:450px;"/>';
echo '<div style="display: none; visibility: none; max-width:100%; max-height:100%;"><span>'.$galimage.'</span></div>';
echo '';
echo '<div class="clear singlesliderImage"></div>';
echo '';
echo '</div>';
} else {
echo premiumpress_image($post->ID,"",array('alt' => $post->post_title, 'link' => 'self', 'link_class' => 'lightbox', 'width' => '600px', 'height' => '450px', 'style' => 'max-width:100%; max-height:100%;' ));
// end of Image Slider integration

Answers (2)


Francisco Javier Carazo Gil answers:

You can use Timthumb to resize images:
<img src="/timthumb/timthumb.php?src=image.jpg&w=600">

kevohara comments:

Where do I put this?

Francisco Javier Carazo Gil comments:

In the call to <img> tag, you can do this call.

Remember to include timthumb.php, and in a recent version:

kevohara comments:

Sorry Fransisco, I'm a complete beginner at coding. I don't even understand what you mean by <em>'In the call to <img> tag</em>'!

If you can tell me the name of the file I need to paste it in and exactly where to put it I can do that! As for timthumb it comes as part of the theme, but do I need to put in any code to use it? If so, what and where?

Francisco Javier Carazo Gil comments:

In which place are you calling the gallery. Maybe it is easier, send me details in PM and I will tell you.


Plugarized answers:

Hi there, the following is the outcome,

check the following video for the fix:

If you are interested, pm me your wordpress or ftp info as your php file has some styling errors.

Alternatively, you can look for image resizing plugins on Google