Aligning Images in WordPress
eileen 15th June 2010
Here is a very simple way to align images that are linked to other pages when using Word Press.
Goal: Images side by side on the page, which would all link to seperate pages on another url.
- I edited the images to a size that I wanted before I uploaded them into WordPress.
- I inserted the images separately (forget the “insert gallery” option if you want clickable images).
- In the editing image function I included the link url of where I wanted the image to link to.
- Also in the edit image function I set the alignment to left in each image.
The site is a work in progress, but here is a link to the page http://www.gildajoyce.de/gilda-joyce-bucher
If you need any help let me know.
eileen@eileenlonergan.com
July 7th, 2010 at 10:59 pm
Thanks for the tip, it worked great for me. I always wondered how to do this, now I know!
July 17th, 2010 at 9:42 am
Thanks for the tip, Eileen. One thing that has been very frustrating to me in working with wordpress is figuring out how to align images/photos when I want a bullet list to the right. The bullets invariably overlap the right edge of the photo and I always have to ask someone else to fix it for me – but I don’t know what, exactly, they do to create the space between the photo and the bullet points. My webmaster tells me it seems to be a “glitch” in wordpress.
Anyway, I really like the look of the end result you show above. I have two questions:
1) How do you set the margin around each image so there is space around each image?
2) When you say you set the alignment to left for each image, I would think that you’d get the images stacked on top of each other and left justified, instead of in a horizontal row like I see here. I haven’t tried this yet so I hope it works!
July 17th, 2010 at 10:40 am
Thanks for reaching out Yvonne. For the example in this post I didn’t use any margins, so I was slightly amazed that they looked so nice. I also thought that the images would be stacked!
I ran into the bullet issue once before and I had to use a little html code to get things looking the way that I wanted. Let’s try this first, go into WordPress and in the Edit Post click on the image that you want to edit, then click on the little image icon that shows up. Along the top of the box that opens you have two options (default is Edit Image), select Advanced Settings. Under Styles put this line of code margin-right: 10px; you may need to play with the 10.
Please let me know if that works. If not we can try and brain storm another option.
December 10th, 2010 at 5:22 am
Eileen..U Rock! U really helped me out with these tips. Many thanks for taking the time to post!
December 14th, 2010 at 1:22 pm
Carmen, your site looks great! Good luck.