Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages » Excerpts, Read more, Pagination »

How can I add an image to a post and have it "float" so the text wraps around it?


  #1  
Old Oct 22, 2009, 01:05 AM
scrubbs
 
22 posts · Apr 2009
This seems really basic but with how this theme works I cannot seem to figure out where to put the coding or how exactly to write it. In my current situation, I want to be able to add multiple pictures to a post. The first will be top left (3 lines down from top), the second, middle right and the third, bottom left. The text of my post will write around these pictures. The way I understand it, you have to set the pictures so that they "float" so that the text doesn't push them around but wraps around them.

Am I totally off here?

Anyone have a suggestion for me?

My site is http://www.InspirationalParenting.com
  #2  
Old Oct 22, 2009, 06:36 AM
jdmeades
 
3 posts · Oct 2009
I think you just need to put some CSS into the IMG tag. For example:

<img class="some_class" style="float: left;" src="some-image">

This will float the image to the left of the column or page that contains your text. Notice I have included the 'style' attribute after the 'class' of the HTML tag because the browser will render the information in order. If you put the 'style' attribute before the 'class' attribute the content of the 'class' attribute will be rendered after the style attribute and you will not see your styling.

I'd also include some padding around the image so the text does not look as though it is colliding with the image. For example:

<img class="some_class" style="float: left; padding-top:10px; padding-right:10px; padding-bottom:10px;" src="some-image">

You can float an image left or right.

Hope this helps but others might want to add more.

Cheers

Jeremy
  #3  
Old Oct 22, 2009, 06:40 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
use class="alignright" or class="alignleft'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Oct 22, 2009, 07:18 AM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
What's wrong with just using the built-in photo editing tools in Wordpress? Once the image is inserted into the post, you just click on it and click on the little edit image icon that appears, and from there you choose alignment, add caption, etc. Then click Advanced, and under Image Properties you can add horizontal and vertical space. Just put in 5 or 10 or whatever (without the px), to give some nice white space around the image. Works fine. You can also scale the image nicely.

If you add the Scissors plugin you can do more. The next release of WP, 2.9, will have more image editing built-in.
  #5  
Old Oct 22, 2009, 07:32 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Wow, paulae that's great! I didn't know you could do that. I guess I've been spending so much time with Atahualpa, I haven't been playing with all the WordPress features.

See, you can teach an old dog new tricks!
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Oct 22, 2009, 08:55 AM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7


I thought you were going to tell the other person "this is not a theme question!" and send him to wordpress.org.

I'm really excited about what's in the pipeline for WP 2.9. A lot of the things we're having to do with plugins now will be part of the new Wordpress.

I guess theme developers will have to make sure their themes will work with 2.9. Do you know if Flynn has taken that into account for Atahualpa and Themeframe?
  #7  
Old Nov 20, 2009, 03:08 PM
casahac
 
24 posts · Nov 2009
Atahualpa 3.4.4, Wordpress 2.8.6, php 5.2.5

This is probably another rookie error on my part, but a thump on the head here would be appreciated.

I put my first image into a post. On the category pages, where the image should appear in the post, I get the caption showing below the little blue box with the (?) inside it, but if you go to the event calendar in the right sidebar and click on November 21, you get the whole post with the image showing.

(It's at peacefresno.org, the upcoming event for Nov 21.)

How do I get the image to show on the category page posts as well?

Thanks,

casahac
  #8  
Old Nov 21, 2009, 02:32 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try using the full html address so instead of
HTML Code:
../wp-content/uploads/2009/11/daybreakbookcover.jpg
use
HTML Code:
http://www.peacefresno.org/wp-content/uploads/2009/11/daybreakbookcover.jpg
tin the post
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Nov 22, 2009, 02:04 PM
casahac
 
24 posts · Nov 2009
I uploaded the image by URL, inserting this:

http://www.peacefresno.org/wp-conten...kbookcover.jpg

When I open the upcoming events page, I get the blue question mark again. When I click on the block where the image should be appearing and copy the image address, it gives me this:

http://www.peacefresno.org/category/...kbookcover.jpg

It adds the category/ into the address...... I need to keep that from happening somehow.

Thanks,

casahac
  #10  
Old Nov 22, 2009, 07:55 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
check the post itself, it is generating

<p style="margin: 0.0px 0.0px 12.0px 0.0px; text-align: center; font: 12.0px Helvetica;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif;"><strong><span style="font-weight: normal;"><a href="../wp-content/uploads/2009/11/daybreakbookcover.jpg"><img class="alignleft" title="Daybreak Cover" src="../wp-content/uploads/2009/11/daybreakbookcover.jpg" alt="" width="200" height="308" /></a></span>Da</strong><strong>ybreak:&nbsp; Undoing the Imperial Presidency</strong></span></p>

notice the '../wp-content'? change that to teh full url
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Nov 24, 2009, 01:41 PM
casahac
 
24 posts · Nov 2009
I think we're getting to the root of the problem here.

When I click on the "Edit HTML Source" button, I get an open, empty box that I can't do anything with. No HTML Source showing and no ability to put any HTML code into it.

Do I need to reinstall something here?

Cheers,

casahac
  #12  
Old Nov 24, 2009, 04:29 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what is in the post when you use the visual editor? What is your 'role' (i.e. administrator, editor etc)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Nov 25, 2009, 12:34 PM
casahac
 
24 posts · Nov 2009
Bingo!

I am the admin, but the problem here is that for whatever reason Safari won't let me edit the html. When I switched over to Firefox I can edit the html. Everything is working the way I want it now.

Thanks so much for your help and patience!!

casahac
  #14  
Old Nov 25, 2009, 12:38 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What version of Safari? I use it all the time.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old Nov 25, 2009, 01:18 PM
casahac
 
24 posts · Nov 2009
Wow, now THAT was unexpected!

I'm running Safari 4.0.4 and Snow Leopard 10.6.2. When I open a post to edit it, it shows me the html for a second or two, then it switches over to WYSIWYG. If I click on the "edit html" button, as noted before, I get a big empty box that I can't do a diddly dang thing with.

Cheers,

casahac
  #16  
Old Nov 25, 2009, 01:40 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
If you would like. I'll take a look to see if it happens to me also. If so, send me a PM with an id and pw.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #17  
Old Nov 25, 2009, 02:09 PM
casahac
 
24 posts · Nov 2009
Done.

casahac
  #18  
Old Nov 25, 2009, 02:35 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
see my PM to you
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
float, images, pictures, wordwrap

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Static text/banner image before posts in "posts page" verbalicious Page & Category Menu Bars 14 Nov 12, 2010 06:27 AM
How to post on 2 seperate "Pages" or "Cats" TPR Atahualpa 3 Wordpress theme 18 Aug 4, 2010 09:24 PM
Archives Page-How can I add the date before the post title when using "postbypost"? fromtheranks Atahualpa 3 Wordpress theme 8 Jul 25, 2009 10:52 AM
request: please add "links.php" page template. dhani Atahualpa 3 Wordpress theme 0 May 22, 2009 04:36 AM
How to style "post icon" and "post comments" text Whatsthatcat? RSS, Feeds & Subscribing 3 Apr 1, 2009 10:41 AM


All times are GMT -6. The time now is 03:54 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.