Joining image and title

roger64 · 12-02-2012, 08:51 PM

Hi

I am preparing an illustrated book. I'd like to join a title and a full page image, so that the title appears on the TOC but the reader can only see the image.

Here is the current code I would like to improve. If somebody was so kind as to give me the answer... Now I have the title on one page and the image on the next page... which is not the intended effect.

Code:

<body >
  <h2 id="toc0">LA LIONNE</h2>

  <div style="text-align:center"><img alt="images1" class="frameGraphics" id="images1graphic" src="../Images/image003.jpg" style="width:100%" /></div>
</body>

theducks · 12-02-2012, 08:59 PM

Moderator Notice
This is a EPUB question. Moving to EPUB

Aerys · 12-02-2012, 10:11 PM

Use a CSS style "visibility:hidden" for the h2 tag. Please note that the "title" is hidden but it's still occupying a space in the page.

Code:

<body >
  <h2 id="toc0" style="visibility:hidden">LA LIONNE</h2>

  <div style="text-align:center"><img alt="images1" class="frameGraphics" id="images1graphic" src="../Images/image003.jpg" style="width:100%" /></div>
</body>

Another way, is just to remove the "title" altogether and put the anchor "id" of the TOC to the DIV.

roger64 · 12-02-2012, 10:53 PM

@Aeris

Thank you for your reply.

I did not know visibillity:hidden. Looking on the web about this expression, I could also find display:none which seems to be more convenient because I wish to use a full-page image. As all my h2 titles are going to be replaced by images, I just added display:none to the h2 CSS and it seems to do what I wished.

GrannyGrump · 12-03-2012, 12:02 AM

You could also try this way, putting the Chapter Name in a "title" and leaving the <h> tags empty.
I've used it sometimes when using an image for a chapter heading. I use Sigil, and it will generate the automatic TOC using the "title". Also useful to use this if you want the TOC to have different wording than the page display, you can put a different name in the <h> tags.

Code:

<body >
  <h2 id="toc0" title="LA LIONNE"></h2>

  <div style="text-align:center"><img alt="images1" class="frameGraphics" id="images1graphic" src="../Images/image003.jpg" style="width:100%" /></div>
</body>

Jellby · 12-03-2012, 05:02 AM

Also, "visibility: hidden" is not suported by the ePub 2.1 spec, so you shouldn't rely on it (even when that's what you need).

By the way, you don't need an <h2> at all if you don't want it displayed. You may want it to get other tools to automatically create the TOC, but you could always create (or edit) the TOC manually inserting the titles where you need them.

mrmikel · 12-03-2012, 05:53 AM

Roger64,

Be sure and check out anything that doesn't display on the Reader Library or your 505 not just in Sigil or Calibre. As was pointed out, it doesn't display, but it can leave a hole where it would be. On your title page, it might not matter at all, but in text I have found it very annoying, where pages numbers are invisible, but the space where they would have been is not, with a gap like this in the middle of a line.

roger64 · 12-03-2012, 06:54 AM

Thanks for your comments.

I added to the h2 CSS of the EPUB the argument display:none

- The TOC is displayed where the TOC should be.
- The h2 titles are not displayed on the page and leave no hole. They just disappear into thin air.

Just perfect. But... when I convert this EPUB to PDF using Prince, I have some display problems (no TOC, faulty display for images). So, even if the above solution is handy for the EPUB, I still need to find another one acceptable for Prince.

To come back to my first idea, is it possible to enhance the div containing the image with some id tag so that it can be displayed in the TOC?

DiapDealer · 12-03-2012, 07:12 AM

Quote:

Originally Posted by roger64

To come back to my first idea, is it possible to enhance the div containing the image with some id tag so that it can be displayed in the TOC?

You don't need to "enhance" any of the (x)html or css to display whatever your heart desires in the ToC. As Jellby already mentioned earlier; simply modify the toc.ncx file manually. All the h tag and "visibility: none" trickery is only necessary when you want to generate a ToC automatically using other tools.

roger64 · 12-03-2012, 07:47 AM

Quote:

Originally Posted by DiapDealer

You don't need to "enhance" any of the (x)html or css to display whatever your heart desires in the ToC. As Jellby already mentioned earlier; simply modify the toc.ncx file manually. All the h tag and "visibility: none" trickery is only necessary when you want to generate a ToC automatically using other tools.

OK

It will be a good opportunity to learn something new because, up to now, I used, as you say, "other tools" to generate automatically a ToC and never bothered about it.

Jellby · 12-03-2012, 11:00 AM

But if your problem is conversion with Prince (and my epubutils.py tool), fiddling with the NCX TOC won't help, because the PDF TOC (aka bookmarks) is generated from the XHTML through CSS.

(I'll have a look at the sample you sent me by PM.)

Jellby · 12-03-2012, 11:27 AM

By the way, in that case something like this could be what you need:

Code:

<h2 title="LA LIONNE">
  <img alt="" class="frameGraphics" src="../Images/image003.jpg" />
</h2>

Just set the CSS for <h2> to center alignment and so on... Sigil will create the NCX TOC file for you. And you can make Prince do the same for the PDF.

12-02-2012, 08:51 PM	#1
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Joining image and title Hi I am preparing an illustrated book. I'd like to join a title and a full page image, so that the title appears on the TOC but the reader can only see the image. Here is the current code I would like to improve. If somebody was so kind as to give me the answer... Now I have the title on one page and the image on the next page... which is not the intended effect. Code: <body > <h2 id="toc0">LA LIONNE</h2> <div style="text-align:center"><img alt="images1" class="frameGraphics" id="images1graphic" src="../Images/image003.jpg" style="width:100%" /></div> </body>

12-02-2012, 10:11 PM	#3
Aerys Connoisseur Posts: 51 Karma: 29994 Join Date: Nov 2011 Location: Manila, Philippines Device: iPad 2 & Nexus 7	Use a CSS style "visibility:hidden" for the h2 tag. Please note that the "title" is hidden but it's still occupying a space in the page. Code: <body > <h2 id="toc0" style="visibility:hidden">LA LIONNE</h2> <div style="text-align:center"><img alt="images1" class="frameGraphics" id="images1graphic" src="../Images/image003.jpg" style="width:100%" /></div> </body> Another way, is just to remove the "title" altogether and put the anchor "id" of the TOC to the DIV.

12-03-2012, 12:02 AM	#5
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	You could also try this way, putting the Chapter Name in a "title" and leaving the <h> tags empty. I've used it sometimes when using an image for a chapter heading. I use Sigil, and it will generate the automatic TOC using the "title". Also useful to use this if you want the TOC to have different wording than the page display, you can put a different name in the <h> tags. Code: <body > <h2 id="toc0" title="LA LIONNE"></h2> <div style="text-align:center"><img alt="images1" class="frameGraphics" id="images1graphic" src="../Images/image003.jpg" style="width:100%" /></div> </body>

12-03-2012, 05:02 AM	#6
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Also, "visibility: hidden" is not suported by the ePub 2.1 spec, so you shouldn't rely on it (even when that's what you need). By the way, you don't need an <h2> at all if you don't want it displayed. You may want it to get other tools to automatically create the TOC, but you could always create (or edit) the TOC manually inserting the titles where you need them. Last edited by Jellby; 12-03-2012 at 05:04 AM.

12-03-2012, 06:54 AM	#8
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Thanks for your comments. I added to the h2 CSS of the EPUB the argument display:none - The TOC is displayed where the TOC should be. - The h2 titles are not displayed on the page and leave no hole. They just disappear into thin air. Just perfect. But... when I convert this EPUB to PDF using Prince, I have some display problems (no TOC, faulty display for images). So, even if the above solution is handy for the EPUB, I still need to find another one acceptable for Prince. To come back to my first idea, is it possible to enhance the div containing the image with some id tag so that it can be displayed in the TOC? Last edited by roger64; 12-03-2012 at 06:57 AM.

12-02-2012, 08:59 PM	#2
theducks Well trained by Cats Posts: 29,800 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Moderator Notice This is a EPUB question. Moving to EPUB

12-02-2012, 10:53 PM	#4
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	@Aeris Thank you for your reply. I did not know visibillity:hidden. Looking on the web about this expression, I could also find display:none which seems to be more convenient because I wish to use a full-page image. As all my h2 titles are going to be replaced by images, I just added display:none to the h2 CSS and it seems to do what I wished.

12-03-2012, 05:53 AM	#7
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	Roger64, Be sure and check out anything that doesn't display on the Reader Library or your 505 not just in Sigil or Calibre. As was pointed out, it doesn't display, but it can leave a hole where it would be. On your title page, it might not matter at all, but in text I have found it very annoying, where pages numbers are invisible, but the space where they would have been is not, with a gap like this in the middle of a line.

12-03-2012, 11:00 AM	#11
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	But if your problem is conversion with Prince (and my epubutils.py tool), fiddling with the NCX TOC won't help, because the PDF TOC (aka bookmarks) is generated from the XHTML through CSS. (I'll have a look at the sample you sent me by PM.)

12-03-2012, 11:27 AM	#12
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	By the way, in that case something like this could be what you need: Code: <h2 title="LA LIONNE"> <img alt="" class="frameGraphics" src="../Images/image003.jpg" /> </h2> Just set the CSS for <h2> to center alignment and so on... Sigil will create the NCX TOC file for you. And you can make Prince do the same for the PDF.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Title bulk edit match - to remove series info from title	Rob557	Library Management	30	12-09-2014 06:06 AM
Pubit!/Add Title Previewer shows ellipsis in title bar	schooner1892	General Discussions	0	09-15-2012 07:04 PM
Just joining	burk	Introduce Yourself	3	04-26-2012 06:46 PM
Just Joining	mijugama	Introduce Yourself	6	04-19-2011 11:24 AM
Can I auto enter numbers to title/title sort?	blu-	Library Management	19	02-16-2011 01:01 PM