or Create a profile

Home → General →

Converting HTML Block content into publishable page content

matthew.wren's Avatar

matthew.wren

31 Mar, 2016 06:34 PM

At the 2015 Cascade User Conference I saw a lot of schools implementing a page element in place of an html block for easy site-wide edits and publishes. Our current main navigation, footer, and search bar are block elements but we have a few edits coming down the pike and I thought it'd be easier to have this content as a page so we only have to publish the page rather than our entire website to carry out the changes.

Where would be a place to start with something like this? Are there problems with implementing an idea like this?

  1. 1 Posted by graham.lewis on 31 Mar, 2016 07:50 PM

    graham.lewis's Avatar

    Matthew,

    When I was at JSU, we did this exact thing. http://www.jsu.edu/

    On this page, the header and footer are both Server Side Includes.

    What we did was create a basic "include page type" (template with one region, config set, content type) that we would add which ever block we wanted to act as an include. We will use the Header as an example.

    Then inside the main template we would add something like this:

    [system-view:external]
<?php include ($_SERVER['DOCUMENT_ROOT']."/path/to/include.html"); ?>[/system-view:external]
[system-view:internal]
<system-region name="HEADER"/>
[/system-view:internal]

    What this does is shows the Cascade Block within the system and uses the Include Page that you created when viewing the live page.

    You would need to make sure that includes were able to display on your web server.

    Doing it this way, all you would need to do after updating your header block would be to publish out that Header Include Page.

  2. 2 Posted by matthew.wren on 31 Mar, 2016 08:41 PM

    matthew.wren's Avatar

    This is exactly what I'm looking for! Now can you help me with the idea of the path to include? My original thought is to create a super simple html page that only contains our navigation html block. That way, when we make a change to the block, it will also be represented in the page.

    My first idea is to have a page with only one region and placed the HTML block in with no format but I don't think that is working...

    Is there a way to write a format that just pulls that block's content or is there a simplier way?

  3. 3 Posted by graham.lewis on 31 Mar, 2016 08:54 PM

    graham.lewis's Avatar

    Not a problem - for the "path to include" part, this is what the JSU one looks like:

    <?php include ($_SERVER['DOCUMENT_ROOT']."/_common/includes-cms/header.html"); ?>
    I am also attaching a screenshot so you can see how that looks inside of Cascade.

    Also, as far as the template region, you should just be able to attach the block to the default region. We didn't have a format or anything assigned to it since we were using XHTML Blocks.

    Does that answer your questions?

  4. 4 Posted by matthew.wren on 01 Apr, 2016 02:34 PM

    matthew.wren's Avatar

    I feel like I'm on the right track. I have to page made with only one region and the block is in place but it's not being included on the page. I checked the page for the navigation and I just get a 404 error so I'm not sure why that won't publish. I also tried to just include a straight HTML file into the template but that also didn't work.

    I'm also not certain PHP is working so I'll have to contact our systems guys to find out what's up with that. Is there another solution incase our server doesn't have PHP for some reason?

  5. 5 Posted by graham.lewis on 01 Apr, 2016 02:40 PM

    graham.lewis's Avatar

    You need to make sure that PHP Includes are enabled on the server. Once that is done it should work.

    If you are getting a 404 then it could be that the include page itself didn't publish so double check that it is publishing.

    You could also try using <!--#include virtual="/path/to/include.html" -->

  6. 6 Posted by matthew.wren on 04 Apr, 2016 07:57 PM

    matthew.wren's Avatar

    I think i solved the page publishing issue. The only thing left I believe is the PHP snippet that's holding me up.

    Here's what I have in my template:

    [system-view:external]
     <?php include ($_SERVER['DOCUMENT_ROOT']."/includes/main-nav.html"); ?>[/system-view:external]
[system-view:internal]
     <system-region name="NAVIGATION"/>
[/system-view:internal]
    The page looks fine in the CMS but the nav doesn't publish outside of it.

    The page is published but I'm doing all of this work in a dev server so would that have anything to do with it?

  7. 7 Posted by graham.lewis on 06 Apr, 2016 04:31 PM

    graham.lewis's Avatar

    Matthew,

    Sorry for the delay, can you send me a link to view it online?

  8. 8 Posted by matthew.wren on 10 May, 2016 01:27 PM

    matthew.wren's Avatar

    Hey Graham,

    Sorry for leaving you hanging so long!

    I played with this a lot over the last couple days and I found that this worked better than the php solution <!--#include virtual="/path/to/include.html" -->

    I'm currently still playing around with this but so far it seems to work just fine! Thanks for your help with this!

  9. 9 Posted by matthew.wren on 10 May, 2016 01:52 PM

    matthew.wren's Avatar

    One last thing,

    I've been thinking about applying this to not only our navigation but other globally shared items like the footer, header-text, and even our analytics code. Is there any inherent downside to using this method for items such as this?

  10. 10 Posted by Penny on 18 May, 2016 04:55 PM

    Penny's Avatar

    Hi Matthew,

    I can't think of anything but that links need to be absolute for content in things like the header and footer. Because the link will need to work from anywhere in your site. The link rewriting is the only thing that I have come across as a potential issue. But i address that using absolute links and maintaining my includes in a separate site.

  11. Tim closed this discussion on 15 Jun, 2016 12:56 PM.

  12. matthew.wren re-opened this discussion on 15 Jun, 2016 04:57 PM

  13. 11 Posted by matthew.wren on 15 Jun, 2016 04:57 PM

    matthew.wren's Avatar

    Hey again,

    I'm going through the implementation process and everything works. I'm just seeing an odd occurrence when using this for my head tags/scripts. It'll add an opening and closing div container around the stylesheets & scripts.

    So instead of

    <meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/><!-- Set the viewport width to device width for mobile -->
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport"/>
<meta name="description"/><link href="../../global/css/global-styles.css" rel="stylesheet" type="text/css"/><script src="../../global/js/head-scripts-min.js" type="text/javascript">
// <![CDATA[
// ]]>
</script>

    it'll show

    <div>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/><!-- Set the viewport width to device width for mobile -->
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport"/>
<meta name="description"/><link href="../../global/css/global-styles.css" rel="stylesheet" type="text/css"/><script src="../../global/js/head-scripts-min.js" type="text/javascript">
// <![CDATA[
// ]]>
</script> 
</div>

    Is there a way I can preserve the code as is without it adding divs around the include? It doesn't appear to break the page but I don't want to have strange syntax in my <head> if I don't need it.

  14. 12 Posted by matthew.wren on 16 Jun, 2016 05:02 PM

    matthew.wren's Avatar

    I found the solution to my issue. After I removed the div from the template the code was disappearing causing more issues so I wrapped the metadata and the stylesheets with <!--#START-ROOT-CODE and #END-ROOT-CODE-->

    I also notice because of the CDATA within my javascript link was causing some issues so here's the code I finished that seems to have solved the problem

    <!--#START-ROOT-CODE
<meta charset="utf-8" /><meta content="IE=edge" http-equiv="X-UA-Compatible" /><meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport" /><meta name="description" /><link href="[system-asset:local]/global/css/global-styles.css[/system-asset:local]" rel="stylesheet" type="text/css" />
#END-ROOT-CODE-->
<script src="[system-asset:local]/global/js/head-scripts-min.js[/system-asset:local]" type="text/javascript">// <![CDATA[

// ]]></script>

  15. 13 Posted by graham.lewis on 16 Jun, 2016 07:46 PM

    graham.lewis's Avatar

    Sorry for the delayed response - glad you found a solution!

    If you need anything else, let me know!

    --
    Graham Lewis
    Sales Engineer, Hannon Hill
    p. 678.904.6900 X-116
    w. www.hannonhill.com
    e [email blocked]
    <http://www.facebook.com/HannonHillCorp> <https://twitter.com/hannon_hill>
    <https://www.linkedin.com/pub/graham-lewis/6/228/864>
    <https://instagram.com/hannonhill/>

  16. 14 Posted by matthew.wren on 17 Jun, 2016 03:20 PM

    matthew.wren's Avatar

    I'm having trouble with an HTML block contain within publishable page. Below is our navigation block. I attach it to the default region on what I'm calling a widget. The search bar displays but the navigation seems to disappear. I tried using <--#protect... ...#protect--> and other code sections but then the navigation doesn't behave properly. specifically with dropdown behavior and proper links.

    Is there a way i can ensure the navigation is preserved as the widget publishes?

    <div class="info-menu-wrapper">
<ul class="menu info-menu clearfix">
<li class="menu-item first"><a href="#">Information For...</a>
<ul class="menu dropdown">
<li class="menu-item"><a href="site://www.scranton.edu/resources-for/future-students">Future Students</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/resources-for/current-students">Current Students</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/resources-for/faculty-staff">Faculty &amp; Staff</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/resources-for/alumni">Alumni</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/parent-relations/index">Parents</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/about/community-relations/index">Community</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/pir/institutional-research/HEOA/index">Consumers</a></li>
</ul>
</li>
</ul>
</div>
<div class="main-menu-wrapper">
<h3 class="menu-title">Menu</h3>
<ul class="menu main-nav clearfix">
<li class="menu-item about"><a href="site://www.scranton.edu/about/index">About Us</a>
<ul class="menu dropdown">
<li class="menu-item"><a href="site://www.scranton.edu/about/index">About Us&#160;Homepage</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/about/presidents-office/index">Office of the President</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/about/jesuit-tradition/index">Mission</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/about/pointsofpride/index">Outcomes &amp; National Recognition</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/news/facts-about-us">Facts About Scranton</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/admissions/campusmap/index">Campus Map</a></li>
</ul>
</li>
<li class="menu-item academics"><a href="site://www.scranton.edu/academics/index">Academics</a>
<ul class="menu dropdown">
<li class="menu-item"><a href="site://www.scranton.edu/academics/index">Academics&#160;Homepage</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/provost/index">Provost/VP Academic Affairs</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/undergrad-programs">Undergraduate Programs</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/cgce/graduate-programs-landing#graduate">Graduate Programs</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/cgce/index">Graduate &amp; Continuing Ed</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/colleges-departments">Colleges &amp; Departments</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/fellowships/index">Fellowship Programs</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/fulbright/index">The Fulbright Story</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/pre-med/index">Pre-Med</a></li>
<li class="menu-item"><a href="http://www.scranton.edu/catalogs">Catalogs</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/provost/academic-support">Academic Support</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/wml/index">Weinberg Memorial Library</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/registrar/index">Registrar</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/IPS/study-abroad/index">Study Abroad</a></li>
</ul>
</li>
<li class="menu-item admissions"><a href="site://www.scranton.edu/admissions/index">Admissions</a>
<ul class="menu dropdown">
<li class="menu-item"><a href="site://www.scranton.edu/admissions/index">Admissions&#160;Homepage</a></li>
<li class="menu-item"><a href="site://Undergraduate%20Admissions/index">Undergraduate</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/admissions/graduate-admission">Graduate</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/academics/cgce/index">Continuing Education</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/financial-aid/index">Financial Aid</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/about/pointsofpride/index">National Recognition &amp; Successful Outcomes</a></li>
<li class="menu-item"><a href="http://www.scranton.edu/visit">Visit Scranton</a></li>
</ul>
</li>
<li class="menu-item campus"><a href="site://www.scranton.edu/studentlife/index">Campus Life</a>
<ul class="menu dropdown">
<li class="menu-item"><a href="site://www.scranton.edu/studentlife/index">Campus Life&#160;Homepage</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/studentlife/studentaffairs/careers/index">Career Development</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/ministries/index"><span>Campus Ministries</span><br /> </a></li>
<li class="menu-item"><a href="http://www.scranton.edu/reslife">Residence Life</a></li>
<li class="menu-item"><a href="http://www.scranton.edu/cse">Center for Student Engagement</a></li>
<li class="menu-item"><a href="http://clubs.scranton.edu">Clubs &amp; Organizations</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/studentlife/studentaffairs/student-activities/Leadership/index">Leadership</a></li>
</ul>
</li>
<li class="menu-item alumni"><a href="site://www.scranton.edu/alumni/index">Alumni</a>
<ul class="menu dropdown">
<li class="menu-item"><a href="site://www.scranton.edu/alumni/index">Alumni Homepage</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/advancement/index">University Advancement</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/advancement/form/index">Make a Gift</a></li>
<li class="menu-item"><a href="http://www.scranton.edu/alumni/AlumniEvents/index.shtml">Calendar of Events</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/alumni/AlumniSociety/index">Alumni Society</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/alumni/networking-opportunities/index">Networking Opportunities</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/studentlife/studentaffairs/careers/resource-pages/resources-alumni">Career Services</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/alumni/BenefitsServices/index">Benefits and Services</a></li>
<li class="menu-item"><a href="site://www.scranton.edu/alumni/AlumniEvents/Alumni%20Weekend/index">Alumni Weekend</a></li>
</ul>
</li>
<li class="menu-item athletics"><a href="site://www.scranton.edu/athletics/index">Athletics</a>
<ul class="menu dropdown">
<li class="menu-item"><a href="site://www.scranton.edu/athletics/index">Athletics&#160;Homepage</a></li>
<li class="menu-item"><a href="http://athletics.scranton.edu">Teams</a></li>
<li class="menu-item"><a href="http://athletics.scranton.edu/Recreational_Sports/General_Information">Recreation and Intramurals</a></li>
</ul>
</li>
</ul>
</div>
<div class="search-box" id="search-box">
<h2 class="title">Search</h2>
<form action="https://www.scranton.edu/search.shtml" id="search">
<div><input name="cx" type="hidden" value="005991389174410019054:di5cu7vwkoc" /> <input name="ie" type="hidden" value="UTF-8" /> <input class="search-text" id="searchBox" name="q" onblur="if(this.value == '') this.value = this.defaultValue;" onfocus="if(this.value == this.defaultValue) this.value = '';" type="text" value="University Website" /> <input class="search-button" id="searchSubmit" name="sa" type="submit" value="Search" /></div>
<input name="siteurl" type="hidden" value="www.google.com/cse/home?cx=005991389174410019054%3Adi5cu7vwkoc" /></form>
<script src="https://www.google.com/cse/brand?form=cse-search-box&amp;lang=en" type="text/javascript">// <![CDATA[

// ]]></script>
</div>

  17. 15 Posted by graham.lewis on 17 Jun, 2016 03:37 PM

    graham.lewis's Avatar

    Matthew,

    Can you send me a link to this live? That way I can take a look at it.

    Sent from my iPhone

  18. 16 Posted by matthew.wren on 17 Jun, 2016 03:55 PM

    matthew.wren's Avatar

    Here's the link directly to the widget. Looking at the source code it omits the navigation entirely.

    Here's a page with the widget applied. The search bar exists but no navigation.

  19. 17 Posted by graham.lewis on 20 Jun, 2016 03:53 PM

    graham.lewis's Avatar

  20. 18 Posted by graham.lewis on 20 Jun, 2016 03:57 PM

    graham.lewis's Avatar

    Matthew,

    Sorry for the delay - did you say this works internally just not when
    published?

    --
    Graham Lewis
    Sales Engineer, Hannon Hill
    p. 678.904.6900 X-116
    w. www.hannonhill.com
    e [email blocked]
    <http://www.facebook.com/HannonHillCorp> <https://twitter.com/hannon_hill>
    <https://www.linkedin.com/pub/graham-lewis/6/228/864>
    <https://instagram.com/hannonhill/>

  21. 19 Posted by matthew.wren on 20 Jun, 2016 04:02 PM

    matthew.wren's Avatar

    Yes, it is omitting the html on publish

  22. 20 Posted by graham.lewis on 20 Jun, 2016 04:03 PM

    graham.lewis's Avatar

  23. 21 Posted by graham.lewis on 20 Jun, 2016 04:04 PM

    graham.lewis's Avatar

    Can you paste the entire format and/or into here?
    --

    Graham Lewis
    Services Developer, Hannon Hill
    p. 678.904.6900 X-116
    w. www.hannonhill.com <http://www.hannonhill.com/>
    e [email blocked] <mailto:[email blocked]>
     <http://www.facebook.com/HannonHillCorp> <https://twitter.com/hannon_hill> <https://www.linkedin.com/pub/graham-lewis/6/228/864> <https://instagram.com/hannonhill/>

  24. 22 Posted by matthew.wren on 21 Jun, 2016 01:11 PM

    matthew.wren's Avatar

    It's just a page with the navigation block attached. For whatever reason the search bar is fine but it fails to include the navigation. I've attached the block content earlier. As soon as I view the page it just display the search bar and the nav disappears. I know the code is there but it's just not including it on the widget page. I tried several code block protections but then it displays the URLs literally so it no longer has the internal linking.

    I've used the same content in a velocity script and having the same results. Is there something else I can provide you to help me out? there's not a whole lot to share.

  25. 23 Posted by graham.lewis on 21 Jun, 2016 01:44 PM

    graham.lewis's Avatar

    Try switching it to an XML block - it's possible that the WYSIWYG is messing with the code.

  26. Tim closed this discussion on 13 Jul, 2016 05:41 PM.

Discussions are closed to public comments.
If you need help with Cascade CMS please start a new discussion.

  • New Issue

  • Conversation Started

  • The discussion is closed

    No more actions from Cascade CMS or the discussion starter are required.

  • Re-open the discussion

Private Permissions

This discussion is private. Only you and Cascade CMS support staff can see and reply to it.

Public Permissions

This discussion is public. Everyone can see and reply to it.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

26 Oct, 2017 08:45 PM Incorrect path in submenus
31 Jan, 2017 08:08 PM example of php (web services) that reads a page and writes a new one
15 Sep, 2016 04:50 PM Best way to convert title tags to h1 tags
30 Aug, 2016 12:28 PM Query using selected option value from select
26 Aug, 2016 02:40 PM Are we suppose to use the new help/support website?

 

26 Aug, 2016 01:19 PM Links in PDF Output
25 Aug, 2016 03:02 PM Site Import Issues
25 Aug, 2016 12:50 PM Velocity syntax for conditional statement with two or more conditions
24 Aug, 2016 08:43 PM Increment integer on loop
24 Aug, 2016 07:20 PM Multi-select
21 Aug, 2016 01:20 PM Include contents from a rendered page