Yes, I saw your post. What, I think, you are missing is that ALL ePub format books are made of html (actually xhtml but that doesn't really matter) and css
even if your book is nothing but images.
The image files themselves are simply a 'resource' in the ePub that can be used throughout the book multiple times with different sizes, shapes, display regions, etc. As DNSB mentioned, you may want to trim your images to get rid of those massive margins...that's just wasted image space making your image files (and overall ePub) much larger than it needs to be. You can (and should) let the user set their own margin sizes on their own device/app based on their own preferences.
The html file is the actual 'paper' that you put the image on...these are the pages the user looks at. You could have a million images in the ePub but if they aren't referenced from an html page, with html code, then you would never 'see' them.
The css file is the resource page that lists all the information on HOW you want to display your image, paragraphs, etc. - How do you want to make it look... Do you want the image to have a pretty red border, a pink background, be really narrow but really tall, take up the whole page or just a portion of it, be on the right/left/center of the page, etc.
That old version (0.9.2 in the video I think) of Sigil used the WYSIWYG PageView that would put the html/css codes into the book for you...but it was often wrong, or created bugs that would be even more difficult to fix than just doing it by hand in the first place. The newer versions of Sigil removed that buggy function and replaced it with something much better.
The error that you were receiving was likely because you had your cursor somewhere that it couldn't be. Image references need to be in the 'body' of the document, not in the 'head' section; the cursor needs to be between the <body> and the </body> tags. Ideally you would put the image within some kind of element that you can style as you wish, such as a <div>.
The references and tutorials I linked in my previous post take a couple hours to look through...but it is time WELL spent. It will save you sooo much time because you won't have to try and find the step-by-step tutorial (that doesn't exist) walking you through how to do every little thing you want to do. YOUR book requires VERY basic html/css because it is just a bunch of images. The attachment image I had shows one option of inserting images onto a page...there are others.
Code:
html:
<div><img alt="" src="../Images/img_1.jpg"/></div>
with css:
div {margin:1em auto; text-align:center}
div img {width:75%; max-width:600px}
*set the percentage to how much of the screen width you want to fill
set the max-width to the width of your image in pixels to help prevent fuzzy images if they try and get stretched too large on a large format display. This is optional...and 'technically' not exactly what's going on behind the scenes, but it is close enough and helps.
You could even go with an svg wrapped image that takes up the full screen while still keeping the proper aspect ratio (eg it would fill the screen from top to bottom and have extra space on the sides for an image that is taller than it is wide, or fill the screen from side to side with space on the top/bottom if the image is wider than it is tall). Unfortunately, some older devices (older kindle formats iirc) don't like svg images except as a cover image...so you need to know your market, know your device/app capabilities, and choose the correct html/css.
Here's an example of an svg wrapped image:
Code:
<body style="margin:0; padding:0; text-align:center; background-color:white">
<div style="margin:0; padding:0">
<svg
xmlns="http://www.w3.org/2000/svg"
height="100vh" width="100vw"
preserveAspectRatio="xMidYMid meet" version="1.1"
viewBox="0 0 600 902"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="600" height="902" xlink:href="../Images/img_1.jpg"/>
</svg>
</div>
</body>
If you copy/paste that onto a separate html page (one for each of your images) then all you need to do is update the numbers with the image
width and
height (in pixels) and update the
filename with the correct name.
Of course, Sigil automatically puts all the other information on the page for you:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p> </p>
</body>
</html>
You would just need to replace the red text with the example I showed you. This gives a final html that looks like this:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="margin:0; padding:0; text-align:center; background-color:white">
<div style="margin:0; padding:0">
<svg
xmlns="http://www.w3.org/2000/svg"
height="100vh" width="100vw"
preserveAspectRatio="xMidYMid meet" version="1.1"
viewBox="0 0 600 902"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="600" height="902" xlink:href="../Images/img_1.jpg"/>
</svg>
</div>
</body>
</html>
Now.... you might have a little smoke coming out of your ears thinking of doing that for 100+ images, but don't worry. There is a nice little Sigil plugin (
InsertImageSVG) that will auto-magically do the work for you.
There are many threads on putting images into ePubs, with all the pluses and minuses for each technique. You can do a quick search and find those - there are too many to quickly list here.
I hope that helps you!
Cheers,