10-24-2014, 10:16 AM | #1 |
Chief Bohemian Misfit
Posts: 571
Karma: 462964
Join Date: May 2013
Device: iPad, ADE
|
Best way to do an "art gallery"?
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. |
10-24-2014, 11:43 AM | #2 |
Addict
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
|
There are few ways to add captions to images, depends for which ePub version you're aiming for.
|
Advert | |
|
10-24-2014, 12:06 PM | #3 | |
Chief Bohemian Misfit
Posts: 571
Karma: 462964
Join Date: May 2013
Device: iPad, ADE
|
Quote:
With that said, if only out of curiosity, is what can be done with 3 significantly better? |
|
10-24-2014, 05:44 PM | #4 | |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
Quote:
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 |
|
10-25-2014, 05:46 AM | #5 |
Addict
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
|
EPUB3 is using HTML5 you could use this.
As for captions under an image, what's wrong with this? Code:
<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> 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. |
Advert | |
|
10-25-2014, 06:07 AM | #6 |
Chief Bohemian Misfit
Posts: 571
Karma: 462964
Join Date: May 2013
Device: iPad, ADE
|
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! |
10-25-2014, 07:12 AM | #7 |
Addict
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
|
SVG way:
Code:
<?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> Code:
<?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> Code:
<?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. |
10-25-2014, 11:27 AM | #8 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
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 |
10-25-2014, 11:36 AM | #9 |
Chief Bohemian Misfit
Posts: 571
Karma: 462964
Join Date: May 2013
Device: iPad, ADE
|
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? |
10-25-2014, 12:56 PM | #10 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
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 |
10-25-2014, 01:02 PM | #11 |
Chief Bohemian Misfit
Posts: 571
Karma: 462964
Join Date: May 2013
Device: iPad, ADE
|
|
10-25-2014, 01:06 PM | #12 | |
Addict
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
|
Quote:
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. |
|
10-25-2014, 01:14 PM | #13 | |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
Quote:
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 Last edited by DaleDe; 10-25-2014 at 01:17 PM. |
|
10-29-2014, 05:37 PM | #14 |
Junior Member
Posts: 1
Karma: 10
Join Date: Oct 2014
Device: kindle, ipad
|
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. |
10-29-2014, 06:10 PM | #15 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
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 |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
"Save to disk" resizes and pixelates cover art | andredoubleu | Library Management | 2 | 08-27-2013 08:04 AM |
Buy an indie-store Kobo mini this week, get "The Art Forger" for free. | oj829 | Deals and Resources (No Self-Promotion or Affiliate Links) | 4 | 11-20-2012 01:37 PM |
Radio Dramatisation of Iain M. Banks' "The State of the Art" | HarryT | Deals and Resources (No Self-Promotion or Affiliate Links) | 4 | 05-01-2011 07:27 PM |
Request to Test "Sun Tzu's The Art of War" eBook | ahi | Workshop | 41 | 05-20-2009 12:12 PM |
"The Art and Science of Web Design" free download | Colin Dunstan | Deals and Resources (No Self-Promotion or Affiliate Links) | 0 | 07-01-2005 10:16 AM |