Image-Text Combo code

[cfelton1]

I found in the style guide (which I understand may not work in the content editor as advertised) code for Image-Text combo.  I tried it in the text editor, and it indeed did not work. 

Here is how it rendered:

Here is my code:

<p>In this module we will use two vignettes to show how the information can be put into practice in a preschool classroom.</p>
<div class="grid-row">
<div class="col-xs-12 col-lg-6">
<div class="ic-image-text-combo">
<div class="ic-avatar"><img src="https://uabonline.instructure.com/courses/585/files/164022/download?wrap=1" alt="CorporateHeadshots-01.jpg" data-api-endpoint="https://uabonline.instructure.com/api/v1/courses/585/files/164022" data-api-returntype="File" /></div>
<div class="ic-image-text-combo__text">Vignette 1:  A preschool classroom where the teacher, Miss Martin speaks only English. Two of the children, Luis and Ana, speak Spanish and one of the children, Jun, speaks only Korean.</div>
<div class="ic-image-text-combo__text"></div>
</div>
</div>
<br />
<div class="grid-row">
<div class="col-xs-12 col-lg-6">
<div class="ic-image-text-combo">
<div class="ic-avatar"><img src="https://uabonline.instructure.com/courses/585/files/164023/download?wrap=1" alt="CorporateHeadshots-20.jpg" data-api-endpoint="https://uabonline.instructure.com/api/v1/courses/585/files/164023" data-api-returntype="File" /></div>
<div class="ic-image-text-combo__text">Vignette 2: A preschool classroom where the teacher, Miss Maria, speaks both English and Spanish. About half of the students are Spanish speakers and half are monolingual English speakers.</div>
</div>
</div>
</div>
</div>

Can someone help me correct the code so that:

1. The text fills the entire line.

2. The image shows up as an icon.

3. There is a break between the two sections.

[awilliams]

Hey cfelton‌, are you trying to wrap text around an image? If so, you will be interested in the discussion at How to wrap text around an image using the Rich Content Editor and the shortcut method discovered later in that discussion.

[langlangcat]

Hey, @Courtney Felton,

If I am not mistaken, you have partially rendered these codes, you may want to resize the jpg file: CorporateHeadshots-01.jpg to width="60" and height="60", see what happens.

After the resizing, you should be able to see the picture displayed in the circle. The dark brown dot you see now in the icon, must be a tiny part of the whole picture, somehow the CSS won't shrink the picture size.

Let me know what you find out.

[jbreslow]

Hello,

 @langlangcat ‌ is correct, just add a height and width to the image, but I would suggest adding the following to make sure the original aspect ration is kept.

style="width: 50px; height: auto;"

<img style="width: 50px; height: auto;" src="http://www.muse10photography.com/wp-content/gallery/head-shots/headshots-17.jpg" alt="CorporateHeadshots-01.jpg" data-api-endpoint="https://uabonline.instructure.com/api/v1/courses/585/files/164022" data-api-returntype="File" />

Note: I used different images but still should work the same with your images.

[jbreslow]

Sorry, I didnt see the other questions.

<p>In this module we will use two vignettes to show how the information can be put into practice in a preschool classroom.</p>
<div class="grid-row">
<div class="col-xs-12 col-lg-12"> <!--- change col-lg-6 to col-lg-12 --->
<div class="ic-image-text-combo">
<div class="ic-avatar"><img style="width: 50px; height: auto;" src="http://www.muse10photography.com/wp-content/gallery/head-shots/headshots-17.jpg" alt="CorporateHeadshots-01.jpg" data-api-endpoint="https://uabonline.instructure.com/api/v1/courses/585/files/164022" data-api-returntype="File" /></div>
<div class="ic-image-text-combo__text">Vignette 1: A preschool classroom where the teacher, Miss Martin speaks only English. Two of the children, Luis and Ana, speak Spanish and one of the children, Jun, speaks only Korean.</div>

<div class="ic-image-text-combo__text"></div> <!-- extra div, delete it --->
</div>
<br />
<div class="grid-row" style="margin-top: 2em;"> <!-- adds a margin to the top which adds space between the two Vignettes --->
<div class="col-xs-12 col-lg-12"> <!--- change col-lg-6 to col-lg-12 --->
<div class="ic-image-text-combo">
<div class="ic-avatar"><img style="width: 50px; height: auto;" src="http://picturesbytodd.com/wp-content/uploads/2013/07/Studio-Head-shots-Professional-Main-Line-Philad..." alt="CorporateHeadshots-20.jpg" data-api-endpoint="https://uabonline.instructure.com/api/v1/courses/585/files/164023" data-api-returntype="File" /></div>
<div class="ic-image-text-combo__text">Vignette 2: A preschool classroom where the teacher, Miss Maria, speaks both English and Spanish. About half of the students are Spanish speakers and half are monolingual English speakers.</div>
</div>
</div>
</div>
</div>
</div>

Hope this helps.

Josh

[cfelton1]

Thank you for your help. I got sidetracked by another project and just got back to this. It works perfectly!