Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
pembertonm
New Member

Side by Side images on a page

Jump to solution

I have been searching for 3 hours on how to add side by side images to my page

One the left side I have 5 images

On the right side I would like to put one image   

1 Solution

Accepted Solutions
mvanmatre
Community Member

Hi Pembertonm,

No code expert here but have you tried just making a table and inputting the images where you want them to be. Then, in the table properties changing the border to '0' so it's not visual on the screen. I do find that it's not perfectly level but does OK. (The image might seem peachy - Screen Shader - Accessibility tool (free)) 

Screenshot_Tiles in a Table_Canvas.png

View solution in original post

Tags (2)
16 Replies
jbuchholz
New Member

Merri,

Have you tried a two column table? You can hide the border so it looks like succinct images in a row.

Jesse

robotcars
Community Champion

Tables aren't the best use of responsive design for variable screen sizes...

Images get stacked if you break the line (br, div, p)

Depending on the size of the images, they can be placed on the same line.

  

You can place them in a container and float, if the Screen/ViewPort can place them on the same line they will be. If not, they will break, which is responsive, this is preferred. If you force this with a table, it's more likely that the content will be cut off, not on the next line. Unfortunately, the Community is not a great place to demonstrate this, because the width of the content area is fixed. I've supplied an example below.

Note the float:left on images 1 and 2, but not 3. 

<div>
<img src="http://via.placeholder.com/300x150" style="float: left;" />
<img src="http://via.placeholder.com/300x150" style="float: left;" />
<img src="http://via.placeholder.com/300x150" />
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The last one doesn't need any float, if you do, items after the image will start getting pulled next to the image as well. 

Here are 3 images that can share the same line in the content area.

For your specific example, to float something to the right...



The easiest way is to the place it before the content on the left, and float it right.
<div>
<img src="http://via.placeholder.com/150x150" style="float: right;" />
<img src="http://via.placeholder.com/150x150" /><br />
<img src="http://via.placeholder.com/150x150" /><br />
<img src="http://via.placeholder.com/150x150" />
</div>‍‍‍‍‍‍

This explanation is very slim, but it should help you get started. To learn more you can try Googling HTML/CSS layouts and positioning elements on the page.

ellenbcutler
New Member

I have mentioned this elsewhere, but have you considered something like Padlet.com? I use images in all kinds of ways. On a padlet wall (with a link on your course module) you can arrange images pretty well any way you want with or without additional text. There are grids, shelves, free form. I gave in and bought the subscription to get better access because I am using Padlet so frequently, but it is not onerously expensive. If you want a visual, here is the image gallery for my second class arranged in grid. https://padlet.com/ebcutler/primitivism  Here is the reading assignments padlet for the same class arranged in shelves. https://padlet.com/ebcutler/primitivismrdgs (I often have another shelf for videos.)

Overall, I found this to be not particularly labor intensive. The images are all located on my own computer. You don't have top got through the business of putting them in a Canvas file.

Happy to chat with you if you have  questions. Cheers.

This is exactly what I do and was going to suggest

in higher ed we have issues with Padlet and it being accessible to screen readers.  Just keep that in mind as well

Jesse, I'm sure you meant well, but please, please, please, don't EVER suggest using tables for layout. Tables should be used for data only, and must have a caption and row and/or column headers. Test it with the Canvas accessibility checker and you'll see. The most accessible solution is to use CSS floats. CSS Flexbox or CSS Grid might also be useful, but I haven't tested them in Canvas.

 @rlbrown2 ‌, I just want to point out that when it comes to anything having to do with images, the accessibility issues are enormous and require a lot of attention far and beyond any simple checklist like "alt text" information available or other generic accessibility validating for screen readers. That is not to say that such checking is not important, but it is a tip-of-the-iceberg perspective.

If there is educational information being conveyed in an image, an annotated transcript is required, just like for a video. Take, for example, the slide I just shared in a discussion, which is an elaborate Venn diagram. It would take a full page of text to convey all the information in that image that conveys in words not just the text in the image but the meaningful way that the Venn diagram presents the words in relationships to one another:

Digital #Power-ups: Scaffolds and Hashtags for Student Engagement in Online Discussions 

(I spend time doing transcriptions of infographics, and even then I am mostly just transcribing, not attempting to convey the full range of information being presented in visual form.)

So, while I absolutely understand the need to be aware of what the pros and cons are of specific tools, the enormity of the TRUE task of making information from images accessible is something nobody in education can hope to grapple with across the board for all information in all images; sometimes I get the feeling people think that alt-text gets the job done. For some images, yes; for most images, not so much. It will always be the case that if you have a person in class with a severe vision impairment, it will take more than just a screenreader, alt-text, etc. to make sure they have access to the educational information being conveyed in images. That doesn't mean we shouldn't use images or that we should discount generic accessibility checking... but we need to be ready for the huge effort that really will be required if/when we are working with students who have to get the information from an image without seeing that image: chart, graphs, diagrams -- all of which pack enormous amounts of information into an image, and paraphrasing that information in words takes a lot of work!

I've always struggled with accessibility for complex graphics. I recently found the Poet Image Description Training Tool to be extremely helpful in understanding how to adequately describe images for accessibility to be a valuable resource: http://diagramcenter.org/making-images-accessible.html#poet.

I dont disagree with anything you said Laura, however none of that was the question above.

The question was about putting simple images side by side.  My concern about using an "advanced" tool like padlet to accomplish this is overkill and not accessible.  Simply using some basic HTML in this situation is much better.

As a graphic designer and creator of infographics, I get it. I teach marketing and by nature create highly visual content, with a lot of transcribing. 

What we NEED to do as educators is put it on those that create infographics (publishers, news outlets) to make those transcripts.  we NEED to put pressure on the companies like Padlet and Spark (Adobe) to make tools that work for all.