Adding a slideshow to Guide articles

Answered

8 Comments

  • Comment actions Permalink

    Hi Christen,

    There are a number of available options for embedding image slideshows, the simplest thing to do might be using Google slides - here's a guide for doing that.

    I did a quick test on a Guide article and think it came out quite nice:

    For this or some other image embed service to work, you'll want to make sure that you have enabled the "Display unsafe content" checkbox in the Guide Security setting.

    Once you have your embed code for the slideshow you open up the article's Source Code editor and paste it where you want it displayed in the content.

     

    Hope that helps you out.

    2
  • Nicole - Community Manager
    Comment actions Permalink

    Hey Christen - 

    There's no native "slideshow" functionality, but it's possible that someone from the community know s how or could help custom build something like that. I'll ping a few folks to see if anyone has ideas. 

    1
  • Andrew J
    Comment actions Permalink

    @Jacob, great tutorial!  

    1
  • Comment actions Permalink

    Excellent! Good to hear, feel free to come back and share your solution, especially if you find a responsive embed solution.

    Thanks Andrew ;)

    1
  • Comment actions Permalink

    Awesome Christen!

    Will need to try that myself, thanks for sharing!

    1
  • Christen Bejar Sandbox
    Comment actions Permalink

    Thank you @Jacob, this is definitely a good start for me. Now I can investigate into making it responsive. :)

    0
  • Christen Bejar Sandbox
    Comment actions Permalink

    I ended up finding a bit of CSS online that made this work. 

    Note: pretty sure this is reliant on allowing unsafe content, I haven't tested otherwise.

    For the Google Slides iframe container, I modified the HTML within the article directly:

    <div class="intrinsic-container intrinsic-container-16x9"><iframe src="https://docs.google.com/presentation/d/e/SPECIALGOOGLENUMBERHERE/embed?start=false&amp;loop=false&amp;delayms=3000" frameborder="0" allowfullscreen="true"></iframe></div>

    Note: The Google Slides width and height are intentionally removed. It gets expanded by the CSS.

    In the style.css, I went ahead and added this piece to the bottom:

    /* responsive slidesframe */
    .intrinsic-container {
    position: relative;
    height: 0;
    overflow: hidden;
    }

    /* 16x9 Aspect Ratio */
    .intrinsic-container-16x9 {
    padding-bottom: 56.25%;
    }

    /* 4x3 Aspect Ratio */
    .intrinsic-container-4x3 {
    padding-bottom: 75%;
    }

    .intrinsic-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    Published both and it looks to be working. Props to https://benmarshall.me/responsive-iframes/ where I originally found the code changes.

    Thanks everyone for the assistance, and if anyone manages to find a solution to this without allowing unsafe content, let me know! 

    0
  • Ruby Bailey
    Comment actions Permalink

    is it possible to use this for powerpoint documents?

     

    I've uploaded the powerpoint to the article asset and tried this:

     

    <iframe src="https://view.officeapps.live.com/op/embed.aspx?src={html://oururl........Audiences.pptx}" width="100%" height="600px" frameborder="0">
     </iframe>

    but am getting this error:

    0

Please sign in to leave a comment.

Powered by Zendesk