Quick question about Slider resizing my images WordPress
- SOLVED
Hello I changed my slider CSS assuming it would be relatively simple to get a different sized image in the sliders. I set the CSS dimensions to the size of the slider images (950px * 336px), for some reason the slider php is still resizing the image and it is being cut off by a hard crop. I can't seem to find the code doing this. Some solutions suggested I change code in the functions.php or slider.php, yet I can't seem to implement this correctly.
So in summary I would like to have my slider images which are 950px * 336px show up correctly in the sliders.
My website: http://liv.tv
The slider.php:
<div id="slider" class="nivoSlider">
<?php $posts_counter = 0; ?>
<?php
query_posts("post_type=slider&posts_per_page=-1&post_status=publish");
while ( have_posts() ) : the_post(); $posts_counter++;
?>
<?php
$custom = get_post_custom($post->ID);
$url = get_post_custom_values("slider-url");
$sl_thumb = $custom["thumb"][0];
$sl_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'slider-post-thumbnail');
$tab_title = get_post_custom_values("tab-title");
?>
<?php if(has_post_thumbnail( $the_ID) || $sl_thumb!=""){ ?>
<?php if($url!=""){ ?>
<?php if($sl_thumb!=""){
echo "<a href='" . $url[0] . "'>";
echo "<img src='" . $sl_thumb . "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
echo "</a>";
} else{
echo "<a href='" . $url[0] . "'>";
echo "<img src='";
echo $sl_image_url[0];
echo "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
echo "</a>";
} ?>
<?php }else{ ?>
<?php if($sl_thumb!=""){
echo "<img src='" . $sl_thumb . "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
} else{
echo "<img src='";
echo $sl_image_url[0];
echo "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
} ?>
<?php } ?>
<?php } ?>
<?php endwhile; ?>
<?php wp_reset_query();?>
</div>
<?php $posts_counter = 0; ?>
<?php
query_posts("post_type=slider&posts_per_page=-1&post_status=publish");
while ( have_posts() ) : the_post(); $posts_counter++;
?>
<?php
$custom = get_post_custom($post->ID);
?>
<div id="sliderCaption<?php echo $posts_counter ?>" class="nivo-html-caption">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_query();?>
The functions.php:
<?php
$functions_path = TEMPLATEPATH . '/functions/';
$includes_path = TEMPLATEPATH . '/includes/';
//Loading jQuery and Scripts
require_once $includes_path . 'theme-scripts.php';
//Widget and Sidebar
require_once $includes_path . 'sidebar-init.php';
require_once $includes_path . 'register-widgets.php';
//Theme initialization
require_once $includes_path . 'theme-init.php';
//Additional function
require_once $includes_path . 'theme-function.php';
//Shortcodes
require_once $includes_path . 'theme_shortcodes/shortcodes.php';
include_once(TEMPLATEPATH . '/includes/theme_shortcodes/alert.php');
include_once(TEMPLATEPATH . '/includes/theme_shortcodes/tabs.php');
include_once(TEMPLATEPATH . '/includes/theme_shortcodes/toggle.php');
include_once(TEMPLATEPATH . '/includes/theme_shortcodes/html.php');
//tinyMCE includes
include_once(TEMPLATEPATH . '/includes/theme_shortcodes/tinymce/tinymce_shortcodes.php');
// removes detailed login error information for security
add_filter('login_errors',create_function('$a', "return null;"));
if ( !function_exists( 'optionsframework_init' ) ) {
/*-----------------------------------------------------------------------------------*/
/* Options Framework Theme
/*-----------------------------------------------------------------------------------*/
/* Set the file path based on whether the Options Framework Theme is a parent theme or child theme */
if ( STYLESHEETPATH == TEMPLATEPATH ) {
define('OPTIONS_FRAMEWORK_URL', TEMPLATEPATH . '/admin/');
define('OPTIONS_FRAMEWORK_DIRECTORY', get_bloginfo('template_directory') . '/admin/');
} else {
define('OPTIONS_FRAMEWORK_URL', STYLESHEETPATH . '/admin/');
define('OPTIONS_FRAMEWORK_DIRECTORY', get_bloginfo('stylesheet_directory') . '/admin/');
}
require_once (OPTIONS_FRAMEWORK_URL . 'options-framework.php');
}
// Removes Trackbacks from the comment cout
add_filter('get_comments_number', 'comment_count', 0);
function comment_count( $count ) {
if ( ! is_admin() ) {
global $id;
$comments_by_type = &separate_comments(get_comments('status=approve&post_id=' . $id));
return count($comments_by_type['comment']);
} else {
return $count;
}
}
// enable shortcodes in sidebar
add_filter('widget_text', 'do_shortcode');
// custom excerpt ellipses for 2.9+
function custom_excerpt_more($more) {
return 'Read More »';
}
add_filter('excerpt_more', 'custom_excerpt_more');
// no more jumping for read more link
function no_more_jumping($post) {
return ' <a href="'.get_permalink($post->ID).'" class="read-more">'.'Continue Reading'.'</a>';
}
add_filter('excerpt_more', 'no_more_jumping');
// category id in body and post class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes [] = 'cat-' . $category->cat_ID . '-id';
return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');
?>
The theme-function.php:
<?php
// The excerpt based on words
function my_string_limit_words($string, $word_limit)
{
$words = explode(' ', $string, ($word_limit + 1));
if(count($words) > $word_limit)
array_pop($words);
return implode(' ', $words).'... ';
}
// The excerpt based on character
function my_string_limit_char($excerpt, $substr=0)
{
$string = strip_tags(str_replace('...', '...', $excerpt));
if ($substr>0) {
$string = substr($string, 0, $substr);
}
return $string;
}
add_action( 'after_setup_theme', 'my_setup' );
// Remove invalid tags
function remove_invalid_tags($str, $tags)
{
foreach($tags as $tag)
{
$str = preg_replace('#^<\/'.$tag.'>|<'.$tag.'>$#', '', trim($str));
}
return $str;
}
// Generates a random string (for embedding flash)
function theme1418_random($length){
srand((double)microtime()*1000000 );
$random_id = "";
$char_list = "abcdefghijklmnopqrstuvwxyz";
for($i = 0; $i < $length; $i++) {
$random_id .= substr($char_list,(rand()%(strlen($char_list))), 1);
}
return $random_id;
}
// Remove Empty Paragraphs
add_filter('the_content', 'shortcode_empty_paragraph_fix');
function shortcode_empty_paragraph_fix($content)
{
$array = array (
'<p>[' => '[',
']</p>' => ']',
']<br />' => ']'
);
$content = strtr($content, $array);
return $content;
}
// For embedding video file
function mytheme_video($file, $image, $width, $height, $color){
//Template URL
$template_url = get_template_directory_uri();
//Unique ID
$id = "video-".theme1418_random(15);
$object_height = $height + 39;
//JS
$output = '<script type="text/javascript">'."\n";
$output .= 'var flashvars = {};'."\n";
$output .= 'flashvars.player_width="'.$width.'";'."\n";
$output .= 'flashvars.player_height="'.$height.'"'."\n";
$output .= 'flashvars.player_id="'.$id.'";'."\n";
$output .= 'flashvars.thumb="'.$image.'";'."\n";
$output .= 'flashvars.colorTheme="'.$color.'";'."\n";
$output .= 'var params = { "wmode": "transparent" };'."\n";
$output .= 'params.wmode = "transparent";'."\n";
$output .= 'params.quality = "high";';
$output .= 'params.allowFullScreen = "true";'."\n";
$output .= 'params.allowScriptAccess = "always";'."\n";
$output .= 'params.quality="high";'."\n";
$output .= 'var attributes = {};'."\n";
$output .= 'attributes.id = "'.$id.'";'."\n";
$output .= 'swfobject.embedSWF("'.$template_url.'/flash/video.swf?fileVideo='.$file.'", "'.$id.'", "'.$width.'", "'.$object_height.'", "9.0.0", false, flashvars, params, attributes);'."\n";
$output .= '</script>'."\n\n";
$output .= '<div class="video-bg" style="width:'.$width.'px; height:'.$height.'px; background-image:url('.$image.')">'."\n";
$output .= '</div>'."\n";
//HTML
$output .= '<div id="'.$id.'">'."\n";
$output .= '<a href="http://www.adobe.com/go/getflashplayer">'."\n";
$output .= '<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />'."\n";
$output .= '</a>'."\n";
$output .= '</div>';
return $output;
}
// Add Thumb Column
if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) {
// for post and page
add_theme_support('post-thumbnails', array( 'post', 'page' ) );
add_image_size( 'slider_thumb', 950, 336, true );
function fb_AddThumbColumn($cols) {
$cols['thumbnail'] = __('Thumbnail');
return $cols;
}
function fb_AddThumbValue($column_name, $post_id) {
$width = (int) 35;
$height = (int) 35;
if ( 'thumbnail' == $column_name ) {
// thumbnail of WP 2.9
$thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
// image from gallery
$attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
if ($thumbnail_id)
$thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
elseif ($attachments) {
foreach ( $attachments as $attachment_id => $attachment ) {
$thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
}
}
if ( isset($thumb) && $thumb ) {
echo $thumb;
} else {
echo __('None');
}
}
}
// for posts
add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' );
add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 );
// for pages
add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' );
add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 );
}
?>
As you can see I tried adding it as a new image size which did not work.
Answers (3)
Romel Apuya answers:
add_image_size( 'slider_thumb', 950, 336, true );
should be
add_image_size( 'slider-post-thumbnail', 950, 336, true );
liv comments:
That didn't work, I assume it's close. But it doesn't add an image size to the panel, it's still being re-sized incorrectly.
Romel Apuya comments:
try replacing
<?php if(has_post_thumbnail( $the_ID) || $sl_thumb!=""){ ?>
<?php if($url!=""){ ?>
<?php if($sl_thumb!=""){
echo "<a href='" . $url[0] . "'>";
echo "<img src='" . $sl_thumb . "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
echo "</a>";
} else{
echo "<a href='" . $url[0] . "'>";
echo "<img src='";
echo $sl_image_url[0];
echo "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
echo "</a>";
} ?>
<?php }else{ ?>
<?php if($sl_thumb!=""){
echo "<img src='" . $sl_thumb . "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
} else{
echo "<img src='";
echo $sl_image_url[0];
echo "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' />";
} ?>
<?php } ?>
with
<?php if(has_post_thumbnail( $the_ID) || $sl_thumb!=""){ ?>
<?php if($url!=""){ ?>
<?php if($sl_thumb!=""){
echo "<a href='" . $url[0] . "'>";
echo "<img src='" . $sl_thumb . "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' width='950px' height='336px' />";
echo "</a>";
} else{
echo "<a href='" . $url[0] . "'>";
echo "<img src='";
echo $sl_image_url[0];
echo "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' width='950px' height='336px' />";
echo "</a>";
} ?>
<?php }else{ ?>
<?php if($sl_thumb!=""){
echo "<img src='" . $sl_thumb . "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' width='950px' height='336px' />";
} else{
echo "<img src='";
echo $sl_image_url[0];
echo "' alt='";
echo $tab_title[0];
echo "' title='#sliderCaption" . $posts_counter . "' width='950px' height='336px' />";
} ?>
<?php } ?>
liv comments:
Replaced this exactly still didn't work.
Romel Apuya comments:
have you tried reuploading your image?
with width 950px and height 336px?
liv comments:
I will try that.
liv comments:
I tried re-uploading the images and setting them as a featured image, but it gives me the error message: "Could not set that as the thumbnail image. Try a different attachment." It did not do that before.
Romel Apuya comments:
can you give me access to the site?
ftp and wp-admin?
cheers,
liv comments:
Sending info shortly
Romel Apuya comments:
waiting.
Romel Apuya comments:
working on it now..
Romel Apuya comments:
ftp details seem not working..
liv comments:
Resent info.
Romel Apuya comments:
so now i guess the only thing that need to be change is this
$sl_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
for now ive set it that all image be pulled on the featured image.
but if you want to use the custom image link you can use it i can reset it to pull
image in the custom link or the featured image you just have to make sure that
your custom image has the right dimension.
let me know so i can change it.
cheers,
Romel Apuya comments:
ok here's what we need to do
1. revert the theme files to a working copy.
2. change the line
$sl_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'slider-post-thumbnail');
to
$sl_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
3. make sure the image in the Link picture page is also of dimension 950px X 336px.
when done it should be working fine.
you need not set both the featured image and the custom Link picture
cheers,
romel
redbubblemedia.com
Jerson Baguio answers:
for quicker fixed just add attribute width to the img tag
liv comments:
Could you be a little less vague?
liv comments:
When I tried to upload the image, it says "Could not set that as the thumbnail image. Try a different attachment." It did not do that before.
liv comments:
This was posted under the wrong answer.
Rashad Aliyev answers:
:-)
Problem in jquery.nivo.slider.js?ver=2.5.2
SEnd me your ftp i will fix it for 4 min :-)
liv comments:
Sending info shortly.
Rashad Aliyev comments:
1)Open your jquery.nivo.slider.js from js folder
2)there are 2 lines $(kids[vars.currentSlide]).css('display','block'); find this lines
3)paste $(kids[vars.currentSlide]).children('img').css('display','block'); after this lines
4)find $(this).css('display','none');
5) paste $(this).children('img').css('display','none'); after this
that is all :-)
İf it's understandable please dowload editing nivo which is i uploaded for you
Rashad Aliyev comments:
ok waiting for you
liv comments:
I will try this.
liv comments:
I tried that, and all it does is stretch the cropped image. It does not show the full image.
Rashad Aliyev comments:
please give me your ftp i'll fix it
Rashad Aliyev comments:
that is all:-)
Please ctrl +f5 ...
liv comments:
Sent the info, right now it is stretched and not showing the whole image. Good luck!
Rashad Aliyev comments:
ok:-)
Wait 4.5 min i'll fix it
Rashad Aliyev comments:
i think it's fixed..
http://liv.tv/
liv comments:
It's not, all it's doing is stretching the images. It is not showing the full image.
Rashad Aliyev comments:
images Dimensions is 836 × 336 in slider
And you want that 950x336...
Of course it'll a little stretching.
liv comments:
Can you change that to 950px? Where is that code that determines that width? I don't see it in the CSS.
liv comments:
The image is actually 950px * 336px, like I said the image is being re-sized when put in the slider, that was the entire issue.
liv comments:
http://liv.tv/wp-content/uploads/2012/05/banner_livestream2.jpg this is the image, it is being resized which is what I wanted to change so it would show the full image.
Rashad Aliyev comments:
http://liv.tv/
What you doing here ? :-(
Blieve me if your images width isn't 950 of course it'll a little stretching.
I fixed for you the nivo slider js and slider.php...
If you want that it showing the full image i propose you change the images height to 381 px;
That is all..it'll showing the full image..
I dont think there are any other solution
liv comments:
Romel figured it with with changing a function in the slider.php