Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Horizontal Post help WordPress

  • REFUNDED

Hi There,

I have been asked to help a friend sort their blog posts out.

In wordpress the content has been written like this:

Photo
Text
Video
Text
Photo
Text
etc...

But the Theme is making all the images and iframes (video) align left.
Then the text is put in columns (which I don't understand!)

The example url is in the screenshot.

Would any one be able to help?

This is how the post template works:

<div <?php post_class(); ?>>
<div class="post">
<div class="images"></div>
<div class="content">
<?php the_content(''); ?>
</div>
<div class="title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
</div>
</div>

Many Thanks

2013-03-18 by yepyeh

Answers (3)

2013-03-18

juan manuel incaurgarat answers:

there is a javascript function moving images and videos to that images class div.
here is the function:
$(".content img, .content object, .content iframe, .content video").each(function(){
if($(this).is("img")){
if($(this).parent().is("a, .wp-caption")){
if($(this).parent().parent().is(".wp-caption")){
$(this).parent().parent().appendTo($(this).parents(".post").find(".images"));
}else{
$(this).parent().appendTo($(this).parents(".post").find(".images"));
}
}else{
$(this).appendTo($(this).parents(".post").find(".images"));
}
}else{
$(this).appendTo($(this).parents(".post").find(".images"));
}
});

just get rid of it ;)

PS: it's being loaded on the footer by the way.

yepyeh comments:

Hi Juan,

Thanks for that, but after I take that code out the post goes vertical, see screenshot...

I would like the images to stay full height, but text to display next to the image in column.

Like:

Image > Text (in column) ... Video > Text (in column) > .... etc.

Thanks

juan manuel incaurgarat comments:

I think that can be solved with CSS only, can you disable that function for a while so I can try?
Anyway, I'll be out for a few hours now, maybe some other user can continue this.
If not, I can continue tomorrow :)
I just don't want to make you loose time.

2013-03-18

Kiet Luong answers:

Let me help you do this, Sincerely !

Kiet Luong comments:

skype: kioluong

2013-03-19

Duncan O'Neill answers:

If you float AND clear the images, you get them stacked up one above the other , with text to right. To do that, see line 43 of [[LINK href="http://tempoclash.co.uk/wp-content/themes/TempoClash/style.css"]]http://tempoclash.co.uk/wp-content/themes/TempoClash/style.css[[/LINK]]

You see this;


.images {
float:left;
}


change it to this;


.images {
float:left;
clear:both;
}


best,

Duncan O'Neill comments:

Nudge? Did you see my post above? I believe it solves your issue..