Add to images next to each other
-
I can´t add to pictures next to each other, the pictures are “standing” so it should be enough space, but they just keeps coming above each other.
I´m using the radcliff theme
The blog I need help with is: (visible only to logged in users)
-
We aren’t able to see your website because it’s private, so we can’t diagnose anything for you. Since each theme has different CSS that controls how things behave, you might want to close this topic and repost it in the Theme forum or the CSS forum.
-
Oops, sorry I see you DID post in Themes. Here’s what I’ve done to make images align horizontally in Radcliffe.
When I use the Radcliff theme, here’s what three images in a row look like:
The images need to be small enough that they will all fit within the post container side by side. When you look at the Text view of your post editor, the code for each image needs to be run together without any spaces or lines between them. You’ll see in the example below that the first image is left aligned, the second has no alignment at all and the right has right alignment. I adjusted the spacing between the images by adding a right margin to the first image.
<a href="https://theearthscrust.files.wordpress.com/2015/02/organic-loam.jpg"><img class="alignleft wp-image-22 size-full" style="margin-right: 100px;" src="https://theearthscrust.files.wordpress.com/2015/02/organic-loam-e1424775767686.jpg" alt="organic-loam" width="250" height="250" /></a><a href="https://theearthscrust.files.wordpress.com/2015/02/7773.jpg"><img class=" size-full wp-image-24 alignright" src="https://theearthscrust.files.wordpress.com/2015/02/7773.jpg" alt="7773" width="250" height="250" /></a><a href="https://theearthscrust.files.wordpress.com/2015/02/screened-loam-topsoil.jpg"><img class=" size-full wp-image-27 alignnone" src="https://theearthscrust.files.wordpress.com/2015/02/screened-loam-topsoil.jpg" alt="Screened-loam---topsoil" width="250" height="250" /></a> -
You can also use the Gallery feature for this purpose. The Gallery will span the full width of the content posting area and the images will automagically be resized to fit. See here: https://en.support.wordpress.com/images/gallery/
Let us know if you need any help with that.
-
I kinda fixed the problem when i changed the theme inner content width, but i still want to change the space between the images. Right now there´s a big white gap between them :)
Thank you so much for taking time!
-
@ viktorkrantz,
Right now there´s a big white gap between them :)
Pairing images flush and centered used to be a lot easier on WordPress.com websites. For reasons which remain obscure, the process was made more difficult and more mysterious two or three years ago.
To make two images display flush center (touching) and centered do the following:
1. Upload each image, place them next to each other with cut and paste (if necessary), and make sure the combined width of the pair is small enough to display the pair side by side. Main column width is theme dependent, and post column width may be different than default page column width. You may also have to include borders in the calculation.
1. Set the alignment on each image to “none” at (image) edit > image details. Don’t skip this step, and if you cut and paste one of them to move it, you’ll have to reset it to align none. If you use left or right align instead, the alignments might interfere with adjacent text.
2. Highlight both images. In practice, I find that highlighting only the right image is sufficient.
3. Click on either the small “p” or the “a” at the bottom left of the post editor window. Don’t ask me what the letters stand for, or why each of them gives the same result with regard to aligning paired images.
4. Align center, using the align center tab in the editor menu bar.
If you want the pair aligned left or right, just modify the fourth step accordingly.
-
-
-
You’re welcome. Here’s an alternate, easier method that I use when I already know the maximum combined width (including borders) allowed by the theme. *
1. Upload the first image, and then upload the second image below the first image.
2. Resize them if necessary so that the combined width will be sufficiently small. I like them to have the same height, but this is unnecessary.
3. Set each image to align none.
4. Cut the first (left) image, click “align center” in the post editor admin menu, and paste the image. It will be centered.
5. Cut the second image, and paste it to the right of the first image. Voilà. (Note that without setting each image to align none you won’t be able to paste the second image beside the first. )
* In practice I’ve found that the combined width of side-by-side, flush, paired images is always less than the column width given in the theme support page. I don’t know where to find the column width in the administrative area of a website anymore.
- The topic ‘Add to images next to each other’ is closed to new replies.
WordPress.com Forums 