I am currently writing a website for my wife using wordpress and a theme called prophoto. On the home page I want about a 100 images all running down the page with two images per line… Simply from the Wordpress dashboard going into the correct ‘page’ and adding images doesn’t work as the images only go one per line.. I found a work around by adding the following lines to the html for each individual image.
<div style="display: inline-block; margin-right: 5px;">
<img class="pp-insert-all size-full alignnone" src="http://wp-content/uploads/2012/01/helen1.jpg" alt="" width="395" height="395" /></div>
However to do this 100 times will be a nightmare and I’m sure a bloated way of doing things.. Is there a better way of doing this through adding a line to the ‘custom CSS’
JUst to clarify. If I remove the alignnone class it does then put the images side by side rather than stakced on top of each other. However it does not leave any margin between the images and there is no option to remove the align class it's either alignnone, alignleft or alignright. So using the inbuilt wordpress editor is not an option. I need to manually code it using HTML.
My question is rather than manually write the code for 100 images can I simply have a long list of the image locations all wrapped neatly in a div that has been defined through the CSS..
By 'naked' I meant with no styles assigned to them.
So "alignnone" is what is making them stack vertically. Removing it fixes the stacking issue, but it then reveals an issue where there is no padding between them.
Thanks but it still stacks them and also the other problem is that the images running down the left hand side of the screen need a right margin of 5px whilst the images running down the right hand side of the screen meed no margins as the edges of the images need to line up to the edges of the screen.
It only stacks them vertically if there is not enough room for them to be side-by-side.
If each image is 395 wide with 10 pixels margin on each side, each image is taking up 415 pixels each, side by side, they need 830 pixels). So I can guess that your container is less than 830 pixels wide.
I can keep guessing at your page dimension requirements, but this would go much quicker if you laid it out for me ahead of time...
Here is another sample that shows side-by-side images that are 395 pixels square.
The images with class=imglef have a 5px right-margin.
The images with class=imgright have no margins defined.
This presumes an 800 pixel wide container.