Blog post: max-image width WordPress
Hi,
I`m running the Crius theme from themeforest.com...
I`m having trouble with images in <strong>blog entry images expanding beyond the wrapper.</strong> Example here: http://www.andreisavescu.com/testing/
All my photos are 840px and my goal would be to make them fit the theme blog entry layout and then use fancybox to enlarge it. You can see that this is actually happening with the featured image above the title, so I guess the script is already installed? <em>[Check out the attached image explaining my problem.] </em>
Also, I don`t want to resize my photos before uploading to fit the wrapper, because I have many old post that I will import from my old blog which are 840px wide.
I`m not very good at coding, only basic understanding. I selected the codes, that I would think makes sense to be related to my problem.. Thanks!
My style.css doens`t contain anything, but I have this: Visual Editor Stylesheet (<strong>editor-style.css</strong>)
Code: /*
Theme Name: Starkers
*/
/*
Used to style the TinyMCE editor.
*/
html .mceContentBody {
max-width:640px;
}
* {
font-family: Georgia, "Bitstream Charter", serif;
color: #444;
line-height: 1.5;
}
p,
dl,
td,
th,
ul,
ol,
blockquote {
font-size: 16px;
}
tr th,
thead th,
label,
tr th,
thead th {
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
pre {
font-family: "Courier 10 Pitch", Courier, monospace;
}
code, code var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
body, input, textarea {
font-size: 12px;
line-height: 18px;
}
hr {
background-color: #E7E7E7;
border:0;
height: 1px;
margin-bottom: 18px;
clear:both;
}
/* Text elements */
p {
margin-bottom: 18px;
}
ul {
list-style: square;
margin: 0 0 18px 1.5em;
}
ol {
list-style: decimal;
margin: 0 0 18px 1.5em;
}
ol ol {
list-style:upper-alpha;
}
ol ol ol {
list-style:lower-roman;
}
ol ol ol ol {
list-style:lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom:0;
}
dl {
margin:0 0 24px 0;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 18px;
}
strong {
font-weight: bold;
color: #000;
}
cite,
em,
i {
font-style: italic;
border: none;
}
big {
font-size: 131.25%;
}
ins {
background: #FFFFCC;
border: none;
color: #333;
}
del {
text-decoration: line-through;
color: #555;
}
blockquote {
font-style: italic;
padding: 0 3em;
}
blockquote cite,
blockquote em,
blockquote i {
font-style: normal;
}
pre {
background: #f7f7f7;
color: #222;
line-height: 18px;
margin-bottom: 18px;
padding: 1.5em;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
ins {
text-decoration: none;
}
sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
position: relative;
font-size: 10px;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
a:link {
color:#0066CC;
}
a:visited {
color:#743399;
}
a:active,
a:hover {
color: #FF4B33;
}
p,
ul,
ol,
dd,
pre,
hr {
margin-bottom:24px;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom:0;
}
pre,
kbd,
tt,
var {
font-size: 15px;
line-height: 21px;
}
code {
font-size: 13px;
}
strong,
b,
dt,
th {
color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
margin: 0 0 20px 0;
line-height: 1.5em;
font-weight: normal;
}
h1 {
font-size: 2.4em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.9em;
}
table {
border: 1px solid #e7e7e7 !important;
text-align: left;
margin: 0 -1px 24px 0;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
tr th,
thead th {
border: none !important;
color: #888;
font-size: 12px;
font-weight: bold;
line-height: 18px;
padding: 9px 24px;
}
tr td {
border: none !important;
border-top: 1px solid #e7e7e7 !important;
padding: 6px 24px;
}
img {
margin: 0;
max-width: 640px;
}
.alignleft,
img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}
.alignright,
img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}
.aligncenter,
img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
margin-bottom: 12px;
}
.wp-caption {
border: none;
background: #f1f1f1;
color: #888;
font-size: 12px;
line-height: 18px;
text-align: center;
margin-bottom: 20px;
padding: 4px;
-moz-border-radius: 0;
-khtml-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
.wp-caption img {
margin: 5px;
}
.wp-caption p.wp-caption-text {
margin: 0 0 4px;
}
.wp-smiley {
margin:0;
}
Here`s <strong>single.php (single post) </strong>
<?php
/**
* The main template file for display single post page.
*
* @package WordPress
*/
get_header();
/**
* Get Current page object
**/
$page = get_page($post->ID);
/**
* Get current page id
**/
if(!isset($current_page_id) && isset($page->ID))
{
$current_page_id = $page->ID;
}
if($post_type == 'gallery')
{
include (TEMPLATEPATH . "/single-gallery.php");
exit;
}
//Get Page background style
$bg_style = get_post_meta($current_page_id, 'post_bg_style', true);
//Check browser and version for performance tuning
$isIE8 = ereg('MSIE 8',$_SERVER['HTTP_USER_AGENT']);
$bg_style = 'Static Image';
if($bg_style == 'Static Image')
{
if(has_post_thumbnail($current_page_id, 'full'))
{
$image_id = get_post_thumbnail_id($current_page_id);
$image_thumb = wp_get_attachment_image_src($image_id, 'full', true);
$pp_page_bg = $image_thumb[0];
}
else
{
$pp_page_bg = get_stylesheet_directory_uri().'/example/bg.jpg';
}
?>
<script type="text/javascript">
jQuery.backstretch( "<?php echo $pp_page_bg; ?>", {speed: 'slow'} );
</script>
<?php
} // end if static image
else
{
$page_bg_gallery_id = get_post_meta($current_page_id, 'post_bg_gallery_id', true);
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $page_bg_gallery_id,
'order' => 'ASC',
'orderby' => 'menu_order',
);
$bg_photo_arr = get_posts( $args );
$count_photo = count($bg_photo_arr);
?>
<script type="text/javascript">
<?php
//Get timer setting
$pp_homepage_slideshow_timer = get_option('pp_homepage_slideshow_timer');
if(empty($pp_homepage_slideshow_timer))
{
$pp_homepage_slideshow_timer = 5000;
}
else
{
$pp_homepage_slideshow_timer = $pp_homepage_slideshow_timer*1000;
}
//Check if iPad or iPhone
if($isiPad || $isiPhone)
{
$pp_kenburns_frames_rate = 10;
}
else
{
$pp_kenburns_frames_rate = 30;
}
?>
$j(function(){
$j('#kenburns_overlay').css('width', $j(window).width() + 'px');
$j('#kenburns_overlay').css('height', $j(window).height() + 'px');
$j('#kenburns').attr('width', $j(window).width());
$j('#kenburns').attr('height', $j(window).height());
$j(window).resize(function() {
$j('#kenburns').remove();
$j('#kenburns_overlay').remove();
$j('body').append('<canvas id="kenburns"></canvas>');
$j('body').append('<div id="kenburns_overlay"></div>');
$j('#kenburns_overlay').css('width', $j(window).width() + 'px');
$j('#kenburns_overlay').css('height', $j(window).height() + 'px');
$j('#kenburns').attr('width', $j(window).width());
$j('#kenburns').attr('height', $j(window).height());
$j('#kenburns').kenburns({
images:[
<?php
foreach($bg_photo_arr as $key => $photo)
{
if(!empty($photo->guid))
{
$image_url[0] = $photo->guid;
}
?>
'<?php echo $image_url[0]; ?>'
<?php
if($count_photo > ($key+1))
{
echo ',';
}
}
?>
],
frames_per_second: <?php echo $pp_kenburns_frames_rate; ?>,
display_time: <?php echo $pp_homepage_slideshow_timer; ?>,
fade_time: 1000,
zoom: 1.2,
background_color:'#000000'
});
});
$j('#kenburns').kenburns({
images:[
<?php
foreach($bg_photo_arr as $key => $photo)
{
if(!empty($photo->guid))
{
$image_url[0] = $photo->guid;
}
?>
'<?php echo $image_url[0]; ?>'
<?php
if($count_photo > ($key+1))
{
echo ',';
}
}
?>
],
frames_per_second: <?php echo $pp_kenburns_frames_rate; ?>,
display_time: <?php echo $pp_homepage_slideshow_timer; ?>,
fade_time: 1000,
zoom: 1.2,
background_color:'#000000'
});
});
</script>
<div id="kenburns_overlay"></div>
<canvas id="kenburns">
<p>Your browser doesn't support canvas!</p>
</canvas>
<?php
$galleries = get_posts(array('parent' => -1, 'post_type' => 'gallery', 'numberposts' => -1));
$wp_galleries = array();
foreach ($galleries as $gallery_list ) {
$wp_galleries[$gallery_list->ID]['title'] = $gallery_list->post_title;
$wp_galleries[$gallery_list->ID]['desc'] = $gallery_list->post_content;
}
?>
<div id="kenburns_title" style="display:none"><?php echo $wp_galleries[$page_bg_gallery_id]['title']; ?></div>
<div id="kenburns_desc" style="display:none"><?php echo $wp_galleries[$page_bg_gallery_id]['desc']; ?></div>
<input type="hidden" id="pp_image_path" name="pp_image_path" value="<?php echo get_stylesheet_directory_uri(); ?>/images/"/>
<?php
} //End if ken burns slideshow
?>
<?php
//Get page left contact info text
$pp_contact_info_text = get_option('pp_contact_info_text');
?>
<div class="personal_contact">
<h6><?php echo stripcslashes($pp_contact_info_text); ?></h6>
</div>
<!-- Begin content -->
<?php
//Get social media sharing option
$pp_social_sharing = get_option('pp_social_sharing');
if(!empty($pp_social_sharing))
{
?>
<div class="gallery_social">
<div class="each">
<iframe class="facebook_button" src="//www.facebook.com/plugins/like.php?app_id=262802827073639&href=<?php echo urlencode($page->guid); ?>&send=false&layout=box_count&width=200&show_faces=true&action=like&colorscheme=light&font&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:90px;" allowTransparency="true"></iframe>
</div>
<div class="each">
<a href="https://twitter.com/share" data-text="<?php echo $page->post_title; ?>" data-url="<?php echo $page->guid; ?>" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<div class="each">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" href="<?php echo $page->guid; ?>"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
<?php
}
?>
<div class="page_control">
<a id="page_minimize" href="#">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon_minus.png" alt=""/>
</a>
<a id="page_maximize" href="#">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon_plus.png" alt=""/>
</a>
</div>
<div id="page_content_wrapper">
<div class="inner">
<!-- Begin main content -->
<div class="inner_wrapper">
<div id="page_caption" class="sidebar_content full_width" style="padding-bottom:0">
<div style="float:left">
<h1 class="cufon"><?php _e( 'Blog', THEMEDOMAIN ); ?></h1>
</div>
</div>
<div class="sidebar_content">
<?php
global $more; $more = false; # some wordpress wtf logic
if (have_posts()) : while (have_posts()) : the_post();
$image_thumb = '';
if(has_post_thumbnail(get_the_ID(), 'large'))
{
$image_id = get_post_thumbnail_id(get_the_ID());
$image_thumb = wp_get_attachment_image_src($image_id, 'large', true);
$pp_blog_image_width = 600;
$pp_blog_image_height = 260;
}
?>
<!-- Begin each blog post -->
<div class="post_wrapper">
<?php
if(!empty($image_thumb))
{
$small_image_url = wp_get_attachment_image_src($image_id, 'blog', true);
?>
<br class="clear"/>
<div class="post_img">
<a href="<?php echo $image_thumb[0]; ?>" class="img_frame">
<img src="<?php echo $small_image_url[0]; ?>" alt="" class=""/>
</a>
</div>
<?php
}
?>
<br/>
<div class="post_date">
<div class="month"><?php the_time('M'); ?></div>
<div class="date"><?php the_time('j'); ?></div>
<div class="year"><?php the_time('Y'); ?></div>
</div>
<div class="post_header">
<h5 class="cufon"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h5>
<div class="post_detail">
<?php echo _e( 'Posted by', THEMEDOMAIN ); ?> <?php echo get_the_author(); ?> on <?php echo get_the_time('d M Y'); ?> /
<a href=""><?php comments_number('0 Comment', '1 Comment', '% Comments'); ?></a>
</div>
</div>
<br class="clear"/><br/><hr/>
<?php
the_content();
?>
</div>
<!-- End each blog post -->
<?php comments_template( '' ); ?>
<?php endwhile; endif; ?>
</div>
<div class="sidebar_wrapper">
<div class="sidebar_top"></div>
<div class="sidebar">
<div class="content">
<ul class="sidebar_widget">
<?php dynamic_sidebar('Single Post Sidebar'); ?>
</ul>
</div>
</div>
<br class="clear"/>
<div class="sidebar_bottom"></div>
</div>
</div>
<!-- End main content -->
</div>
</div>
<br class="clear"/>
<?php get_footer(); ?>
And <strong>Blog Page template (blog.php)</strong>
<?php
/**
* Template Name: Blog
* The main template file for display blog page.
*
* @package WordPress
*/
/**
* Get Current page object
**/
$page = get_page($post->ID);
/**
* Get current page id
**/
if(!isset($current_page_id) && isset($page->ID))
{
$current_page_id = $page->ID;
}
if(!isset($hide_header) OR !$hide_header)
{
get_header();
}
$page_style = 'Right Sidebar';
$add_sidebar = TRUE;
$page_sidebar = get_post_meta($current_page_id, 'page_sidebar', true);
//If not select sidebar then select default one
if(empty($page_sidebar))
{
$page_sidebar = 'Blog Sidebar';
}
//Get Page background style
$bg_style = get_post_meta($current_page_id, 'page_bg_style', true);
//Check browser and version for performance tuning
$isIE8 = ereg('MSIE 8',$_SERVER['HTTP_USER_AGENT']);
if($isIE8)
{
$bg_style = 'Static Image';
}
if($bg_style == 'Static Image')
{
if(has_post_thumbnail($current_page_id, 'full'))
{
$image_id = get_post_thumbnail_id($current_page_id);
$image_thumb = wp_get_attachment_image_src($image_id, 'full', true);
$pp_page_bg = $image_thumb[0];
}
else
{
$pp_page_bg = get_stylesheet_directory_uri().'/example/bg.jpg';
}
?>
<script type="text/javascript">
jQuery.backstretch( "<?php echo $pp_page_bg; ?>", {speed: 'slow'} );
</script>
<?php
} // end if static image
else
{
$page_bg_gallery_id = get_post_meta($current_page_id, 'page_bg_gallery_id', true);
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $page_bg_gallery_id,
'order' => 'ASC',
'orderby' => 'menu_order',
);
$bg_photo_arr = get_posts( $args );
$count_photo = count($bg_photo_arr);
?>
<script type="text/javascript">
<?php
//Get timer setting
$pp_homepage_slideshow_timer = get_option('pp_homepage_slideshow_timer');
if(empty($pp_homepage_slideshow_timer))
{
$pp_homepage_slideshow_timer = 5000;
}
else
{
$pp_homepage_slideshow_timer = $pp_homepage_slideshow_timer*1000;
}
//Check if iPad or iPhone
if($isiPad || $isiPhone)
{
$pp_kenburns_frames_rate = 10;
}
else
{
$pp_kenburns_frames_rate = 30;
}
?>
$j(function(){
$j('#kenburns_overlay').css('width', $j(window).width() + 'px');
$j('#kenburns_overlay').css('height', $j(window).height() + 'px');
$j('#kenburns').attr('width', $j(window).width());
$j('#kenburns').attr('height', $j(window).height());
$j(window).resize(function() {
$j('#kenburns').remove();
$j('#kenburns_overlay').remove();
$j('body').append('<canvas id="kenburns"></canvas>');
$j('body').append('<div id="kenburns_overlay"></div>');
$j('#kenburns_overlay').css('width', $j(window).width() + 'px');
$j('#kenburns_overlay').css('height', $j(window).height() + 'px');
$j('#kenburns').attr('width', $j(window).width());
$j('#kenburns').attr('height', $j(window).height());
$j('#kenburns').kenburns({
images:[
<?php
foreach($bg_photo_arr as $key => $photo)
{
if(!empty($photo->guid))
{
$image_url[0] = $photo->guid;
}
?>
'<?php echo $image_url[0]; ?>'
<?php
if($count_photo > ($key+1))
{
echo ',';
}
}
?>
],
frames_per_second: <?php echo $pp_kenburns_frames_rate; ?>,
display_time: <?php echo $pp_homepage_slideshow_timer; ?>,
fade_time: 1000,
zoom: 1.2,
background_color:'#000000'
});
});
$j('#kenburns').kenburns({
images:[
<?php
foreach($bg_photo_arr as $key => $photo)
{
if(!empty($photo->guid))
{
$image_url[0] = $photo->guid;
}
?>
'<?php echo $image_url[0]; ?>'
<?php
if($count_photo > ($key+1))
{
echo ',';
}
}
?>
],
frames_per_second: <?php echo $pp_kenburns_frames_rate; ?>,
display_time: <?php echo $pp_homepage_slideshow_timer; ?>,
fade_time: 1000,
zoom: 1.2,
background_color:'#000000'
});
});
</script>
<div id="kenburns_overlay"></div>
<canvas id="kenburns">
<p>Your browser doesn't support canvas!</p>
</canvas>
<?php
$galleries = get_posts(array('parent' => -1, 'post_type' => 'gallery', 'numberposts' => -1));
$wp_galleries = array();
foreach ($galleries as $gallery_list ) {
$wp_galleries[$gallery_list->ID]['title'] = $gallery_list->post_title;
$wp_galleries[$gallery_list->ID]['desc'] = $gallery_list->post_content;
}
?>
<div id="kenburns_title" style="display:none"><?php echo $wp_galleries[$page_bg_gallery_id]['title']; ?></div>
<div id="kenburns_desc" style="display:none"><?php echo $wp_galleries[$page_bg_gallery_id]['desc']; ?></div>
<input type="hidden" id="pp_image_path" name="pp_image_path" value="<?php echo get_stylesheet_directory_uri(); ?>/images/"/>
<?php
} //End if ken burns slideshow
?>
<?php
//Get page left contact info text
$pp_contact_info_text = get_option('pp_contact_info_text');
?>
<div class="personal_contact">
<h6><?php echo stripcslashes($pp_contact_info_text); ?></h6>
</div>
<!-- Begin content -->
<?php
//Get social media sharing option
$pp_social_sharing = get_option('pp_social_sharing');
if(!empty($pp_social_sharing))
{
?>
<div class="gallery_social">
<div class="each">
<iframe class="facebook_button" src="//www.facebook.com/plugins/like.php?app_id=262802827073639&href=<?php echo urlencode($page->guid); ?>&send=false&layout=box_count&width=200&show_faces=true&action=like&colorscheme=light&font&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:90px;" allowTransparency="true"></iframe>
</div>
<div class="each">
<a href="https://twitter.com/share" data-text="<?php echo $page->post_title; ?>" data-url="<?php echo $page->guid; ?>" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<div class="each">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" href="<?php echo $page->guid; ?>"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
<?php
}
?>
<div class="page_control">
<a id="page_minimize" href="#">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon_minus.png" alt=""/>
</a>
<a id="page_maximize" href="#">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon_plus.png" alt=""/>
</a>
</div>
<div id="page_content_wrapper">
<div class="inner">
<!-- Begin main content -->
<div class="inner_wrapper">
<div id="page_caption" class="sidebar_content full_width" style="padding-bottom:0">
<div style="float:left">
<h1 class="cufon"><?php the_title(); ?></h1>
</div>
</div>
<div class="sidebar_content">
<?php
global $more; $more = false; # some wordpress wtf logic
$query_string ="post_type=post&paged=$paged";
query_posts($query_string);
if (have_posts()) : while (have_posts()) : the_post();
$image_thumb = '';
if(has_post_thumbnail(get_the_ID(), 'large'))
{
$image_id = get_post_thumbnail_id(get_the_ID());
$image_thumb = wp_get_attachment_image_src($image_id, 'large', true);
$pp_blog_image_width = 600;
$pp_blog_image_height = 260;
}
?>
<!-- Begin each blog post -->
<div class="post_wrapper">
<?php
if(!empty($image_thumb))
{
$small_image_url = wp_get_attachment_image_src($image_id, 'blog', true);
?>
<br class="clear"/>
<div class="post_img">
<a href="<?php echo $image_thumb[0]; ?>" class="img_frame">
<img src="<?php echo $small_image_url[0]; ?>" alt="" class=""/>
</a>
</div>
<?php
}
?>
<br/>
<div class="post_date">
<div class="month"><?php the_time('M'); ?></div>
<div class="date"><?php the_time('j'); ?></div>
<div class="year"><?php the_time('Y'); ?></div>
</div>
<div class="post_header">
<h5 class="cufon"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h5>
<div class="post_detail">
<?php echo _e( 'Posted by', THEMEDOMAIN ); ?> <?php echo get_the_author(); ?> on <?php echo get_the_time('d M Y'); ?> /
<a href=""><?php comments_number('0 Comment', '1 Comment', '% Comments'); ?></a>
</div>
</div>
<br class="clear"/>
<?php
$pp_blog_display_full = get_option('pp_blog_display_full');
if(!empty($pp_blog_display_full))
{
the_content();
}
else
{
the_excerpt();
?>
<br/><br/>
<a href="<?php the_permalink(); ?>"><?php echo _e( 'Read more', THEMEDOMAIN ); ?> ?</a>
<?php
}
?>
</div>
<!-- End each blog post -->
<?php endwhile; endif; ?>
<?php
if((isset($wp_query->paged) && $wp_query->paged == 0 && $wp_query->max_num_pages > 1) OR (isset($wp_query->paged) && $wp_query->paged > 0 && $wp_query->paged < $wp_query->max_num_pages))
{
?>
<div class="pagination"><p><?php posts_nav_link(' '); ?></p></div>
<?php
}
?>
</div>
<?php
if($add_sidebar && $page_style == 'Right Sidebar')
{
?>
<div class="sidebar_wrapper">
<div class="sidebar_top"></div>
<div class="sidebar">
<div class="content">
<ul class="sidebar_widget">
<?php dynamic_sidebar($page_sidebar); ?>
</ul>
</div>
</div>
<br class="clear"/>
<div class="sidebar_bottom"></div>
</div>
<?php
}
?>
</div>
<!-- End main content -->
</div>
</div>
<br class="clear"/>
<?php get_footer(); ?>
Answers (1)
Sabby Sam answers:
Hi,
use this code
.post_img img {
max-width:840px !important;
}
change the value whatever you want 840px or 500px;
and paste this code in your style.css
andreisavescu comments:
i pasted it into style.css but I think my real style.css is not in my wordpress editor. Here`s the code of style.css
/*
Theme Name: Crius
Description: Premium Template for Photography
Version: 1.4
Author: Peerapong Pulpipatnan
Author URI: http://themeforest.net/user/peerapong
*/
@import "css/screen.css";
I don`t have screen.css in wordpress but I opened it locally and here`s the code. Should I paste it in screen.css? there is a .post_img img already...
.post_img
{
overflow:hidden;
position: relative;
width: 540px;
height: 240px;
}
.post_img img
{
height:260px;
position: absolute;
}
.post_img .shadow
{
width: 100%;
height: 100%;
background: transparent url('../images/post_shadow.png') no-repeat;
position: absolute;
z-index: 9;
display:none;
cursor: pointer;
}
.post_img .shadow .zoom
{
padding: 5px 15px 5px 15px;
margin: auto;
background: #000;
font-size: 10px;
color: #fff;
display: inline-block;
position: relative;
top:75%;
left: 40%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.cufon.space
{
margin-bottom: 15px;
}
#content_slider_wrapper
{
width: 100%;
height: 20px;
background: transparent;
position: fixed;
bottom: 200px;
}
#content_slider
{
width: 90%;
height: 20px;
background: transparent;
margin: 0;
cursor: pointer;
position: relative;
}
#content_slider .ui-slider-handle
{
width: 11%;
background: transparent url('../images/000_slider.png') repeat center center;
height: 20px;
margin: 0;
position: absolute;
display: block;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#page_content_wrapper .inner .sidebar_content
{
width: 540px;
padding: 10px 10px 20px 25px;
margin-top: 20px;
float: left;
}
#page_content_wrapper .inner .sidebar_content.full_width
{
width: 765px;
margin-top: 10px;
}
#page_content_wrapper .inner .sidebar_content.full_width p
{
width: 96%;
}
#page_content_wrapper .inner .sidebar_content.full_width hr
{
width: 98%;
margin-left: -5px;
}
#page_content_wrapper .inner .sidebar_wrapper
{
width: 180px;
float: left;
}
#page_content_wrapper .inner .sidebar_wrapper .sidebar
{
width: 90%;
float: left;
margin-top: 10px;
min-height: 300px;
}
#page_content_wrapper .inner .sidebar_wrapper .sidebar .content
{
width: 100%;
margin: 20px 10px 0 20px;
}
/*
Sabby Sam comments:
yes paste my code in this screen.css and also add the below code.
.size-full {
max-width:840px !important;
}
Sabby Sam comments:
Change the width whatever you want.
I hope this will solve.
andreisavescu comments:
worked! I added .size-full {
max-width:840px !important;
height: auto;
}
and it worked! :D
now, the featured image has a sort of lightbox.. i said it`s fancybox but perhaps I`m wrong...I found the jQuery Nivo Slider in my screen.css. Basically I want my post images to display in full size using the same lightbox as the one the featured image uses..
andreisavescu comments:
Here`s my screen.css... don`t know where/how to add the lightbox/slider option to all my images, not just the featured image one (above the title)
Sabby Sam comments:
Hi,
use this plugin
http://wordpress.org/extend/plugins/fancybox-for-wordpress/screenshots/
or
http://wordpress.org/extend/plugins/lightbox-plus/
or search any plugin which has light box.
I hope this will help you.
Sabby Sam comments:
Hi,
I got it,
open your content where you added the image .
for eg:
<a href="http://www.andreisavescu.com/wp-content/uploads/2012/09/IMG_5671.jpg class="img_frame""><img class="alignnone size-full wp-image-10 " title="IMG_5671" src="http://www.andreisavescu.com/wp-content/uploads/2012/09/IMG_5671.jpg" alt="" width="840" height="560"></a>
add like this
class="img_frame" in the href like this
<a href="http://www.andreisavescu.com/wp-content/uploads/2012/09/IMG_5671.jpg <strong>class="img_frame""</strong>><img class="alignnone size-full wp-image-10 " title="IMG_5671" src="http://www.andreisavescu.com/wp-content/uploads/2012/09/IMG_5671.jpg" alt="" width="840" height="560"></a>
I have added blod remove the code and paste it
it will work
<a href="http://www.andreisavescu.com/wp-content/uploads/2012/09/IMG_5671.jpg class="img_frame""><img class="alignnone size-full wp-image-10 " title="IMG_5671" src="http://www.andreisavescu.com/wp-content/uploads/2012/09/IMG_5671.jpg" alt="" width="840" height="560"></a>
Sabby Sam comments:
Opps like this :
<a href="http://www.andreisavescu.com/wp-content/uploads/2012/09/IMG_5671.jpg class="img_frame"><img class="alignnone size-full wp-image-10 " title="IMG_5671" src="http://www.andreisavescu.com/wp-content/uploads/2012/09/IMG_5671.jpg" alt="" width="840" height="560"></a>
andreisavescu comments:
I tried it but i get a 404 not found page...
I installed a fancybox plugin and it works, but it conflicts with the current theme..
for example if I first click on the featured image (opens in the themes set fancybox) and then try to open my blog post entries it doesn`t work..
if i click on images first, then it works.. so there`s a sort of conflict? i need a global solution, not just for one image, if possible..
thanks!
Sabby Sam comments:
Give me wordpress admin panel login.
its very easy.
Sabby Sam comments:
Just do the following things.
Open your post.php, edit it,
where you see the <a href=""><img src=""> add the class after the href as <a href="" class="img_frame">.
and you are done.
It will act as a fancy box 100%.
andreisavescu comments:
in single_post.php i found this:
<div class="post_img">
<a href="<?php echo $image_thumb[0]; ?>" class="img_frame">
<img src="<?php echo $small_image_url[0]; ?>" alt="" class=""/>
</a>
</div>
so the img_frame class is added but there`s this echo that i have no clue what it is... thanks for helping, hope to solve it very soon and close this post
Sabby Sam comments:
No, no dont go here.
Login into the wordpress panel.
open the post.php , edit your post.
in this way.
Sabby Sam comments:
edit your post by loggin into wp admin panel
http://www.andreisavescu.com/testing/
edit with this post.
See the attached image.