Posted 1 year ago #
This is a perennial problem, I see.
I can avoid most formatting problems with the latest TinyMCE advanced (nice :-) ) but I'm inserting images into posts and they're getting wrapped in paragraph elements.
The blog will be for someone who's code illiterate so needs to use the visual editor.
Any ideas on how to prevent the paragraph elements, without having to wrap them in divs?
you can prevent paragraph tags, but all of them, not just the ones around images.
Can I ask you, what's the effect you're trying to achieve? I'm confident there's a way to do it without being concerned about the paragraph tags.
Posted 1 year ago #
Hmm, I haven't tested all variations of it yet because I'm getting fed up, but I'm floating an image to the left. I'm then using a custom field to add some text. The idea is that the text floats to the right, as this is a magazine layout and there's very limited space - there have to be a lot of mini-posts on the front page.
But I notice using Aardvark that the paragraph elements, being block level, are going right across the page, which I believe is preventing the text from floating nicely.
<p class="deal-of-the-day">
blah deal of the day price and stuff like that blah and more blah plenty of blah</p>
<p><img class="alignleft size-thumbnail wp-image-22" title="blah title" src="http://blah.com/wp-content/uploads/2008/05/ist1_4409755_vector_diary_personal_organiser-50x50.jpg" alt="blah caption" width="50" height="50" /></p>
<p class="number-of-comments"> <a href="http://blah.com/?p=21#respond" class="comment-link" title="Comment on this post">Bid now !</a> </p>
<p class="multiple-post-info"> 15/05/2008 <span class="edit-post"><a href="http://blah.com/wp-admin/post.php?action=edit&post=21" title="Edit post">Edit this post</a></span> </p>expected behaviour when floating an image out of it's paragraph is that the paragraph turns into a sliver with almost no height whatsoever. That shouldn't really affect your layout.
Would you mind terribly, either linking to your site, or providing a screenie so I can get a better grip on what you mean by the 'text not floating nicely'?
Posted 1 year ago #
It's a development site, so I'm reluctant to link to it, but a screenshot of the relevant bits is here:
http://www.alchemweb.co.uk/z-temp-image.jpg
Note the red line - that's Aardvark telling me it's all block level. What looks like a capital I is in fact a thumbnail of an open book :-)
oh I see... you're inserting the floated image after the text.
Try inserting it before the text, and don't bother floating the text itself.
that should do it.
if you don't want the text to wrap around the shape of your image, then set your "deal-of-the-day" class NOT to floated, but with a left-margin a bit bigger than the image you're floating:left.
hope that resolves it for you.
Posted 1 year ago #
Nope. :-)
But thanks for trying :-)
I've also tried display:inline for p image, just to see what happened
The root problem is getting rid of these p elements around inages somehow
I'm sure I can do what you want without that.
try this outside your stylesheet.
<div class="post" style="float: left; width: 200px; border: 2px solid blue; padding: 5px;">
<h3 style="text-align: center; margin: 0 0 10px 0;">title goes here</h3>
<div class="entry">
<span class="fauximage" style="float: left; width: 60px; border: 1px solid black;">pretend image here</span>
<p class="deal-of-the-day" style="margin-left: 70px;">content goes here, the first line of which is your image
</div>
</div>just put that in a html file on its own, if that's not what you want, then I just don't get it.
Note the unstyled p-tags around the faux image. I used a span tag to represent an image because they are both inline styles by default, and behave exactly the same. Replace that with a real image if you think it'll make a difference.
btw, this is exactly what I said above - just in HTML. The entry div isn't strictly required for this, but its "standard" for surrounding the_content(); so I've included it.
Posted 1 year ago #
First, let me say thank you before I forget.
I'll have a good long look at that.
The main thing is that for clients it has to be easy all the way. Although I can work my way round it with ease, for clients it's a different matter.
Many thanks, and if it works - or if I come up with something simpler - I'll post it
Posted 1 year ago #
Ok, my fault.
The theme I'm developing, I forgot to put in alignright, alignleft styles as produced by WP when images are uploaded. So I was going round in circles due to my own stupidity.
*quietly strangles you*
Posted 1 year ago #
Ok, deserve to be strangled.
Here's some stuff I've learnt that might help someone by way of recompense.
Magazine style: want to have a thumbnail on the front that leads to a full image on the post page?
When writing the post, insert a thumbnail. Add some text to appear with the thumbnail. Then insert the <!--more--> tag to break the page. This means that on the index page you get a fast loading thumbnail with appropriate text beside the image.
Still writing the post, insert a full image below the more tag. This means that anyone clicking through to the full post will now see a thumbnail, some text, and a full image. In the stylesheet, use display:none for the thumbnail image e.g. something along the lines of div.single-post p img.size-thumbnail {display:none;}
(Thumbnail images are given a class of size-thumbnail)
And since I've been an idiot, here's some more stuff. This is when creating a series of mini-posts, magazine style - but supposing you have it set up for 3 posts in a row across the page, and don't have a special deal on that day, or anything new to post? Supposing you only have one post that day? Rather than having a blank space where the other two posts would be, have some standard posts saying something along the lines of, 'More stock in soon' or whatever.
Before the loop
<?php query_posts('order=DESC&showposts=3&cat=7,8'); ?>
The loop
<?php if ( in_category(7) ) {?>
<div class="index-box" id="post-<?php the_ID(); ?>">
<?php ;}
else {?>
<div class="more-soon" id="blah-<?php the_ID(); ?>">
<?php ;} ?>
content
</div>What this does.
If there are posts in category 7 (your goods for sale category) then display those posts - otherwise display a different div from category 8 with a background image that reads, 'More goods in stock soon.'
Create several posts in category 8, and backdate them so that they're the oldest posts by a long margin. That way they'll always be shown last.
Not rocket science, but one of those useful little snippets it's sometimes good to know :-)
I guess I better let go of your neck now ;)
Cheers for your post :)
This topic has been closed to new replies.
