Need help with image resizing in slider (directorypress) WordPress
- SOLVED
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://http://thehalifaxdirectory.co.uk/test-account/"]] Once there, click on the gallery tab. If you clickhover over the images and click inspect element you'll see what I mean.
Questions:
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 {
width:1000px;
}
.imgScroller {max-width: 600px;}
.tab-area {margin-top: 10px; }
#singleslider {
height:300px;
overflow:hidden;
position:relative;
width:598px;
}
#singlesliderContent {
margin-left:0;
position:absolute;
top:0;
width:598px;
.singlesliderImage {
display:none;
text-align: center;
position:relative;
--------------------------------------------------------------------
<strong><strong>Here's the code from the _single.php
At the top of the file I've put:</strong></strong>
<?php
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">
<?php
// 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
?>
</div>
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: http://code.google.com/p/timthumb/
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: http://www.screenr.com/Ptl7
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
Cheers.
