Images side by side in EPUB

[swepub]

Hi all

Is it posssible to have two or more images side by side in an EPUB?
If yes, how does a sample code look like?
If no, is the best option to make merge two images into one in Photoshop?

[Turtle91]

You can use the float command in your css file:

CSS
.images  {clear:both; margin:2em 1em}
.floater {float:left; width:20%; margin:0}

HTML
<div class="images">
  <img class="floater" alt="" src="../Images/img_1.png"/>
  <img class="floater" alt="" src="../Images/img_2.png"/>
  <img class="floater" alt="" src="../Images/img_3.png"/>
  <img class="floater" alt="" src="../Images/img_4.png"/>
</div>

-OR-

CSS
.images     {clear:both; margin:2em 1em}
.images img {float:left; width:20%; margin:0}

HTML
<div class="images">
  <img alt="" src="../Images/img_1.png"/>
  <img alt="" src="../Images/img_2.png"/>
  <img alt="" src="../Images/img_3.png"/>
  <img alt="" src="../Images/img_4.png"/>
</div>

I prefer the 2nd one...it's a little cleaner.

[Quoth]

It also works without float. An enclosing p or div can center them if the css for that has suitable CSS.
I'd put a class on each image to set the size. If you set the height all the same it looks better. The image class can also space them or have no spacing (margin and padding 0 in case set elsewhere).

[DiapDealer]

Moved this to the EPUB forum since it's not really a Sigil topic.

[swepub]

Originally Posted by Turtle91

You can use the float command in your css file:

CSS
.images  {clear:both; margin:2em 1em}
.floater {float:left; width:20%; margin:0}

HTML
<div class="images">
  <img class="floater" alt="" src="../Images/img_1.png"/>
  <img class="floater" alt="" src="../Images/img_2.png"/>
  <img class="floater" alt="" src="../Images/img_3.png"/>
  <img class="floater" alt="" src="../Images/img_4.png"/>
</div>

-OR-

CSS
.images     {clear:both; margin:2em 1em}
.images img {float:left; width:20%; margin:0}

HTML
<div class="images">
  <img alt="" src="../Images/img_1.png"/>
  <img alt="" src="../Images/img_2.png"/>
  <img alt="" src="../Images/img_3.png"/>
  <img alt="" src="../Images/img_4.png"/>
</div>

I prefer the 2nd one...it's a little cleaner.

I used your 2nd one and it works great. Just one more question - can you adjust the space between the images and center the two images?

[Quoth]

Have the outer div have CSS in its class to set left & right margins and padding 0 and center

HTML

<div class="centred-stuff">
  <img class="img-1" alt="" src="../Images/img_1.png"/>
  <img class="img-2" alt="" src="../Images/img_2.png"/>
  <img class="img-3" alt="" src="../Images/img_3.png"/>
  <img class="img-4" alt="" src="../Images/img_4.png"/>
</div>

Using <p class="centred-stuff"> (with a closing </p>) can work well instead of div and suit non-heading centred text.

I would use <p>

CSS

.centred-stuff {
   margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center
}

.img-1 {
  height: 100 px;
  width: auto;  /* or exact pixels */
  padding-right: 5px;
}

No padding on the last image on the line. 
If you use "pt" instead of "px" some renderers might change the image size as user changes font size!

You can space images in the one <p> tag using a single space.

[Turtle91]

Originally Posted by swepub

I used your 2nd one and it works great. Just one more question - can you adjust the space between the images and center the two images?

Yes, just set the margin to auto and define a specific width for the div: width = image(s) + padding
5+200+5 + 5+200+5 = 420px

CSS
.images     {clear:both; width:420px; margin:0 auto}
.images img {float:left; width:200px; padding:0 5px}

HTML
<div class="images">
  <img alt="" src="../Images/img_1.png"/>
  <img alt="" src="../Images/img_1.png"/>
</div>

This is a little less dynamic as you're locking in the image size in px instead of leaving it as a %. If you really need it to be dynamic, replace the px with % like this:

.images     {clear:both; width:50%; margin:0 auto}
.images img {float:left; width:45%; padding:0 2.5%}

You can set the amount of screen space the images take up by changing the % in the .images width...for example, width:50% => width:75%


Edit:
If the different values for width are confusing just remember that the width refers to the container’s width. In this case, the img width is 45% of the containing div. The total width of the images + padding equals 100% of the div width.
For 2 images:
2.5%+45%+2.5% + 2.5%+45%+2.5% = 100%
For 3 images:
1.66%+30%+1.66% + 1.66%+30%+1.66% + 1.66%+30%+1.66% = 100%

The width of the div is the % of ITS container (the body/document)

[galax]

Greets,

This post help me getting some images right.

What did is to use the code using percentage soI don't have to calculate measures.

My only problem now is that both images in the div aren't centered vertically. The 'div' is pushed to the top leaving a wide gap at the bottom.

Is it possible to align the images vertically as well?

Another problem that I faced, how does the ereader understand page turn with images occupying roughly the size of the screen?

Should I use '<newpage>' (mm... this might be latex), or <\br> after every div containing two images?

I want the ereader understand clearly that the two images should be one and exactly one turn page.

Thanks in advance.

[Quoth]

Put the two images in one separate HTML file. Then there is page turn.

<newpage> doesn't exist. The 100% reliable way for a new page is a start of HTML file.
It's <br /> not <\br> and it simply does a newline (break) without invoking any <p> settings. Mostly should be avoided as CSS is used to change paragraph spacing, not inserting <br />
A <br /> might be handy to break a heading tag content on to two lines as you can't use a <p> and two separate <h2> tags or whatever can cause spurious spacing, extra TOC entry or even a page break on a conversion.

Never use <br /> to attempt a page break (a new file is more reliable than any "break" directive) or for paragraph or image spacing. Use css class with tag to set spacing.

Vertical spacing may not work well to centre. The margin-top may not work on first element of a file, but padding-top will. margin-top and margin-bottom work between elements, not at top and bottom of file in most cases.

[RbnJrg]

Are you working under epub2 or epub3? If you are working with epub3, then by far the simplest and easier solution is to employ a flex-box; it's a piece of cake to get what you want, since the flex-box does all the dirty work, you don't need to calc anything (even you don't need to use margins).

[Turtle91]

Originally Posted by RbnJrg

Are you working under epub2 or epub3? If you are working with epub3, then by far the simplest and easier solution is to employ a flex-box; it's a piece of cake to get what you want, since the flex-box does all the dirty work, you don't need to calc anything (even you don't need to use margins).

flex-box is definitely easier/better as long as the devices displaying it are epub3 compatible. If there is any chance someone will want to read it on an epub2 device (or a device that only partially supports epub3) then you will also want to provide fall-back coding otherwise it could end up looking really basic/ugly. There are methods for vertical alignment under epub2 but it takes some creative css. Here are a couple of threads discussing the topic:

https://www.mobileread.com/forums/sh...vertical+align

https://www.mobileread.com/forums/sh...ertical+center