[ARCHIVED] Insert images on Page

[kjkleiss]

Is there a way to insert at least 2 images on a page in canvas and have them side by side?

When I insert an image and then try to insert a second image, it will put it under the first one. I would prefer to have it next to the first one. Or, can you put a group of 4 images on a page with 2 rows of 2 columns?

Thanks

kjkleiss

[Chris_Hofer]

Hello @kjkleiss ...

How large in size are your images?  If your images are too large to be right next to each other on the screen, then it would make sense that Canvas is putting the second image on the next line.  You may need to modify the image size outside of Canvas to make it smaller before uploading it to Canvas (just re-sizing the image once it is on the page in Canvas does not change the file size of the image).  If you are on a Windows PC, you can use something like the Windows Paint program to resize your image.  As you can see from my example, it's entirely possible to do what you are asking.

Let Community members know if you have any other questions about this...thanks!  Stay safe, and be well.

[kjkleiss]

Hi,

Thank you for the suggestion to resize the pictures first before inserting them. Would you happen to know what might be a good size (W x H) for the pics. Are there any dimensions on the "space" of that boxed area where you type text or insert pics in the page format? I can play around with different pics and get an idea.  If you put in a picture as an example, it did not show up. I see a box with a pale yellow triangle in the middle

 There is so much to learn and so little time.  Thank you again for your suggestions!! 

kjkleiss

[maguire]

If you want to have an array of images you can put them into cells in a table.

For accessibility purposes, do not forget to include a table caption and ALT descriptions for each of the images.

[kjkleiss]

Hi,

I will try that idea!  That way you could change the width and height of the cell that the image is going in as needed. I am surprised that you can not insert a text box into a page and maybe be able to put a border around it. That is another que

[Bobby2]

Hi there @kjkleiss and welcome to the Canvas Community. 

This is a bit of  a challenge sometimes. If your images are just the right size and ready to insert then it's not usually an issue to just insert them one after the other. They will respond to screen sizes so may stack if the screen is small.

I will hunt for some handy tips on how to insert them in rows - without using tables because that's not best practice and makes for an unresponsive page.

Are you confident with HTML? If so then that will help. 

I'm getting used to the new Community layout so it's not at my finger tips at the moment.  

[kjkleiss]

Hi,

I understand how to change some very basic things in the HTML code like width and height, copy for edit. However, my son is a programmer, so he could help me.

If there is a way to put in the code for the pic and then change the spacing in the html for the multiple pictures, if explained which code to use, I could probably do it.

Thank  you for your help! 

[maguire]

There are two ways to do this:

1. use the rich content editor RCE to make a 2x2 table and then use the button to insert an image in each cell (later you can tune the HTML if you wish)

or

2. go to the HTML editor mode in RCE and type in:

<p>Multiplexing (taking separate packets/streams/&hellip; and combining them into one packet/stream/&hellip; ) and demultiplexing (taking one packet/stream/&hellip; and splitting it into multiple packets/streams/&hellip; )</p>
<table width="100%">
<tbody>
<tr>
<th width="50%">Multiplexor</th>
<th width="50%">Demultiplexor</th>
</tr>
<tr>
<td>
<figure><img src="https://canvas.kth.se/courses/17234/files/2703176/download?wrap=1" alt="Multiplexor" data-api-endpoint="https://canvas.kth.se/api/v1/courses/17234/files/2703176" data-api-returntype="File" />
<figcaption>A two-input multiplexor - when receiving inputs A and B in the two inputs, then outputs them in some order via its output</figcaption>
</figure>
</td>
<td>
<figure><img src="https://canvas.kth.se/courses/17234/files/2703177/download?wrap=1" alt="Demultiplexor" data-api-endpoint="https://canvas.kth.se/api/v1/courses/17234/files/2703177" data-api-returntype="File" />
<figcaption>A one-input - two output multiplexor - when receiving inputs A and B on its input, then outputs them to two destinations</figcaption>
</figure>
</td>
</tr>
</tbody>
</table>

This generates:

<< Image attached>>

Below it, I actually have a 2x2 table of the 4 alternatives:

<<Image attached>>

The code is <p>We can utilize multiplexors and demultiplexors in multiple ways. Consider the following 4 alternatives:</p>
<table width="100%">
<tbody>
<tr>
<td width="50%">
<figure><img src="https://kth.instructure.com/courses/17234/files/2701448/download?verifier=Ba4g4EUJPNw7hSpLB4henVsbh2..." alt="Downward-multiplexing" data-api-endpoint="https://kth.instructure.com/api/v1/courses/17234/files/2701448" data-api-returntype="File">
<figcaption>Downward-multiplexing</figcaption>
</figure>
</td>
<td width="50%">
<figure><img src="https://kth.instructure.com/courses/17234/files/2701442/download?verifier=iejNxGtDldGpdrI02rsfx0XJYD..." alt="Upward-demultiplexing" data-api-endpoint="https://kth.instructure.com/api/v1/courses/17234/files/2701442" data-api-returntype="File">
<figcaption>Upward-demultiplexing</figcaption>
</figure>
</td>
</tr>
<tr>
<td width="50%">
<figure><img src="https://kth.instructure.com/courses/17234/files/2701456/download?verifier=rsdjdwb2liOj1NQgAWi7GnIUKb..." alt="Downward demultiplexing" data-api-endpoint="https://kth.instructure.com/api/v1/courses/17234/files/2701456" data-api-returntype="File">
<figcaption>Downward-demultiplexing</figcaption>
</figure>
</td>
<td width="50%">
<figure><img src="https://kth.instructure.com/courses/17234/files/2701443/download?verifier=KwEnaQxddHRRi0oIytlAof9r2s..." alt="Upward-multiplexing" data-api-endpoint="https://kth.instructure.com/api/v1/courses/17234/files/2701443" data-api-returntype="File">
<figcaption>Upward-multiplexing</figcaption>
</figure>
</td>
</tr>
</tbody>
</table>

Of course, the URLs to your images and your text will be different, but it shows the basic idea.

[kjkleiss]

Thank you so much for the code! I will take a look at this and try it!!

I appreciate everyone's help. This is a wonderful community and I feel lucky to have found it!

Thank you!

[reid_mclain]

Hi kjkleiss

This recent video was instrumental for me to figure out the graphic spacing for homepages as I wanted my images to align too. However I needed it to also work on mobile Using Graphics to Create Meaningful Experiences for Students in Canvas <-- I learned a simple HTML trick in this video that helped keep the extra text aligned with the graphics too, and it works so well. 

Also two other recent videos about page layout, you may find helpful. One is the Engaging Students with Dynamic Homepages (I could not find this in the Community only on YouTube). Also theCanvas: Keys to Good Design and Usability recent Canvas Live video was great for me to see other ideas and make them work for my classes. 

One more thing, be sure to check out the How do I view a course as a test student using Student View? and student mobile view for the pages you are making and see what renders for students. I learned my lesson a couple of years ago I tried to make a clean page with tables, but my students access Canvas mostly on their phones, and they had trouble seeing what I designed when on their phones. Some tables I made were fine, some were not just sure to check as the views are different. 

Happy Class Planning, 

Cheers!

Reid 

[maguire]

To avoid any complaints about "What will it look like on a mobile device?"

The linked images show the relevant parts of the page on an Android smartphone.

 2x1 example 

2x2 example