picture book

[clatterjill]

I am in the midst of putting together a picture book in sigil.

I don't have a lot of knowledge about html, etc...don't want a huge expense (like publishing fixed page etc...) but do want the pictures to look rather decent and work readers.

When I download others' picture books, their pictures don't seem to work so well. The pics bleed to next pages and then the pages don't really turn.

I've found one picture book that seems to work in whatever viewer I've stuck it into.

the author created pics: 1,000 x 1100. I've been told to keep pictures to a 4:3 ratio.

Other than that I tried to use his html to construct my book (substituting, of course, my pics and information). Didn't work for me.


Could someone help me with the proper html? for the actual page and css style sheet?

I found information on using svg wrappers (tried it and failed)...and that information was from 2011, so am wondering if that is out of date.

any help would be so appreciated! thanks!

[Toxaris]

You give yourself quite a task there. Picture books are very difficult to make that play nice on various readers... I think, but I am no expert on picture books, that a fixed-layout book would be the best way.
SVG wrappers still work and could be a good idea, if you want the picture to fill complete pages without distortion, regardless of the screen resolution. You will have margins then of course, but at least no distortion.
The real issues begin when you also want text under the pictures...

[theducks]

for SVG, I cheat

(Assumes all images are the same size)

Add all the Images using ADD Image Files
Add 1 image as the Cover :Tools: add cover: (select image)

Then copy the entire contents of the coverand paste THAT into a new file: Edit the IMAGE filename only to the next image
Repeat

Finally: Add the REAL cover.Xhtml file
Add a Header (can be hidden or .0001pt high) if you want Sigil to generate a TOC


Alternate: the 'rolling cover add'

I do the Placement work sort of backwards

Add the LAST image as a cover. Tools:Add cover
In the file browser:

Rename the file to its real desired name (not cover)
Add Semantics: click Cover to remove the tick

Add the Next 'cover'
Repeat the above until done

[clatterjill]

Originally Posted by Toxaris

You give yourself quite a task there. Picture books are very difficult to make that play nice on various readers... I think, but I am no expert on picture books, that a fixed-layout book would be the best way.
SVG wrappers still work and could be a good idea, if you want the picture to fill complete pages without distortion, regardless of the screen resolution. You will have margins then of course, but at least no distortion.
The real issues begin when you also want text under the pictures...

\\

thank you so much for responding!!!

[clatterjill]

Originally Posted by theducks

for SVG, I cheat

(Assumes all images are the same size)

Add all the Images using ADD Image Files
Add 1 image as the Cover :Tools: add cover: (select image)

Then copy the entire contents of the coverand paste THAT into a new file: Edit the IMAGE filename only to the next image
Repeat

Finally: Add the REAL cover.Xhtml file
Add a Header (can be hidden or .0001pt high) if you want Sigil to generate a TOC


Alternate: the 'rolling cover add'

I do the Placement work sort of backwards

Add the LAST image as a cover. Tools:Add cover
In the file browser:

Rename the file to its real desired name (not cover)
Add Semantics: click Cover to remove the tick

Add the Next 'cover'
Repeat the above until done

I have to run out so will come back to this. Though not the sharpest tack when it comes to this stuff, it seems as if you're suggesting to 'trick' sigil into thinking all page images are covers....and that that would work. Am I correct? if so, that sounds like a great fix for someone like me who knows little code.

If I am correct, I'm a little confused by the last part of what you write:

I do the Placement work sort of backwards

Add the LAST image as a cover. Tools:Add cover
In the file browser:
Rename the file to its real desired name (not cover)
Add Semantics: click Cover to remove the tick
Add the Next 'cover'
Repeat the above until done

[theducks]

Originally Posted by clatterjill

I have to run out so will come back to this. Though not the sharpest tack when it comes to this stuff, it seems as if you're suggesting to 'trick' sigil into thinking all page images are covers....and that that would work. Am I correct? if so, that sounds like a great fix for someone like me who knows little code.

If I am correct, I'm a little confused by the last part of what you write:

I do the Placement work sort of backwards

Add the LAST image as a cover. Tools:Add cover
In the file browser:
Rename the file to its real desired name (not cover)
Add Semantics: click Cover to remove the tick
Add the Next 'cover'
Repeat the above until done

The Trick: is Sigil make a SVG wrapped cover (and file).
You make the FILE, then cancel the 'Cover' (symatics) part
Then you add the next 'Cover' and cancel The Symantics <this is what I meant about repeat
Now every file has a separate SVG wrapped image. The order of the files is the bulk of your 'picture book'

[clatterjill]

Originally Posted by theducks

The Trick: is Sigil make a SVG wrapped cover (and file).
You make the FILE, then cancel the 'Cover' (symatics) part
Then you add the next 'Cover' and cancel The Symantics <this is what I meant about repeat
Now every file has a separate SVG wrapped image. The order of the files is the bulk of your 'picture book'

may actually have gotten it. seems to work, but will try it again tomorrow morning with actual pics will use.

thanks so much!

[kamanza]

Toxaris says:

The real issues begin when you also want text under the pictures...

Actually, it is not so hard: change 'height' in the SVG wrapper to something like 90-95% (or more if there is a lot of text)

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="95%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="800" width="600" xlink:href="../Images/cover.jpg"></image>
    </svg>
  </div>

If you want to place your text on top, you can play with the viewBox values:

 <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="95%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 -20 600 820" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="800" width="600" xlink:href="../Images/cover.jpg"></image>
    </svg>
  </div>

Actual values would depend on the amount of space you need for the text, but the image will not be distorted.

[rainbow.dash]

Hi! I take it that this would only work for an actual picture book? I'm trying to format a chapter book with 1 or 2 illustrations per chapter... could I use this trick, or would all my illustrations be placed at the front of the book because they're masquerading as covers?

[theducks]

Originally Posted by rainbow.dash

Hi! I take it that this would only work for an actual picture book? I'm trying to format a chapter book with 1 or 2 illustrations per chapter... could I use this trick, or would all my illustrations be placed at the front of the book because they're masquerading as covers?

You cancel the Cover 'semantics' after making the fake cover page. NB In set semantics: Clicking on a one with a setting, toggles. Setting the current FILE to a semantic in use elsewhere will steal the focus.
Note: if you DON'T remove the setting on the HTML file, Sigil will replace the 'existing' cover with the new one.

You can then drag the 'faked' cover to the ultimate location (order).

If you want the SVG in the middle:
Split at the destination, then drag the faked (canceled) cover in between

Upper text
Picture
Lower text

Then simply MERGE the 3 pieces

[rainbow.dash]

Thank you! I'm very new at this (can you tell?), so hopefully I can muddle through... I thought it would simple to use the "insert file" to add an image, but got scared after reading the posts about how they turn out

[theducks]

Originally Posted by rainbow.dash

Thank you! I'm very new at this (can you tell?), so hopefully I can muddle through... I thought it would simple to use the "insert file" to add an image, but got scared after reading the posts about how they turn out

Images require at least 2 steps:
1)You need to ADD the image to the book (will appear in the Images section of the file list)
2)Use (place), the image on a page (can be many pages. eg. fleuron use)

Fightcrew (the check) will advise you (yellow) if you have unused images (not placed).

[exaltedwombat]

Will this book be offered for sale, or is it just for your private use?

If it will be sold, will this be only through outlets that use epub format, or will it be offered on Amazon's Kindle Store as well?

[Notjohn]

Originally Posted by exaltedwombat

Will this book be offered for sale, or is it just for your private use?

If it will be sold, will this be only through outlets that use epub format, or will it be offered on Amazon's Kindle Store as well?

Oops! I was growing ever more excited about this workaround, but are you now saying it might blow up when run through the KDP conversion?

[Notjohn]

Originally Posted by rainbow.dash

Hi! I take it that this would only work for an actual picture book? I'm trying to format a chapter book with 1 or 2 illustrations per chapter... could I use this trick, or would all my illustrations be placed at the front of the book because they're masquerading as covers?

Sigil (or it seems to me) works best when each image is in a section or chapter of its own. Can't you achieve your desired effect simply by inserting the image(s) between chapters?