Aura ONE Kobo changes Aspect Ratio (width) of my Covers

Minkius · 06-02-2023, 12:45 PM

Hello, I always use Calibre to upload my books into Kobo Aura One.

I know how to edit the covers, download them, change them and I have never had any problems until now!

I uploaded a series of books (Camilleri) and some of them have problems with the covers.
The covers look perfect on my Calibre library and also if I click Edit Metadata or Edit Book in Calibre.

In Kobo when I open the book, the cover looks distorted. As you can see from the 1st image, Kobo keeps the Height but changes the Width.
Strangely, when I put Kobo to sleep, the cover is perfectly displayed on the sreen (see image 2).

I think there must be some wrong settings, I tried to re-upload the covers and also the books but it did not work.

I have the following plugins in Calibre:
KoboUtilities
Kobo Reader Device Interface
KoboTouch
Kobo Reader

Do you have any idea of suggestion please?

Thanks in advance

Karellen · 06-02-2023, 03:59 PM

Open the cover.xhtml page in the Editor.

You should have this... preserveAspectRatio="xMidYMid meet"

But you probably have this instead... preserveAspectRatio="none"

Minkius · 06-02-2023, 04:17 PM

I cannot find it (see below)

Also in the Kobo Touch plugin I have 'keep cover aspect ratio' checked.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!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>Cover</title>
<link href="../Styles/template.css" rel="stylesheet" type="text/css" />

<style type="text/css">
@page {padding:0; margin:0;}
img{height: 100%;}
</style>
</head>

<body style="padding:0; margin:0;">
<div class="image" id="my_cover_image"><img alt="Cover" height="764" src="../OEBPS/cover.jpg" width="550" /></div>
</body>
</html>

Karellen · 06-02-2023, 04:29 PM

Replace your code with this...

Spoiler:

You will need to adjust the viewbox and the width and height values to match your cover image dimensions and relink the href: image.

Remember to make a backup first, so you can easily revert if needed.

DNSB · 06-02-2023, 04:59 PM

Alternately, you could use the Modify ePub plugin to replace the cover image page with one that has the svg wrapper bits and bobs set up for the size of image you are sending. It's likely a bit faster than manually editing your ebooks. The results be close to what @Karellen posted.

Spoiler:

JSWolf · 06-02-2023, 05:36 PM

Quote:

Originally Posted by DNSB

Alternately, you could use the Modify ePub plugin to replace the cover image page with one that has the svg wrapper bits and bobs set up for the size of image you are sending. It's likely a bit faster than manually editing your ebooks. The results be close to what @Karellen posted.

Spoiler:

This is the code for the cover I get from Modify ePub.

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="calibre:cover" content="true" />
        <title>Cover</title>
        <style type="text/css" title="override_css">
            @page {padding: 0pt; margin:0pt}
            body { text-align: center; padding:0pt; margin: 0pt; }
        </style>
    </head>
    <body>
        <div>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                width="100%" height="100%" viewBox="0 0 880 1600"
                preserveAspectRatio="xMidYMid meet">
                <image width="880" height="1600" xlink:href="../images/cover.jpeg"/>
            </svg>
        </div>
    </body>
</html>

It works very well. You get the correct aspect ratio and it's faster.

Minkius · 06-02-2023, 07:00 PM

Thank you all. I tried the Modify ePub solution but it did not work. The cover width is still wrongly distorted on my Kobo

Karellen · 06-02-2023, 07:11 PM

Quote:

Originally Posted by Minkius

Thank you all. I tried the Modify ePub solution but it did not work. The cover width is still wrongly distorted on my Kobo

Maybe you can scramble the book and upload a copy...
https://www.mobileread.com/forums/sh...d.php?t=267998

JSWolf · 06-02-2023, 07:55 PM

Quote:

Originally Posted by Minkius

Thank you all. I tried the Modify ePub solution but it did not work. The cover width is still wrongly distorted on my Kobo

Are you sure the cover is at the correct aspect ratio? If it's not, try downloading a version that has the correct aspect ratio and try Modify ePub again.

For example, covers at Overdrive are 800x600 and most of them are not aspect ratio correct.

DNSB · 06-03-2023, 01:15 AM

Also, you might want to restart your Kobo after resending the books. The cover images could be cached in memory which the restart will clear.

06-02-2023, 12:45 PM	#1
Minkius Junior Member Posts: 3 Karma: 10 Join Date: Jun 2023 Device: Kobo Aura One	Kobo changes Aspect Ratio (width) of my Covers Hello, I always use Calibre to upload my books into Kobo Aura One. I know how to edit the covers, download them, change them and I have never had any problems until now! I uploaded a series of books (Camilleri) and some of them have problems with the covers. The covers look perfect on my Calibre library and also if I click Edit Metadata or Edit Book in Calibre. In Kobo when I open the book, the cover looks distorted. As you can see from the 1st image, Kobo keeps the Height but changes the Width. Strangely, when I put Kobo to sleep, the cover is perfectly displayed on the sreen (see image 2). I think there must be some wrong settings, I tried to re-upload the covers and also the books but it did not work. I have the following plugins in Calibre: KoboUtilities Kobo Reader Device Interface KoboTouch Kobo Reader Do you have any idea of suggestion please? Thanks in advance Attached Thumbnails

06-02-2023, 04:29 PM	#4
Karellen Wizard Posts: 1,611 Karma: 9500498 Join Date: Sep 2021 Location: Australia Device: Kobo Libra 2	Replace your code with this... Spoiler: PHP Code: <?xml version='1.0' encoding='utf-8'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <meta name="calibre:cover" content="true"/> <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> <div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1600 2560" preserveAspectRatio="xMidYMid meet"> <image width="1600" height="2560" xlink:href="../OEBPS/cover.jpg"/> </svg> </div> </body> </html> You will need to adjust the viewbox and the width and height values to match your cover image dimensions and relink the href: image. Remember to make a backup first, so you can easily revert if needed.

06-02-2023, 04:59 PM	#5
DNSB Bibliophagist Posts: 46,181 Karma: 168983734 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos	Alternately, you could use the Modify ePub plugin to replace the cover image page with one that has the svg wrapper bits and bobs set up for the size of image you are sending. It's likely a bit faster than manually editing your ebooks. The results be close to what @Karellen posted. Spoiler: <?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" xml:lang="en"> <head> <title>A Guide to Papism</title> <meta name="calibre:cover" content="true"/> <style type="text/css" title="override_css"> @page {padding: 0pt; margin:0pt} body { text-align: center; padding:0pt; margin: 0pt; } </style> </head> <body> <div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" viewBox="0 0 1000 1500"><image width="1000" height="1500" xlink:href="../Images/cover.jpeg"/></svg> </div> </body> </html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Embed metadata: preserve aspect ratio on covers	Lukusaukko	Library Management	4	03-03-2023 05:31 AM
Aspect ratio of the covers under grid view	edwarddiaz	Library Management	3	02-13-2023 05:54 PM
css if img aspect-ratio >1/1 width:100%, otherwise width:50%	rjwse@aol.com	Editor	0	03-19-2021 07:41 AM
Image aspect ratio	dan2the6th	Editor	6	09-29-2020 07:27 PM
Aspect Ratio for Covers?	Buddy13	Kobo Reader	10	10-21-2011 07:45 AM

06-02-2023, 03:59 PM	#2
Karellen Wizard Posts: 1,611 Karma: 9500498 Join Date: Sep 2021 Location: Australia Device: Kobo Libra 2	Open the cover.xhtml page in the Editor. You should have this... preserveAspectRatio="xMidYMid meet" But you probably have this instead... preserveAspectRatio="none"

06-02-2023, 04:17 PM	#3
Minkius Junior Member Posts: 3 Karma: 10 Join Date: Jun 2023 Device: Kobo Aura One	I cannot find it (see below) Also in the Kobo Touch plugin I have 'keep cover aspect ratio' checked. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!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>Cover</title> <link href="../Styles/template.css" rel="stylesheet" type="text/css" /> <style type="text/css"> @page {padding:0; margin:0;} img{height: 100%;} </style> </head> <body style="padding:0; margin:0;"> <div class="image" id="my_cover_image"><img alt="Cover" height="764" src="../OEBPS/cover.jpg" width="550" /></div> </body> </html>

06-02-2023, 07:00 PM	#7
Minkius Junior Member Posts: 3 Karma: 10 Join Date: Jun 2023 Device: Kobo Aura One	Thank you all. I tried the Modify ePub solution but it did not work. The cover width is still wrongly distorted on my Kobo

06-03-2023, 01:15 AM	#10
DNSB Bibliophagist Posts: 46,181 Karma: 168983734 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos	Also, you might want to restart your Kobo after resending the books. The cover images could be cached in memory which the restart will clear.