Recordemos que para maquetar nuestro libro hemos usado como plantilla el «ePub Base» de EPL. Ese ePub tiene una imagen para la portada y otra para el autor (puedes verlas en Sigil, en la carpeta Images, con los nombres cover.jpg y autor.jpg, respectivamente).
Por supuesto, no son las imágenes que queremos para nuestro libro y tenemos que cambiarlas por las nuestras. Los nombres de las nuevas imágenes deben ser iguales porque esos nombres son los que usan los archivos de la portada (cubierta.xhtml) y del autor (autor.xhtml).
EL NOMBRE DEBE SER EXACTAMENTE EL MISMO: "cover.jpg" y "autor.jpg". Todo en minúsculas, o no funcionará.
La imagen que vayamos a usar como portada debe tener las siguientes características:
Si en tu libro vas a añadir una breve biografía del autor, su foto debe tener las siguientes características:
Una vez que tengas las imágenes (o la imagen, si sólo vas a usar la de portada) preparadas, sigue estos pasos:
Si es necesario, debes renombrar los ficheros que acabas de subir a cover.jpg y autor.jpg (exactamente ese nombre, sin mayúsculas ni nada distinto). Para ello, púlsalos con el botón derecho del ratón y elige «Renombrar».
Por último, algo muy importante. Pulsa con el botón derecho del ratón el archivo cover.jpg, y en la opción «Añadir concepto» selecciona «Imagen de portada». Si no lo haces, algunos lectores no mostrarán la portada.
Es importante recordar que NINGUNA IMAGEN NI ARCHIVO DEBE SUPERAR LOS 300 kb O LOS 600x900 píxeles. En caso contrario, tu ePub dará problemas de incompatibilidad en algunos lectores.
Cómo añadir otras imágenes
Lo siguiente es una breve explicación del código necesario para añadir ilustraciones a toda página sin más texto en el xhtml. Para incluir otro tipo de imágenes, revisa el anexo avanzado.
En la hoja de estilos están definidas las siguientes clases, que se utilizarán para este caso:
.cubierta { margin:0; padding:0; border:0; font-size:0; text-align:center; text-indent:0; }
.cubierta img { height:100%; max-height:100%; }
Luego, en el código hay que usar:
<body class="sinmargen">
<p class="cubierta"><img alt="" src="../Images/foto.jpg" /></p>
</body>
Este código es únicamente para imágenes que están aisladas en un xhtml (como la portada o láminas a página completa). El motivo es que el código toca el margen del <body>, y si hubiera texto en el xhtml se vería afectado. Si queremos colocar una imagen entre el texto, se debería usar la clase ilustra, y poner sinmargen en un <div>, en lugar de en el <body>. Puedes encontrar una explicación más detallada en el anexo avanzado.
Si queremos ajustar las imágenes, podemos usar lo siguiente:
Imagen horizontal (alargada):
.ilustraalargada img { max-width:100%; }
Imagen vertical (estirada):
.ilustraestirada img { max-height:100%; }
Con el max respetaremos el tamaño original de la imagen (en píxeles). Si quieres que se ajuste ocupando toda la pantalla (aunque dejará igualmente un pequeño espacio) quita el max-:
.ilustraalargada img { width:100%; }
Dónde encontrar las portadas
Existen muchas formas de encontrar las portadas oficiales. Una simple búsqueda en Google debería bastar. No obstante, te recordamos que es obligatorio eliminar el logo editorial e incluir el de EPL. Si no sabes hacerlo, puedes consultar el apartado correspondiente en los anexos, o pedir ayuda en el foro, hay editores y colaboradores que te ayudarán.
Algunos buscadores especializados son:
Por otro lado, si lo deseas, también puedes crear tus propias portadas.