Help with HTML for Google Slides

[ericwerth]

Hi everyone, 

I was hoping that someone with HTML experience might be able to help me with a bit of code I have been struggling with.  My goal is to create a rotating set of photos in a Canvas page and my thought was to do this through Google Slides.  I created and published the slideshow but when it plays, it does so with the Slides control bar beneath the photos where someone can move forward or back through the presentation.  I want to strip this out but evidently, this is not currently an option in Slides.

I found the snippet below online and it seems to work, with the caveat that if I change the size of the presentation at all, the Slides control bar reappears.  I currently can't find a way to do something like center it either.  

My knowledge of HTML is minimal.  I can read simple coding elements and change these to try and get the appearance I am looking for through trial and error, but that is about it currently.  If someone could let me know how the code below works to remove the control bar and if there is a way to change its location on a page or size without the control bar reappearing I would be very appreciative.  I could probably use an entirely different program that allows you to turn off controls and then display this in an iFrame, but since I use Drive a lot I was hoping to use Slides, although I am open to suggestions!  Basically, I have been taking out everything from <iframe to 5000 or whatever time designated and replacing this with a new slide show when needed.  

I don't want to take too much of anyone's time, so with any luck there is a fairly simple fix if you know HTML better!

Thanks in advance.

Eric

<div style="margin: 0 auto; width: 99%; height: 330px; overflow: hidden;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQvyWxDREQKT4gDE4i9da1H35E90PVAjhZKrsScHxndMzfg0fYp6..." width="588" height="358"></iframe></div>

[laurakgibbs · Accepted solution]

Hi ericwerth‌ centering is easy; you can just add another style tag to your code like this:

text-align: center;

And then the height and width are just being controlled with the width and height variables, so take out the width and height in the styling and go with the fixed variables. 

So I made it bigger going from 588 to 735 and 358 to 448. I tested it here, and it seems to work! I really really REALLY like this idea, and I am absolutely going to steal it from you!!! 🙂

Testing Drive Slideshow: CanvasLIVE Playground 

<div style="margin: 0px auto; overflow: hidden; text-align: center;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQvyWxDREQKT4gDE4i9da1H35E90PVAjhZKrsScHxndMzfg0fYp6..." width="735" height="448"></iframe></div>

[ericwerth]

Hi laurakgibbs, thanks for the help!  I'm going to keep playing around with this and continue to learn more about HTML.  Luckily it really does make sense when you determine what to look for.  I am still amazed with how much can be done on Canvas pages with HTML.  Please feel free to use whatever you like whenever you like!

[laurakgibbs]

YES! HTML is totally tinkerable-with. That is one of my favorite things about it!

[jpryber]

Hi there,

I came across this post while searching for a way to center my Google Slides in Canvas. Is there a certain place to put the text-align: center; code without messing up the code? 

Please let me know when you can!

Thanks,
Jamey 

[bbennett2]

@jpryber You need to make sure it's inside the style attribute (settings on HTML are called "attributes").

Looking at the HTML, find the div immediately before the <iframe...> tag. Put the `text-align:center` setting inside the double quotes:

<div style="margin: 0px auto; overflow: hidden; text-align: center;"><iframe src="... " width="735" height="448"></iframe></div>

When you save the page, the slides should be centered.

[jpryber]

THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!! Sending you virtual hugs!! 

[laurakgibbs]

P.S. I really think it's better not to suppress the control bar. If people see an image they want to look at, it's good to let them do that not have to rely on the cycle. So, this does autoplay, but it also lets people look through the pictures as they prefer. Is there a reason why you don't want to let them have that control...?

[ericwerth]

Hi again laurakgibbs! I can see a rotating set of images being useful in a number of situations.  If used to showcase student drawings, photographs they have taken, concept maps they have drawn, etc., I see a great benefit in viewers being able to forward, rewind, or especially pause the images.  I started looking for the code to strip the control panel because I was trying to create a page of content and wanted a set of photos to rotate at the top for purely aesthetic reasons.  I wanted visitors to just say, "Oh, that's kind of cool!", when on the page and didn't like the appearance of the control panel or flipping through the images to become the main focus.  I also thought that it might be fun to use this in tables, like a few rotating images of computers next to information on technology, students engaged in learning heading a table row with links to active learning strategies, etc. but the control panel made it look a little busy. 

If only Google would provide an on/off toggle switch (hint hint Google if you are listening).

[laurakgibbs]

If you want just images purely as eye candy, you might consider just making an animated gif. That sure is easy-peasy; I use gifmaker.me, and there are many similar programs like that for making animated gifs.

I guess I am always thinking of images as being more than eye candy, so I like the idea of supplying links with the images, or some kind of additional information so that if your viewers want to do something more than just look, they can click and do something, learn something, etc.. The Google Slide control panel lets them go back and forward, see your notes (even if just captions), and so on.

I am definitely going to be writing up a Google Slide tech tip for my students to make slideshows to put in their blog posts now! 🙂

[ericwerth]

Thanks for the suggestion on making the animated gif! I haven't done that before but am going to check out gifmaker.me for things that are purely window dressing.  For all of the uses that are pedagogical in nature, I'll use your suggestion and keep the control bar!

[traciebosket]

Has anyone noticed that an embedded Google Slide is not readable by a screenreader? As a workaround, I add a direct link to the Slides. For some reason, the screenreader will read it there.

Anyone have any solutions for that?