Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes
Is there a way to append HTML code into the <head> on export? I am creating very large PWA apps (around 1,000 pages) which require a manifest.json link to be included in the <head> of each page. Due to extremely slow loading I am having to move to a multi-page export which means that manually placing the link on every page is not an option...

Is there a way to do this currently? Can I manually adjust the software to append all html in the <head> section instead of the footer on my end? I personally have no use of ever appending custom html into the footer, but appending various html into the <head> would save me countless hours and hassle.
in how_to by (460 points)
edited by
  

2 Answers

+1 vote
 
Best answer

When v3.6.10 is released in the next 1-2 weeks, you'll have the ability to attach an HTML Resource containing a <head> tag and have contents appear in the <head> tag of the output.

by (197k points)
selected by
1 to 2 weeks! That is truly awesome news! I just came to the conclusion that I will need to use a multi-page architecture PWA for all of my larger projects to keep load times reasonable. You can't imagine how many hours of manual header coding this will save me. Thanks a ton!
Happy to help! :-)
This feature is now available.
I tried an export and the html code was placed in both the head and the footer of the pages. Is there a certain format that I should use? My current structure is:

<head>
...
...
...
</head>
// Text instructions for any post export code adjustments

This is also causing the <head> tag to appear twice in the top of the pages and an extra </head> tag to appear at the bottom of the footer.

I will try just placing the <head> tag within my text instructions next and see if that works.
You're right. Sorry about that. Should be fixed in v3.6.11:
https://ajarproductions.com/pages/products/in5/download.php
The update appears to have removed both the <head> and </head> tag from the code that is placed in the top head of the html, however the html code between the head tags is still duplicated in the footer and the </head> is not removed from the footer code.
I didn't see that in my test files. Please send me the HTML file that you're attaching. Thanks!
<head>
    <link rel="manifest" href="manifest.webmanifest">
<!-- App Icons -->
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="36x36"  href="/android-icon-36x36.png">
    <link rel="icon" type="image/png" sizes="48x48"  href="/android-icon-48x48.png">
    <link rel="icon" type="image/png" sizes="72x72"  href="/android-icon-72x72.png">
    <link rel="icon" type="image/png" sizes="96x96"  href="/android-icon-96x96.png">
    <link rel="icon" type="image/png" sizes="144x144"  href="/android-icon-144x144.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="/icons-512x512.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="70x70" href="/ms-icon-70x70.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="144x144" href="/ms-icon-144x144.png">
    <link rel="icon" type="image/png" sizes="150x150" href="/ms-icon-150x150.png">
    <link rel="icon" type="image/png" sizes="310x310" href="/ms-icon-310x310.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <meta name="robots" content="noindex,nofollow">
</head>
// Repalce the install button id code below at the begging of button code in index page
//    <button id="setup_button" onclick="installApp()" class="pageItem has-on"
// Replace and Insert it before the code that reads like this... id="item443895" data-id="443895" name="setup_button"
I have tried a bunch of variations and simplifications as well, but I can't seem to avoid the duplication of the code in the footer and the remaining </head> tag in the footer.

FYI - I am exporting as a Multi-Page Web App
Try putting everything that's not in the <head> inside a <body> tag.

Also note "//" is not a valid commenting syntax for HTML.

https://www.w3schools.com/html/html_comments.asp
That did it! Thanks a ton for your quick response on this issue, as it had me at a bit of a stand still on generating final products for my clients. In5 can now export multi-page progressive web apps!
Glad to hear it! :-)
0 votes
You can automatically put a link to a file in the <head> section of every page of a multi-page web publication by going to in5 > Export HTML5 with in5..., and in the SEO & Meta tab, enter the URL.
by (26.1k points)
I tried entering the link under "Book URL" (it didn't reach header) and "Description" which didn't work because that section auto adds an incorrect meta description tag...

<meta name="description" content=                         ">
I checked with Justin on this one. Right now, the output HTML has to be modified to add a custom meta tag. He's going to work on making this better in the future, so that it will search attached HTML for a <head> tag and place that content in the actual <head> tag.
That would be amazing. Thanks!
It will be available in the next update. :-)