• I have a working Nivo Slider and as you can see on my Home Page it appears to be resizing the images to thumbnail sizes instead of 650×250. Here is the code from my StyleSheet.php and the featured.php files from the Chameleon Theme.

    StyleSheet.php Slider Section:

    .nivoSlider { position:relative; width: 650px; height: 250px; left: 16%; border: 3px solid #000000; box-shadow: 5px 5px 2px #505759; }
    	.nivoSlider img { position:relative; top:0px; left:0px; width:650px; height:250px; }
    /* If an image is wrapped in a link */
    	.nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:650px; height:250px; border:0; padding:0; margin:0; z-index:6; display:none; }
    /* The slices and boxes in the Slider */
    .nivo-slice { display:block; position:absolute; z-index:5; height:100%; }
    .nivo-box { display:block; position:absolute; z-index:5; }
    /* Caption styles */
    .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:8; }
    	.nivo-caption p { padding:5px; margin:0; text-align: center; font-family:'Droid Sans',Arial,Verdana,sans-serif; font-weight: bold; font-size: 16px; }
    		.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:9; cursor:pointer; }
    .nivo-prevNav { left:0px; }
    .nivo-nextNav { right:0px; }
    /* Control nav styles (e.g. 1,2,3...) */
    .nivo-controlNav { position: absolute; bottom: -40px; left: 0; width: 100%; }
    .nivo-controlNav a { position:relative; z-index:9; cursor:pointer; }
    .nivo-controlNav a.active { font-weight:bold; }

    featured.php section

    <?php $et_slider_type = apply_filters( 'et_slider_type', get_option('chameleon_slider_type') ); ?>
    
    <div id="featured<?php if ( $et_slider_type == 'roundabout' ) echo '-modest'; ?>">
    	<?php if ( $et_slider_type == 'cycle' ) { ?>
    		<a id="left-arrow" href="#"><?php _e('Previous','Chameleon'); ?></a>
    		<a id="right-arrow" href="#"><?php _e('Next','Chameleon'); ?></a>
    	<?php } ?>
    
    <?php if ( $et_slider_type <> 'roundabout' ) { ?>
    	<div id="slides">
    <?php } ?>
    		<?php global $ids;
    		$ids = array();
    		$i=1;
    
    		$featured_cat = get_option('chameleon_feat_cat');
    		$featured_num = get_option('chameleon_featured_num'); 
    
    		if (get_option('chameleon_use_pages') == 'false') query_posts("showposts=$featured_num&cat=".get_cat_ID($featured_cat));
    		else {
    			global $pages_number;
    
    			if (get_option('chameleon_feat_pages') <> '') $featured_num = count(get_option('chameleon_feat_pages'));
    			else $featured_num = $pages_number;
    
    			query_posts(array
    							('post_type' => 'page',
    							'orderby' => 'menu_order',
    							'order' => 'ASC',
    							'post__in' => get_option('chameleon_feat_pages'),
    							'showposts' => $featured_num
    						));
    		} ?>
    		<?php if (have_posts()) : while (have_posts()) : the_post();
    		global $post; ?>
    
    			<?php if ( $et_slider_type == 'cycle' ) { ?>
    				<div class="slide">
    					<?php
    					$width = 960;
    					$height = 332;
    					$titletext = get_the_title();
    
    					$thumbnail = get_thumbnail($width,$height,'',$titletext,$titletext,false,'Featured');
    					$thumb = $thumbnail["thumb"];
    					print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, ''); ?>
    					<div class="featured-top-shadow"></div>
    					<div class="featured-bottom-shadow"></div>	
    
    					<div class="featured-description">
    						<h2 class="featured-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    						<p><?php truncate_post(225); ?></p>
    						<a href="<?php the_permalink(); ?>" class="readmore"><?php _e('Read More', 'Chameleon'); ?></a>
    					</div> <!-- end .featured-description -->
    				</div> <!-- end .slide -->
    			<?php } ?>
    
    			<?php if ( $et_slider_type == 'nivo' ) { ?>
    				<?php
    				$width = 650;
    				$height = 250;
    				$titletext = get_the_title();
    
    				$thumbnail = get_thumbnail($width,$height,'',$titletext,$titletext,false,'Featured');
    				$thumb = $thumbnail["thumb"]; ?>
    				<a href="<?php the_permalink(); ?>">
    					<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, ''); ?>
    				</a>
    			<?php } ?>
    
    			<?php if ( $et_slider_type == 'roundabout' ) { ?>
    				<?php
    					$et_link = get_post_meta($post->ID,'Link',true) ? get_post_meta($post->ID,'Link',true) : get_permalink();
    
    					$et_slide_class = '';
    					if ( $i == 1 ) $et_slide_class = ' active-block';
    					if ( $i == 2 ) $et_slide_class = ' next-block';
    					if ( $i == $featured_num ) $et_slide_class = ' prev-block';
    					$width = 650;
    					$height = 250;
    				?>
    				<div class="slide<?php echo $et_slide_class; ?>">
    					<a href="<?php echo $et_link; ?>" class="main">
    						<?php
    							$post_title = get_the_title();
    
    							$thumbnail = get_thumbnail($width,$height,'thumb',$post_title,$post_title);
    							$thumb = $thumbnail["thumb"];
    
    							print_thumbnail($thumb, $thumbnail["use_timthumb"], $post_title, $width, $height, 'Featured');
    						?>
    					</a>
    
    					<h2 class="featured-title"><?php the_title(); ?></h2>
    					<div class="description">
    						<p><?php truncate_post(200); ?></p>
    					</div> <!-- end .description -->
    
    					<div class="shadow-left"></div>
    					<div class="shadow-right"></div>
    					<a class="featured-link" href="<?php echo $et_link; ?>"><?php _e('Read more','Chameleon'); ?></a>
    
    					<img src="<?php bloginfo('template_directory'); ?>/images/active-bottom-shadow.png" alt="" class="bottom-shadow" />
    					<a href="#" class="gotoslide"><span></span></a>
    				</div> <!-- end .slide -->
    			<?php } ?>
    
    		<?php $ids[] = $post->ID; $i++; endwhile; endif; wp_reset_query(); ?>
    <?php if ( $et_slider_type <> 'roundabout' ) { ?>
    	</div> <!-- end #slides -->
    <?php } ?>
    </div> <!-- end #featured -->
    
    <?php if ( $et_slider_type <> 'roundabout' ) { ?>
    	<div id="controllers"></div>
    <?php } ?>

  • The topic ‘Nivo Slider Image Sizing Problem’ is closed to new replies.