why is the text not floating as required? WordPress
- SOLVED
Am transferring a blog from one server to the next. Everything has gone smoothly, except that for some reason, whereas all of the images in the blog posts were nicely left aligned, now they're not. I've not touched the css, and despite having a good dig around, I can't for the life of me work out how to get it fixed. Here's the sites for comparison:
The original: http://upiedigitaldigest.com/?m=200912
the transfer site: http://www.upiedigitaldigest.com.php5-9.dfw1-1.websitetestlink.com/?m=200912
EDIT
Below is the code for index.php. It seems that the width is meant to be set dynamically based on the width of the attached image. I've a feeling that this is what has broken in the transfer process, but have no idea why, or how to fix it.
<!--?php load_theme_textdomain('andreas09');?-->
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php $post = $posts[0]; // Thanks Kubrick for this code ?>
<!--
<?php if (is_category()) { ?>
<h2><?php _e('Archive for'); ?> <?php echo single_cat_title(); ?></h2>
<?php } elseif (is_day()) { ?>
<h2><?php _e('Archive for'); ?> <?php the_time('F j, Y'); ?></h2>
<?php } elseif (is_month()) { ?>
<h2><?php _e('Archive for'); ?> <?php the_time('F, Y'); ?></h2>
<?php } elseif (is_year()) { ?>
<h2><?php _e('Archive for'); ?> <?php the_time('Y'); ?></h2>
<?php } elseif (is_author()) { ?>
<h2><?php _e('Author Archive'); ?></h2>
<?php } elseif (is_search()) { ?>
<h2><?php _e('Search Results'); ?></h2>
<?php } ?>
-->
<!-- the title -->
<!-- <h1 class="month-title"><span>Issue 11</span><?php the_time('F Y'); ?></h1> -->
<!-- <h1 class="month-title"><?php the_time('F Y'); ?></h1>-->
<?
$http = get_bloginfo('url', 'display') . '/';
$path = 'wp-content/themes/'.get_template().'/images/';
$categs = array();
$sql = $wpdb->get_results("SELECT a.term_id, a.name FROM $wpdb->terms a, $wpdb->term_taxonomy b WHERE (a.term_id > 1) AND (a.term_id = b.term_id) AND (b.taxonomy='category') AND (b.count > 0) ORDER BY b.description ASC;");
foreach ($sql as $key => $row):
?>
<div class="category_image"><div id="category_spacer"></div><div class="category_post"><?= $row->name; ?></div></div>
<?php
if (!empty($_GET['m'])) {
$y = substr($_GET['m'], 0, 4); $m = substr($_GET['m'], 4, 2);
query_posts("cat={$row->term_id}&nopaging&posts_per_page=100000&year={$y}&monthnum={$m}&order=DESC");
} else {
query_posts("cat={$row->term_id}&nopaging&posts_per_page=100000&order=DESC");
}
$count=1; while (have_posts()) : the_post();
?>
<div class="postentry_row">
<?
$display_images = true;
$attached_image = $wpdb->get_row("SELECT post_title, guid FROM $wpdb->posts WHERE (post_type = 'attachment') AND (post_parent='" . get_the_ID() . "') ORDER BY id DESC;");
if (!empty($attached_image) && $display_images): ?>
<div class="postentry_image">
<img src="<?= $attached_image ->guid; ?>">
</div>
<? endif ?>
<? $img = substr($attached_image ->guid, strlen($http));
if (file_exists($img) && $display_images) {
$imgs = @getimagesize($img);
$w = 572-$imgs[0];
$h = $imgs[1];
}
else {$w = 572;$h = '';}
?>
<div class="post_<? echo $count%2; $count++; ?>" id="post-<?php the_ID(); ?>" style="width: <?= $w; ?>px;">
<h2 class="posttitle"> <?php the_title(); ?></h2>
<div class="postentry">
<?php if (is_search()) { ?>
<?php the_excerpt() ?>
<?php } else { ?>
<?php the_content(__('Read the rest of this entry »')); ?>
<?php } ?>
</div>
</div>
</div>
<?php endwhile; ?>
<? endforeach; ?>
<p><?php posts_nav_link('', __(''), __('« Previous entries')); ?>
<?php posts_nav_link(' · ', __(''), __('')); ?>
<?php posts_nav_link('', __('Next entries »'), __('')); ?></p>
<?php else : ?>
<h2><?php _e('Not Found'); ?></h2>
<p><?php _e('Sorry, but no posts matched your criteria.'); ?></p>
<h3><?php _e('Search'); ?></h3>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>
<?php get_footer(); ?>
Answers (6)
Brandon Dove answers:
Dave --
The problem is in this bit of code:
<?
$img = substr($attached_image->guid, strlen($http));
if (file_exists($img) && $display_images) {
$imgs = @getimagesize($img);
$w = 572-$imgs[0];
$h = $imgs[1];
}
else {$w = 572;$h = '';}
?>
If you look at the src attribute on the images on the new server, they're still being referenced from the old server url. What this bit of code is trying to do is automatically get the width and height of the image, and if it can't (which it can't because the images are on a remote server) it defaults to a width of 572.
If all of the uploaded image files have been uploaded to the new server, everything should work as planned when the domain gets transferred.
Gary Jones answers:
There's an inline style on each of the div class=".post_1" elements which is adding a width style.
On the transferred site, the width is wider than the original, and more importantly, wider than the available space. As there's not enough space, it drops the text below the image, even though all the floats are still in place.
Without knowing more about the inner workings of your Universal WordPress theme, I can't offer any definitive advice about how to fix the issue. It's a coding, rather than a styling issue.
spivurno answers:
A quick look at the original code versus the transferred codes reveals this difference:
Original Code:
<div style="width: 402px;" id="post-1026" class="post_1">
Transferred Code:
<div style="width: 572px;" id="post-1026" class="post_1">
This is the div that contains the post content. The inline styled width is much wider on the transferred code. Without seeing how this code is being generated, I can't really tell you why this is happening. Does your theme have a setting that defines this width?
Michael Fields answers:
I believe that your problem lays in the use of file_exists() in this block of code:
<?
$img = substr($attached_image ->guid, strlen($http));
if (file_exists($img) && $display_images) {
$imgs = @getimagesize($img);
$w = 572-$imgs[0];
$h = $imgs[1];
}
else {$w = 572;$h = '';}
?>
Please try the following instead:
<?
$imgs = @getimagesize( $attached_image->guid );
if ( is_array( $imgs ) && $display_images ) {
$w = 572-$imgs[0];
$h = $imgs[1];
}
else {
$w = 572;
$h = '';
}
?>
Actually, After reading what was posted right above this, he is right, the images are being referenced from the old server. If you only exported and imported the database and then moved the files, then all of your attachments will be borked. The best thing that you can do is use WordPress' built in Import Export to move installations from one domain to the next.
If you always use this feature to move a site, you will never have this sort of problem.
Ben Huson answers:
When I migrate a site I usually use the Search & Replace plugin to search for my old domain and replace it with my new domain. This can search all posts and attachments.
[[LINK href="http://wordpress.org/extend/plugins/search-and-replace/"]]http://wordpress.org/extend/plugins/search-and-replace/[[/LINK]]
MAKE SURE YOU BACKUP YOUR DATABASE BEFORE HAND
(just in case)
Rebecca M answers:
Hi Dave,
For a quick fix, make the following changes in your style sheet.
1. Remove the float: left. It doesn't seem logical but it worked for me when using Firebug.
post_0, .post_1 {
margin:5px 0;
padding:0 0 0 5px;
}
2. Then change this style to get the padding to look nice:
.postentry_image {
float:left;
margin:5px 10px 5px 0;
}
Another suggestion is to check the W3c validator: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.upiedigitaldigest.com.php5-9.dfw1-1.websitetestlink.com%2F%3Fm%3D200912&charset=%28detect+automatically%29&doctype=Inline&group=0
It's a good idea to reduce the number of errors which may be affecting how the site looks.
All the best,
Rebecca