ExpressionEngine & Hype

I’ve been using Hype to create a new responsive version of my website, which is housed in ExpressionEngine. For web pages that are a known height, Hype plays very well with EE. But many pages on my website are of varying lengths, based on the body text of the web page. Users input content into EE, so I don’t know the height of the content they enter. I can bring the page content into a Hype layout with the HTML Widget (iframe,) but the text will be constrained to the size of the HTML Widget and also the height of the Hype layout. I could make the iframe scrolling and remind people of the olden days of yore when we used frames, but I think they’d kill me.

My workaround plan is to use Hype for the home page, pulling in content via HTML Widgets, and then use EE for the longer pages, with the main menu generated by Hype and then inserted at the top of the page body.

To see what I’m working with, here is the home page that I will duplicate in Hype and make responsive:

And here is an example of a page with content where I plan on using Hype just for the menu:

Am I missing something? Is there a way to bring web text content of unknown height into a Hype layout without using scrolling in an iframe?

Unfortunately Hype’s scene size (or other elements below) are all fixed so they can’t currently change in response to text elements above growing in size.

About the best workaround you could do is with Hype Pro make multiple responsive layouts. Each layout can have a different height, so you could make a few which would roughly fit to the size appropriately. I’m not sure how this would integrate into EE though.

This is a problem we’ve definitely been pondering; sadly we’re just hitting up against the fact that Hype stems from its animation roots which prefer absolute positions.

I can take the HTML page generated by Hype and put it into EE, and then add content on the end of it before the close body tag, but if the page is fully created in Hype then any content I add will appear below the footer. If I went with a solid color background and didn’t put the footer in the Hype page, I could probably put the content and the footer in the HTML file. Or I could make multiple layouts and match them up with the content as you suggest. I’ll try both, as well as the idea of just using Hype for the header and embedding that into an EE template. Thank you very much for your response. I just didn’t want to overlook anything.

Just as a followup for anyone interested - I’ve come up with a solution for how I will use Hype with our EE site.

  1. Generate the scene with multiple layouts in Hype, but set the height to only be tall enough to contain the site’s top navigation menu bar and a header image in each layout. Add a link to my EE site base CSS file.
  2. Save out as HTML.
  3. Put the data folder into a static location on the web server.
  4. Copy and paste the HTML file into a EE template.
  5. Change the path in the HTML file to point to where the data folder is located.

That puts the Hype site live. To add the EE content to it:
6. Add the EE entries loop after the “copy these lines to your document” section

That’s it. My EE is set up so that the data that shows in the loop will be determined by the URL the user pulls up. The page will extend down to show whatever content is in the EE loop. Works great!

Hype has an area where you can modify the header, which is very handy for linking to my own css files. It would be great if Hype had another area where you could enter your own HTML and it would automatically be inserted just before the tag. For people trying to integrate Hype into a CMS, this would be very useful. But if this idea doesn’t make sense, it’s not the end of the world to have to insert the HTML into the HTML file Hype spits on on export.

Yeah, I agree it would be nice if we allowed more free form editing of the entire HTML page. You can set exports to not write out an html file (so you can customize your own and not have it blown away), but that’s really for export only and doesn’t help for quick previews.

This thread sums up well the issues I’ve had trying to make Wordpress integration makes sense.

About the best parts I’ve done so far is make a featured post carousel type animation with excerpts and then on user click send to the Wordpress single post page.

My AJAX is terrible, though and my jQuery even worse so it doesn’t always grab the post titles and excerpts, but close.

I haven’t figured out a good way to deal with showing a full post for all the reasons mentioned here.

One little trick that’s obvious but also helpful is to uncheck “Draw scene backgrounds” for the scene. Then you can point to your own CSS file and set the background color and/or background image, and the content from Hype and from your CMS will have the same background.

One thing I learned to appreciate about using jQuery & the new availability of classes within Hype: You can easily grab attributes or text from the document in which you embed your Hype widget, hide that text in its original place and append it to an element in Hype.

The trick for this to work reliably is getting the timing right - call the function to grab post titles etc from within Hype on scene start, so that the document has finished loading before the script starts manipulating the document content.

To show a full post within Hype (I don’t think that’s a good idea, btw, Hype is not good at responsive text) you can simply give its container element a class and tell jQuery to take the text inside and append it to an element inside Hype.

1 Like