Arranging uploaded photos into a page
-
I can’t figure this out!
I have 8 Jpegs that I am using on my page.
Ideally, I would like 2 rows – 4 photos each.
Im ending up with photos all over the place though. So I currently have it as a long list of 8 photos- which I don’t want to leave it as.
Here is the link
http://yourorlandoconsultant.wordpress.com/buyers/Is it just me, or am I not able to highlight, drag and drop where I want the photos? That would be my easiest fix.
Ive tried to start with the first Jpeg.. add 2 spaces, then delete to move the second Jpeg up. However it doesnt end up posting there- 2 spaces away from the first Jpeg. It just ends up on some random area of the editor.
Help me. lol.
-
As near as I can tell, the photos should line up, if you insert each one into the page one at a time next to each other, with no returns. They look to be a size that would allow about four on a line.
-
Dawn,
the easiest thing to do, i’ve found, is to insert the images using the visual editor then switch to the code editor to get them exactly where you want them. In the code editor, you can put a space between each and put in a manual line break.
So, for what you have there, i would have the code look like this:
<a target="_blank" href="http://images.kw.com/docs/1/1/6/116416/1191250051273_first_time_homebuyer_tips.pdf" title="First Time Homebuyers"><img src="http://yourorlandoconsultant.files.wordpress.com/2007/10/first-time-homebuyers1.thumbnail.jpg" alt="first-time-homebuyers1.jpg" /></a> <a target="_blank" href="http://dawnpratt.yourkwagent.com/atj/user/AdditionalPageGetAction.do?addlPageName=mortCalc"><img src="http://yourorlandoconsultant.files.wordpress.com/2007/10/mortgage-calculator1.thumbnail.jpg" alt="mortgage-calculator1.jpg" /></a> <a target="_blank" href="http://images.kw.com/docs/1/1/6/116416/1191249666339_finances.pdf" title="Getting Your Finances in Order"><img src="http://yourorlandoconsultant.files.wordpress.com/2007/10/finances-in-order1.thumbnail.jpg" alt="finances-in-order1.jpg" /></a> <a target="_blank" href="http://www.mlsfinder.com/fl_mfrmls/dawnpratt/" title="search the MLS"><img src="http://yourorlandoconsultant.files.wordpress.com/2007/10/search-the-mls1.thumbnail.jpg" alt="search-the-mls1.jpg" /></a><br /> <a target="_blank" href="http://www.mlsfinder.com/fl_mfrmls/dawnpratt/index.cfm?action=listing_detail&property_id=O4762513&searchkey=61b51a1a-93f5-46a4-bee8-2f01a3078e00&npp=10&sr=1" title="Avalon Park Home"><img src="http://yourorlandoconsultant.files.wordpress.com/2007/10/featured-homes1.thumbnail.jpg" alt="featured-homes1.jpg" /></a> <img src="http://yourorlandoconsultant.files.wordpress.com/2007/10/for-sale-by-owner1.thumbnail.jpg" alt="for-sale-by-owner1.jpg" /> <a href="http://dawnpratt.yourkwagent.com/atj/user/BuyerFormGetAction.do" title="homebuyers form"><img src="http://yourorlandoconsultant.files.wordpress.com/2007/10/homebuyers-form1.thumbnail.jpg" alt="homebuyers-form1.jpg" /></a> <a target="_blank" href="http://www.bankrate.com/brm/rate/mtg_home.asp" title="mortgage rates"><img src="http://yourorlandoconsultant.files.wordpress.com/2007/10/daily-mortgage-rates1.thumbnail.jpg" alt="daily-mortgage-rates1.jpg" /></a> <a href="http://images.kw.com/docs/1/1/6/116416/1191252849067_Docs_for_Lender.pdf" title="documents for lender"><img src="http://yourorlandoconsultant.files.wordpress.com/2007/10/lender-info1.thumbnail.jpg" alt="lender-info1.jpg" /></a>Moving images around using the visual editor often results in duplicated code (i took out 2 extra lines of code that the editor had stuck in there unnecessarily), and that’s one of the reasons i prefer using the code editor.
If you paste the above code into the code editor screen, and the pictures still don’t fit 4 across, then they are too wide.
Also, you are probably aware of this, but the “For Sale by Owner” image does not have a link attached to it.
HTH :)
-
Wow, judyb12. You’re a whiz with HTML, that’s for sure.
I’ve struggled with this problem on occasion. Too many overlapping and ineffectual aligns=”left” and “right”, which make image alignment really clunky.
The simple workaround is to dump your four images onto a PowerPoint slide. Then line them up as you desire, do a “select all”, and then cut and paste them onto the clipboard of an image application like IrfanView. Save as a single combined image.
That gives you all the layout freedom you could want and will give you a smaller page size which is faster to load.
The only thing it won’t do is allow you to write separate hyperlinks for each of those images.
-
provided one has a Flickr account, all you need is: http://bighugelabs.com/flickr/mosaic.php
solution got via: http://justjennifer.wordpress.com
-
-
@options-thanks for the mention.:) Actually, you don’t even need to have a flickr account to use the Flickrtoys Mosaic Maker or any of the toys. If you register, you can upload photos from your own computer. The resulting mosaics can be quite large. I resized the ones on my Shutter Clutter page to 450 pixels wide to fit Cutline’s Body width+CSS border.
http://faq.wordpress.com/2006/09/25/how-big-can-my-images-be/If you have a flickr account, you can cut and paste the link for the small square or rectangular thumbnails from your flickr account, which is what I did on the All Thumbs page.
Each theme is a little different in how it handles images, so Preview is your best friend.
-
just a note for future explorers of this thread :D
the way dawnpratt did it in her blog can’t be done by http://bighugelabs.com/flickr/mosaic.php
the above link will suit you only if you don’t wanna link all the images individually. however if you don’t wanna link the images individually, then that link is way too cool!the way dawn did it is done the html way.
- The topic ‘Arranging uploaded photos into a page’ is closed to new replies.
WordPress.com Forums 