in5 > Answer Exchange
Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.

Append HTML into <head>?

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
Show 7 previous comments
<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"
by (460 points)
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
by (460 points)
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
by (197k points)
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!
by (460 points)
Glad to hear it! :-)
by (197k points)
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 (29.9k 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=                         ">
by (460 points)
edited by
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.
by (29.9k points)
That would be amazing. Thanks!
by (460 points)
It will be available in the next update. :-)
by (197k points)
Welcome to in5 Answer Exchange, where you can ask questions and receive answers about in5 from other community members.

Categories

Related questions

Most popular tags

animation video export webapp ipad page navigation buttons html mso button slider javascript text mobile zoom iframe lightbox css link images indesign interactive swipe flipbook image audio layout social iphone pages wordpress page-transitions responsive cache fullscreen google scrolling share baker
Powered by Question2Answer