Wrap Text Around an Embedded Google Slide

[traciebosket]

Hi All,

Does anyone know how to wrap text around an embedded Google Slide?

I want to wrap the text below around the Slide. Any ideas?

 

Lorem Ipsum 1:

Lorem Ipsum 2:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sed viverra ipsum nunc aliquet bibendum enim. In massa tempor nec feugiat. Nunc aliquet bibendum enim facilisis gravida. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Amet luctus venenatis lectus magna fringilla. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sagittis orci a scelerisque purus semper eget duis. Nulla pharetra diam sit amet nisl suscipit. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Fusce ut placerat orci nulla. Pharetra vel turpis nunc eget lorem dolor. Tristique senectus et netus et malesuada.

stefaniesanders‌,  @create ‌, snufer‌

[traciebosket]

Oh wait, I figured it out!  @lgibbs3 ‌ & one of our IT guys, taught me how to wrap around embedded Twitter, I just replaced the Twitter iframe with the Google Slide iframe. It turned out like this:

If anyone wants the code, let me know

PS Thanks to  @lgibbs3  & snufer my embedded Twitter feed turned out like this:

Laura's Twitter Workshop Slides

[DrNufer]

Great job.  Sometimes I give my elements a specific width (e.g. 400px or 45%), and then use CSS to float it to the right.  The code for that is [inline] style="float:right;".  Additionally, I like giving it a little margin to the words don't come right up to the element.  

style="float: right; margin-left: 30px; margin-bottom: 30px;" 

That usually looks okay.  If most of your students access via mobile then you might consider smaller margins.  

[traciebosket]

snufer, I like those suggestions. Since I know almost nothing about coding (I got it all from you guys), will you take a look at the code I am going to paste under Dearne's post and show me how/where I should I insert the things you mentioned?

[traciebosket]

Oh yike! That was a bigger question than I thought I asked. I looked the page on my phone, it i terrible! It looks like I need to take a class about making tables display differently on phones. 

I am visioning that I can see a table for design on the computer, but each cell "stack" on each other on a phone. I don't know if "stack" is the correct term. Basically, cell one is displayed, then cell two in underneath cell one, then cell three is below cell two, etc. 

snufer‌ Do you have any suggestions of where I can learn how to do that? Some kind of online class, or resource?

Do you think this would be a good place? CSS Grids

[dearne_willing]

Hi traciebosket‌

Would be interested in the code

By the way, have you used code or a table for the graphics and week links above?

[traciebosket]

 @dearne_willing  You got it., see below. I have a feeling that Sean may suggest adjusting some of the code. If he does, I will re-post it. I made the bottom with tables.

That was going to be my second question; how to do it without using a table. I use A LOT of tables. Does that affect anything, like accessibility? Right now it looks like this:

Here is the code I used. Just replace your code in the red & blue parts, and it (should?) work...

PS make sure to make the Google stuff public, or the student's can't see it. At least that is what I have experienced. I forget that a lot. Maybe there is another way for only the students view them...

(I attached the arrows in case you want them)

         

<p> </p>
<h2 style="background: #01538d; text-align: left; padding-left: 15px;"><span style="color: #ffffff;"><strong>Welcome!</strong></span></h2>
<p><i></i></p>
<p> </p>
<div style="margin: 30px 30px 30px 40px; float: left;">
<div><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQb2Xd6K003VEFOZqxIhW9rJPqCXtkGxRmnWNAEx--hKD9HikLKL..." frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>
</div>
<p>   </p>
<div><span style="color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: small; font-style: normal; font-weight: 400; text-align: start; text-indent: 0px; white-space: normal; background-color: #ffffff; display: inline !important; float: none;"><span style="font-size: 12pt;">Instructor </span><br /></span></div>
<p><strong>Email: </strong><br /><strong>Contact:</strong><br /><strong>Zoom Hours: </strong><br /><br /><span style="font-size: 12pt;">Biography:</span></p>
<p><span style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sed viverra ipsum nunc aliquet bibendum enim. In massa tempor nec feugiat. Nunc aliquet bibendum enim facilisis gravida. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Amet luctus venenatis lectus magna fringilla. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sagittis orci a scelerisque purus semper eget duis. Nulla pharetra diam sit amet nisl suscipit. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Fusce ut placerat orci nulla. Pharetra vel turpis nunc eget lorem dolor. Tristique senectus et netus et malesuada</span></p>
<div>
<div>
<div>
<p> </p>
</div>
</div>
<table style="width: 100%; border-collapse: collapse;" border="0">
<tbody>
<tr>
<td style="width: 855px;">
<p>The Previous <img src="https://coc.instructure.com/courses/19071/files/2374638/download" alt="Arrow Back Button Red 01.png" width="64" height="57" data-api-endpoint="https://coc.instructure.com/api/v1/courses/19071/files/2374638" data-api-returntype="File" />button below will take you back to the last page you visited </p>
</td>
<td style="width: 853.75px; text-align: right;">
<p>The Next button below will take you to <img src="https://coc.instructure.com/courses/19071/files/2356613/download" alt="Arrow Red 02.png" width="64" height="57" data-api-endpoint="https://coc.instructure.com/api/v1/courses/19071/files/2356613" data-api-returntype="File" />the next page </p>
</td>
</tr>
</tbody>
</table>
</div>

[Shar]

Hi Tracie Bosket,

Yes, the tables do affect accessibility! And as you noticed when you looked at the page on mobile, the Previous and Next buttons are displayed differently. Rather than pointing out the buttons, I usually call the buttons by name and indicate that they take one through pages in the module.

I was just looking through Course Evaluation Checklist v2.0 and the section on Accessibility takes one to the WebAIM: Creating Accessible Tables article. You mentioned wanting the table sections stacking in the mobile view, that's how layout tables are also read by a screen reader. Here's another resource about Layout Tables.

At any rate, I used your code then doctored it up a bit. My screen is not nearly as wide as yours so I took the embed size of the slides down to 640px. You had some extra divs around the slides and bio info so I removed those and put in some responsive styling for the slides section so that it will resize to keep the text at the side on smaller/tablet size screens. I also took out your table at the bottom and made more divs which are set up to stack on mobile screens. (I still recommend taking out that instruction altogether especially if this page is the first in the course or not even in a module.)

Desktop:

Android Mobile - long scrolling because of the text:

And here's your code (line-breaks added for readability):

<h2 style="padding: 7px; background: #01538d; color: white;"><strong>Welcome!
</strong></h2>
<div id="Slides-side" class="col-md-7" style="margin: 30px; float: left; 
overflow-x: auto;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-
1vQb2Xd6K003VEFOZqxIhW9rJPqCXtkGxRmnWNAEx--
hKD9HikLKLju6x6i1kFOJA1HSX7reBY5dE7_p/embed?start=false&amp;loop=false&amp;
delayms=3000"
	 width="640" height="376" allowfullscreen="allowfullscreen" 
webkitallowfullscreen="webkitallowfullscreen"
	 mozallowfullscreen="mozallowfullscreen"></iframe>
</div>
<div id="Instructor-side">
	<p><strong>Instructor:</strong> Tea Cher</p>
	<p><strong>Email:</strong> teacher@email.edu</p>
	<p><strong>Contact:</strong> (555)123-4567</p>
	<p><strong>Zoom Hours:</strong>2-4pm CST</p>
	<p><strong>Biography:</strong></p>
	<p><span style="font-weight: 400;">Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Dolor sed viverra ipsum nunc aliquet bibendum enim. In 
massa tempor nec feugiat. Nunc aliquet bibendum enim facilisis gravida. Nisl 
nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Amet luctus venenatis 
lectus magna fringilla. Volutpat maecenas volutpat blandit aliquam etiam erat 
velit scelerisque in. Egestas egestas fringilla phasellus faucibus scelerisque 
eleifend. Sagittis orci a scelerisque purus semper eget duis. Nulla pharetra 
diam sit amet nisl suscipit. Sed adipiscing diam donec adipiscing tristique 
risus nec feugiat in. Fusce ut placerat orci nulla. Pharetra vel turpis nunc 
eget lorem dolor. Tristique senectus et netus et malesuada</span></p>
</div>
<div id="navigationTips" class="grid-row between-md">
	<div id="leftside" class="col-lg-6">
		<p>The Previous <img src="https://xxx.instructure.com/courses/
400/files/188279/download"
			 alt="Arrow-BackButton-Red01.png" data-api-
endpoint="https://xxx.instructure.com/api/v1/courses/400/files/188279"
			 data-api-returntype="File" />button below will take 
you back one page in the series.</p>
	</div>
	<div id="rightside" class="col-lg-6" style="float: right; text-align: 
right;">
		<p>The Next button below will take you to <img 
src="https://xxx.instructure.com/courses/400/files/188278/download"
			 alt="Arrow-NextButton-Red01.png" data-api-
endpoint="https://xxx.instructure.com/api/v1/courses/400/files/188278"
			 data-api-returntype="File" />the next page.</p>
	</div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I, like others in the community, enjoy doing HTML layouts and always looking for creative ways to get content across.

Happy New Year!
Cheers - Shar

[DrNufer]

I took a few days off.  Not quite back yet but checking in.  ishar-uwawesome explanation!  At my institution we've finally eschewed tables for formatting, mostly.  Since Canvas seems to be based in bootstrap, <div>'s are our friends.  Tables are for data and categorization.  :smileygrin:

[traciebosket]

ishar-uw  Ohhh, nice! I going to try this out now. When you said "I still recommend taking out that instruction altogether", are you talking about the back and next icons? 

[Shar]

Hi traciebosket‌,

Yes, remove the sentences with the back and next icons, from my code above remove everything wrapped in the div id="navigationTips".

Cheers - Shar

[traciebosket]

Okay, weird...

I used the code and it worked perfectly. I removed the directions with the images. It gave me a broken message. So, I cleared the code, and pasted the your same code again. Then it showed me the same broken message. I don't understand what would be the difference between when I pasted the code, but the second time I pasted it, it wouldn't allow me to view the Slide...

[Shar]

Hi Tracie,

That is strange... go back into your page history and restore a version that was working correctly and see if the slides embed still works. From my code above everything from rows 1-27 should still work and is not dependent on any files in Canvas.

Cheers - Shar

[traciebosket]

Interesting. I just copied the GoogleSlide's iFrame (a different one!) and it worked. 

[Shar]

Totally crazy the way things work (or don't work) sometimes.

I'm glad ya got it figured out though.

Cheers - Shar

[traciebosket]

Thanks for all of your help Shar!