Best way to do an "art gallery"?

[Psymon]

I'm putting together a book -- or, rather, a section of a book -- with a bunch of writings by different authors, and as it turns out one of them was also quite a proficient artist, too, and it would be nice to include a selection of his paintings. I'm not sure about the best way to go about it, though. Like, if they were all in "portrait" format, then I would just make them all full-page images, but there's only a few that are portrait, most are in landscape orientation, not to mention some are long and skinny, others almost square-ish.

Any suggestions on what the best way to put together a section of a book that's essentially page-after-page of images like that?

And I gather that nobody has ever come up with a decent, workable way to provide captions underneath each image, eh? I just figured that I'd have one image per page, and on the previous (or next) page provide the details about that image -- unless someone has any better thoughts/solutions.

[odedta]

There are few ways to add captions to images, depends for which ePub version you're aiming for.

[Psymon]

Originally Posted by odedta

There are few ways to add captions to images, depends for which ePub version you're aiming for.

EPUB2, mainly -- although this does actually relate to that book we were discussing in another thread, that had the audio file in it, and which I would need to convert to EPUB3. However, I'm definitely more comfortable working in 2, and can foresee doing another book down the road in which I could implement a similar "gallery" (or whatever you want to call it -- an "art book" or whatever), and so if there's a reasonable way to do it in 2, I guess that's what I'd be most interested in.

With that said, if only out of curiosity, is what can be done with 3 significantly better?

[DaleDe]

Originally Posted by Psymon

I'm putting together a book -- or, rather, a section of a book -- with a bunch of writings by different authors, and as it turns out one of them was also quite a proficient artist, too, and it would be nice to include a selection of his paintings. I'm not sure about the best way to go about it, though. Like, if they were all in "portrait" format, then I would just make them all full-page images, but there's only a few that are portrait, most are in landscape orientation, not to mention some are long and skinny, others almost square-ish.

Any suggestions on what the best way to put together a section of a book that's essentially page-after-page of images like that?

And I gather that nobody has ever come up with a decent, workable way to provide captions underneath each image, eh? I just figured that I'd have one image per page, and on the previous (or next) page provide the details about that image -- unless someone has any better thoughts/solutions.

One way to add captions that should work fine is to place the image inside an SVG where the canvas is large enough to hold the caption and the caption would be done as text inside the SVG.

Other ways include a DIV that includes both the image and the caption and then is set in CSS to avoid splitting. This may or may not work.

Dale

[odedta]

EPUB3 is using HTML5 you could use this.

As for captions under an image, what's wrong with this?

  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>

As for the gallery part, what kind of gallery are you looking for? if you're looking for a slider or a carousel, that uses Javascript and if you're making an EPUB2 file, it won't be valid since Javascript is not in the IDPF specifications for EPUB2, it might work, but it won't be a valid EPUB file.

Otherwise I would suggest a grid system like the one bootstrap uses if the images are small, if they are medium or big then you should put 1 in each page. Keep in mind that there are a variety of screen sizes so putting two medium images in one page could result in 1 image per page in small devices etc. If you make an EPUB3 file you could use CSS media queries to account for the changes in screen sizes.

[Psymon]

Good morning, thanks for the replies, guys -- interesting suggestions. Regarding what you were saying, Dale, about using SVG, I did think about that, actually -- you might recall a thread on here that I started quite some time ago, regarding "full-page images with text on top" -- but I think that's perhaps a bit more complicated and involved than what I was hoping for. I'm certainly not really looking for anything overly fancy (as Oded asked about), and the more I think about it, the more I think that I might just skip the idea of having a caption, and instead put the info about each painting on either the previous or following page, and then include the painting's title, year it was done, and medium as well (i.e. more info than just a short "caption").

And so each page with a painting would just be a single image -- and I guess that's basically where I'm not so sure what to do. Like, if the image is in portrait format, then I guess the best thing to do would be to do it up like all my other full-page images (with the SVG code and stuff), but if the image is in landscape orientation, would I then just add it in using a simple <p> tag? In fact, as I'm writing this, I think I would do up each painting as a separate file, put the painting (image) first on the page -- these are all rather high-resolution images, by the way, all over 1200px in their longest side -- then put a page break after it, and then on the following page put the info about that painting. I suppose I could do all the paintings in one single file, too, but I guess I'm thinking that doing them separately would help ensure that each image is guaranteed to be at the beginning ("top") of a page, and not break in half and flow over to the next page.

Did I just answer my own question? Ha ha... if you have any thoughts on that -- i.e. full-page SVG images for those in portrait orientation, and a simple <p> tag for those in landscape, or anything else I mentioned here -- fire away!

[odedta]

SVG way:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Cover</title>
  <style type="text/css" title="override_css">
  @page {
    padding: 0;
    margin: 0;
    }
  body {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  </style>
</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 768 1024" width="100%">

    <image height="100%" width="100%" xlink:href="../Images/cover.jpg"/>
    <text x="5" y="1024">Image Caption</text>
  </svg>
</body>

</html>

Regular way (HTML4.01/EPUB2):

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Cover</title>
  <style type="text/css" title="override_css">
  @page {
    padding: 0;
    margin: 0;
    }
  body {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  .image {
    width: 100%;
  }
  </style>
</head>

<body>

    <img src="../Images/cover.jpg" class="image"/>
 		
</body>

</html>

Regular way (HTML5/EPUB3):

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Cover</title>
  <style type="text/css" title="override_css">
  @page {
    padding: 0;
    margin: 0;
    }
  body {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  .image {
    width: 100%;
 }
  </style>
</head>

<body>

<figure>
  <img src="../Images/cover.jpg" alt="Cover" class="image">
  <figcaption>Fig1. - Aan image caption.</figcaption>
</figure>
 		
</body>

</html>

Did you consider using a fixed layout epub? that way you can have exactly what you want.

[DaleDe]

Your SVG way does viewBox="0 0 768 1024" and then sets the images to the exact same size. This places the caption on top of the image itself. Better to set the image to something like 700 x 1024 with preserve aspect ratio. This leave 68 pixels for the caption.

Dale

[Psymon]

I can see the SVG thing working for images that have a 3:4 aspect ratio, but what if they don't? Like I said, most of my images are in landscape orientation, only a couple or three are in portrait.

Re fixed layout, I've never done one of those -- this isn't for a whole book, but basically just one chapter. Can you put a fixed layout section within a "regular" ebook?

[DaleDe]

That is why I said preserve aspect ratio with the SVG. This will preserve the original ratio no matter what the size of the page really is. It uses the largest dimension that fits to determine the actual size. You specifically turned it off in the example you posted.

Dale

[Psymon]

Originally Posted by DaleDe

That is why I said preserve aspect ratio with the SVG.

What's the code for that, to preserve aspect ratio?

Sorry if I'm a bit clueless today -- I've got some weird bug and took some painkillers, so I'm rather "dopey." :/

[odedta]

Originally Posted by DaleDe

That is why I said preserve aspect ratio with the SVG. This will preserve the original ratio no matter what the size of the page really is. It uses the largest dimension that fits to determine the actual size. You specifically turned it off in the example you posted.

Dale

+1

Yeah Dale, that was my bad, eventually when he would try this example he would see the error and correct it.

@Psy: You can find values for preserveAspectRatio here

As for your fixed layout epub question the answer is no, you either have a whole fixed layout ebook or you have a reflowable one.

[DaleDe]

Originally Posted by Psymon

What's the code for that, to preserve aspect ratio?

Sorry if I'm a bit clueless today -- I've got some weird bug and took some painkillers, so I'm rather "dopey." :/

preserveAspectRatio="xMinYMin meet"

If you want it centered the use preserveAspectRatio="xMidYMid meet"

I would use xMidYMin to center horizontally and place at the top of the viewbox.

See our wiki on SVG or http://www.w3.org/TR/SVG11/coords.ht...RatioAttribute


Dale

[bobmcconn]

I believe i have a similar, albeit I suspect much more basic, question/problem. 1. my prior knowledge of ebook production is nil; 2. I work with a team of epidemiologists who've worked on a long term study for ~ 35 years. I've created a set of rather detailed graphs that summarize each woman's history in the study. While once upon a time everyone just used PCs to "look" at the data..now, for good reason, members of our group would like to be able to use their iPad, nook, kindle etc. There are 221
women - hence 221 graphs similar to this: https://www.facebook.com/photo.php?f...8&l=24ad70bd73. While the outlining program i used can create a mobi file - the file seems awfully huge and cumbersome. A chm version of the files is ~ 65K, the mobi file ~ 160K. When i attempted to use calibre to convert the file to epub, the conversion worked..after a fashion, but the resolution of the graphs was completely degraged/smudged. I'm sure there's an option to tell Calibre NOT to reduce image size/quality but i haven't twigged it yet. I think all i really want/need is a fixed layout format w/ a index/table of contents to each graph and a page (landscape) for each. Any and all suggestions - above and beyond rtfm - would be most gratefully appreciated.
thanks for your indulgence,
bob mcc.

[DaleDe]

Certainly the other comments in this thread should help you. A mobi file of 160K is not a large file. It should be fine. As to the ePub, the Calibre edit command or a copy of Sigil (a free download) can be used to edit the ePub and replace the pictures with higher resolution versions pretty easily from your originals. A fixed layout format depends solely on a very few readers that can read that format and are generally a lot more work. You are better off with just letting the pages appear as you will likely get 1 per page anyway or you could force page breaks if you really need to.

Dale