Looking for old thread about images "side-by-side"

[GrannyGrump]

I vaguely remember a thread about displaying images side-by-side, by using display: table-cell, and the two adjacent cells would dynamically adjust to the image widths. I was hoping for some details of how to tweak such.

Unfortunately my pitiful search skills have not tracked it down. Senior moments all day today!

Does anybody remember this?

[RbnJrg]

Originally Posted by GrannyGrump

I vaguely remember a thread about displaying images side-by-side, by using display: table-cell, and the two adjacent cells would dynamically adjust to the image widths. I was hoping for some details of how to tweak such.

Unfortunately my pitiful search skills have not tracked it down. Senior moments all day today!

Does anybody remember this?

Old thread? It was just three weeks ago

https://www.mobileread.com/forums/sh...4&postcount=21

That was for Kindle. If you are planning to use it in epub, use a real table. Post again if you have some issues to implement that (with real tables).

Regards
Rubén

[patrik]

(If I may hijack the thread a bit... Every now and then I take a peek into some of the books in the library (mostly by GrannyGrump) to learn and get inspiration how to do things. But I have yet to find any that contains plenty of images in various sizes used in different ways. Any tips?)

[RbnJrg]

Originally Posted by patrik

(If I may hijack the thread a bit... Every now and then I take a peek into some of the books in the library (mostly by GrannyGrump) to learn and get inspiration how to do things. But I have yet to find any that contains plenty of images in various sizes used in different ways. Any tips?)

"Three men in a boat" by Jerome K. Jerome:

https://www.mobileread.com/forums/sh...ad.php?t=48377

And all other books from Jerome are full illustrated. Granny did a great job with them. But you only will be able to do magic with images only by working with epub3 and css3:

https://www.mobileread.com/forums/sh...d.php?t=315647

[GrannyGrump]

Thank you Rubén. I said the day was full of senior moments, I guess it was even more severe than I thought.

@patrik -- If you are working with epub2, take a look at Jellby's "Tom Sawyer" for some creative css (I stole some of his ideas to use for "Huckleberry Finn" and "Roughing It")
https://www.mobileread.com/forums/sh...d.php?t=135679

[BetterRed]

Originally Posted by GrannyGrump

Thank you Rubén. I said the day was full of senior moments, I guess it was even more severe than I thought.

here you go

BR

[GrannyGrump]

Oh, this is great! We can just plug ourselves into chargers, and Bob's yer uncle.

Where can I sign up?

[patrik]

(Thank you kindly RbnJrg and GrannyGrump! )

[RbnJrg]

Originally Posted by GrannyGrump

Thank you Rubén. I said the day was full of senior moments, I guess it was even more severe than I thought.

You are welcome Granny. And my words were a joke ; you are a granny, but of young years.

[BetterRed]

Originally Posted by GrannyGrump

Oh, this is great! We can just plug ourselves into chargers, and Bob's yer uncle.

I'd need a triple phase charger

[kso]

@GrannyGrump:

Hello young lady

I'm the OP who had the question about images appearing differently in the Kindle previewers 2.9 and 3.29 (some time ago), which led to Rubén handing me the solution on a silver platter: using CSS tables.

For the moment I've decided to use this in the Kindle HTML _only_, as it's not _needed_ for EPUBs and, due to Adobe Digital Editions (ADE) readers blowing a fuse when faced with @media queries, it would actually be a limitation when using small screens such as early smartphones.

I now use full width images by default, and "only" readers reacting appropriately to @media queries see code that displays images in CSS tables for screens that are wide enough (I say "only", but in fact it works on most of the readers I tried).

In my Kindle CSS file I first have the full width image code, followed by @media queries. This works well on the devices I have access to and in both previewers 2.9 and 3.29.1.

For EPUBs I use a secondary CSS file because of ADE. As soon as ADE sees a @media query it ignores the file completely.

If I use CSS tables without @media queries ADE 3.0 totally destroys the display (it overlays all the images into a neat stack so that you see only the topmost two images and possibly fragments of the others depending on their size), and ADE 4.5 did something else that requires either a thick skin or a lot of good natured humour.

So here's the HTML code, first for EPUBs followed by Kindle's:

EPUB:

<div class="imgcatrow">
<div class="stblk62 stblkfbl">
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
<div class="stblk38 stblkfbr">
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
<div class="imgcatrow">
<div class="stblk38 stblkfbl">
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
<div class="stblk62 stblkfbr">
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>

And the HTML for Kindles:

<div class="imgcattable"> <! -- Kindle only -->
<div class="imgcatrow">
<div class="stblk62 stblkfbl">
<div class="kfix"> <! -- Kindle only -->
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
<div class="stblk38 stblkfbr">
<div class="kfix"> <! -- Kindle only -->
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
</div>
</div>
<div class="imgcattable">
<div class="imgcatrow">
<div class="stblk38 stblkfbl">
<div class="kfix">
<img class="stimgfit" src="../img/small.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
<div class="stblk62 stblkfbr">
<div class="kfix">
<img class="stimgfit" src="../img/large.jpg" alt="" />
<span class="stblkcaption">Caption</span>
</div>
</div>
</div>
</div>

CSS:

Both use some utility classes such as .stblkfbl (floats an object to the left), .stblkfbr (floats right) and .stimgfit (fits an image to 100% of its wrapper. For the sake of brevity I have removed some of the settings such as margins etc.


EPUB CSS:

.imgcatrow {
overflow:auto;
clear:both;
}
.imgcatrow .stblk38, .imgcatrow .stblk62 {
width:100%;
clear:both;
}

EPUB CSS with @media queries:

/* this file is loaded by EPUB only, but ignored by adobe digital editions */
/* and readers based on Adobe's RMSDK because they dont't do @media queries. */

@media all and (min-width: 480px) {
.imgcatrow .stblk38 {
width:36%;
}
.imgcatrow .stblk62 {
width:60% !important;
}
.imgcatrow .stblkfbl.stblk62 {
margin-right:2% !important;
}
.imgcatrow .stblkfbr.stblk62 {
margin-left:2% !important;
}
.imgcatrow .stblkfbl, .imgcatrow .stblkfbr {
clear:none;
}
}

Kindle CSS:

@media amzn-kf8 {
.imgcattable {
display: table;
width: 100%;
}
.imgcatrow {
display:table-row;
}
.imgcatrow .stblkfbl, .imgcatrow .stblkfbr {
display:table-cell;
vertical-align:top !important;
float:none !important;
}
.imgcatrow .stblk62 {
width:60% !important;
}
.imgcatrow .stblk38 {
width:38% !important;
}
.imgcattable img {
display:block !important;
width: 100%;
}
span.stblkcaption {
display:block;
}
}

Klaus