Image Resize, Nivo Slider Customization (This Should Be Simple) WordPress
- SOLVED
This should be easy...
I'm using the popular [[LINK href="http://nivo.dev7studios.com/"]]Nivo Slider[[/LINK]] on [[LINK href="http://www.lucaswynne.com"]]my homepage[[/LINK]]. Images are being automatically called up from my posts. I need for these images to be automatically resized to fit the slider. I want images to fill the slider 100% both height and width. Notice how they aren't flush with the edges of the slider on my homepage.
<strong>My PHP:</strong>
<div id="slider">
<?php $my_query = new WP_Query('showposts=5'); while ($my_query->have_posts()) : $my_query->the_post(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php $image = catch_that_image();
if( $image ) { ?>
<img src="<?php echo $image; ?>" alt="" title="<?php the_title(); ?>" />
<?php } ?>
</a>
<?php endwhile; ?>
</div>
<strong>My CSS:</strong>
/* The Nivo Slider styles */
.nivoSlider {position:relative; clear:both; margin:0 0 30px 0}
.nivoSlider img {position:absolute;top:0px;left:0px; height:300px}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider {position:relative;width:100%;height:246px;background:url(images/loading.gif) no-repeat 50% 50%}
#slider img {position:absolute;top:0px;left:0px;display:none}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
font-weight:bold;
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
display:block;
background:#000;
padding:25px
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
font-weight:bold;
}
Answers (2)
enodekciw answers:
Michael Fields pointed to one nasty solution setting height and width of an image. Your loop should look like this:
<div id="slider">
<?php $my_query = new WP_Query('showposts=5'); while ($my_query->have_posts()) : $my_query->the_post(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php $image = catch_that_image();
if( $image ) { ?>
<img src="<?php echo $image; ?>" alt="" title="<?php the_title(); ?>" height="300" width="620" />
<?php } ?>
</a>
<?php endwhile; ?>
</div>
Or..
You could implement timthumb image resize script to resize images dinamically. I could show you how, but you should raise award money a bit ;)
enodekciw comments:
Ok, this is the solution with timthumb image resizing.
1. Download TimThumb image resize script from [[LINK href="http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/"]]here[[/LINK]].
2. Read the documentation how to use it ;)
3. Use it like this:
<img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=<?php echo $image; ?>&h=300&width=620" alt="" title="<?php the_title(); ?>" height="300" width="620" />
Also, you can add zc parameter if you want your images to be zoom cropped.
Btw, be sure that your server sets right permissions on cache folder where your timthumb.php is placed ;)
enodekciw comments:
Oh, in code snipped I've given you above you don't need to use width and height attributes anymore. They wouldn't do anything bad, but.. Just forgot to remove it ;) It should be something like this:
<img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=<?php echo $image; ?>&h=300&width=620" alt="" title="<?php the_title(); ?>" />
enodekciw comments:
Michael Fields answers:
The only real solution here IMHO is to upload images that are the correct size for the slider. If this is not possible, a really bad solution would be to set the height and width attribute of the img tag:
<img src="" height="300" width="500" />
But the will mess up the proportions.
Lucas Wynne comments:
I've actually tried to use the height and width attribute but that doesn't work for some reason.
Michael Fields comments:
Have you tried uploading an image of the correct size?