cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
traciebosket
Community Champion

Wrap Text Around an Embedded Google Slide

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

15 Replies
traciebosket
Community Champion

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:

wrap text around Google Slide

If anyone wants the code, let me know Smiley Happy

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

Laura's Twitter Workshop Slides

wrap text around Twitter feed

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.  

Hi traciebosket

Would be interested in the code Smiley Happy

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

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?

 @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:

Table

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)

Back arrow red  Forward arrow red   Arrow Start here red   Arrow straight Back red Arrow straight Forward red

<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>

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

Shar
Community Champion

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:

Tracie

Android Mobile - long scrolling because of the text:

TracieTracie

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
Community Advocate
Community Advocate

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
Community Champion

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?