Embedding a Flipbook

Alex's Avatar

Alex

12 Feb, 2016 07:57 PM

I have several moving-piece items on the site (calendar, carousel...), but when it comes to embedding a flip book application to the page, it al falls flat. Please help me fix this!

  1. 1 Posted by Ryan Griffith on 16 Feb, 2016 02:21 PM

    Ryan Griffith's Avatar

    Hi Alex,

    To confirm, are you attempting to insert embed code somewhere within your page structure, or are you trying to build out the embed code dynamically using a Format?

    Can you elaborate a bit more on "it falls flat"? If you view the source code of the page render frame, do you see your embed code? If you do, check for issues such as JavaScript errors or an insecure content error (ie loading http:// content while Cascade is running on https://).

    Please let me know if you have any questions.

    Thanks!

  2. 2 Posted by Alex Padilla on 16 Feb, 2016 04:31 PM

    Alex Padilla's Avatar

    I can often see the yellow placeholder that represents the object and the code in the editor. But the preview after pushing "submit" disappears. The code is straight form a Flipbook service, so I'm not sure how there would be Javascript errors. Maybe you could see the code and decide.

    On Feb 16, 2016 7:22 AM, Ryan Griffith <[email blocked]> wrote:

    // Please reply above this line
    ==================================================

    From: Ryan Griffith (Support staff)

    Hi Alex,

    To confirm, are you attempting to insert embed code somewhere within your page structure, or are you trying to build out the embed code dynamically using a Format?

    Can you elaborate a bit more on "it falls flat"? If you view the source code of the page render frame, do you see your embed code? If you do, check for issues such as JavaScript errors or an insecure content error (ie loading http:// content while Cascade is running on https://).

    Please let me know if you have any questions.

    Thanks!

    On Fri, Feb 12 at 11:57 AM PST, Alex wrote:

    I have several moving-piece items on the site (calendar, carousel...), but when it comes to embedding a flip book application to the page, it al falls flat. Please help me fix this!

    Having trouble reading this? View this discussion online: Embedding a Flipbook.

    Reply with #ignore to stop receiving notifications for this discussion.

  3. 3 Posted by Ryan Griffith on 16 Feb, 2016 06:47 PM

    Ryan Griffith's Avatar

    Hi Alex,

    I'd be happy to test this out locally. When you have a moment, please attach or paste the embed code you are entering and describe how/where you are entering it.

    For example, is this being added to a WYSIWYG field or an XML Block. If a WYSIWYG field, are you simply pasting the code into the HTML source editor or using the Insert Media feature?

    Thanks!

  4. 4 Posted by Alex Padilla on 16 Feb, 2016 07:14 PM

    Alex Padilla's Avatar

    Here is an example of the types of flip books that I've tried. As for how I have attempted to embed them, I've tried Insert Media, Ive tried doing it directly into the HTML editor, and I've tried to make a content block out of it. None have worked.

    <iframe src="http://files.flipsnack.com/iframe/embed.html?hash=fdn3b5aiz&wmode=window&bgcolor=EEEEEE&t=1455309301" width="100%" height="100%" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

    ________________________________
    From: Ryan Griffith <[email blocked]>
    Sent: Tuesday, February 16, 2016 11:47 AM
    To: Alex Padilla
    Subject: Re: Embedding a Flipbook [How Do I... #21371]

    // Please reply above this line
    ==================================================

    From: Ryan Griffith (Support staff)

    Hi Alex,

    I'd be happy to test this out locally. When you have a moment, please attach or paste the embed code you are entering and describe how/where you are entering it.

    For example, is this being added to a WYSIWYG field or an XML Block. If a WYSIWYG field, are you simply pasting the code into the HTML source editor or using the Insert Media feature?

    Thanks!

    On Tue, Feb 16 at 08:31 AM PST, Alex Padilla wrote:

    I can often see the yellow placeholder that represents the object and the code in the editor. But the preview after pushing "submit" disappears. The code is straight form a Flipbook service, so I'm not sure how there would be Javascript errors. Maybe you could see the code and decide.

  5. 5 Posted by Wing Ming Chan on 16 Feb, 2016 08:32 PM

    Wing Ming Chan's Avatar

    Hi Alex,

    You can wrap the iframe code up using a div and put the code directly in a WYSIWYG. But I want to point out one thing: the iframe requires flash to run. This is running against the trend of the technology since your page won't work on many gadgets.

    Wing

  6. 6 Posted by Ryan Griffith on 16 Feb, 2016 08:53 PM

    Ryan Griffith's Avatar

    Hi Alex,

    I was able to successfully insert the embed code in my local Cascade 7.12.5 instance and preview it after submitting the page.

    One thing I noticed is the Flipbook URL begins with http://. Is your Cascade instance behind SSL by chance (ie https://)? If it is, check your browser to see if it is blocking the insecure content from loading. If you are using Chrome, this is generally a red icon to the right of the URL.

    To avoid this issue, it looks like you can go scheme-relative, which is to replace the protocol with //. So your embed code would look like the following:

    <iframe width="100%" height="100%" allowtransparency="true" frameborder="0" scrolling="no" seamless="seamless" src="//files.flipsnack.com/iframe/embed.html?hash=fdn3b5aiz&amp;wmode=window&amp;bgcolor=EEEEEE&amp;t=1455309301"></iframe>
    

    Please let me know if you have any questions.

    Thanks!

  7. 7 Posted by Alex Padilla on 16 Feb, 2016 08:58 PM

    Alex Padilla's Avatar

    That is a little bit closer, but the object still appears with this image,

    ________________________________

  8. 8 Posted by Ryan Griffith on 17 Feb, 2016 03:01 PM

    Ryan Griffith's Avatar

    Hi Alex,

    Couple of questions to see if we can narrow things down a bit:

    • Can you confirm Chrome is not blocking the content from loading? Look for the red icon to the right of the URL.
    • If you view the source of the render frame, does the <iframe> code look correct?
    • If you open Chrome's developer console, do you see a request error for the URL //files.flipsnack.com/iframe/embed.html?hash=fdn3b5aiz&amp;wmode=window&amp;bgcolor=EEEEEE&amp;t=1455309301? It would most likely be a 404 error.

    Please let me know if you have any questions.

    Thanks!

  9. Support Staff 9 Posted by Tim on 09 Mar, 2016 04:17 PM

    Tim's Avatar

    Hi Alex,

    Just wanted to make sure you saw Ryan's comment above. Let us know how things are going.

    Thanks!

  10. Tim closed this discussion on 23 Mar, 2016 05:12 PM.

Comments are currently closed for this discussion. You can start a new one.

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