DESCRIPTION
Learn how to add an image to an HTML module.
Timestamps:
- 0:00 Intro
- 0:18 Clear Module
- 0:35 Add Image
- 1:03 Upload Image
- 1:32 Image Size
- 1:55 Save Image
Transcript:
Tina: 00:01
This video tutorial will show you how to add an image to an HTML module. So we've already added the HTML module on the page. We're all logged in and edit mode and everything. So we're going to go up to the pencil icon in the corner of the module, select edit content.
00:18
We're going to clear out the little placeholder and then select image and browse server. From there, once that renders, we're going to scroll down to the images folder. Your site should have an images folder.
00:35
It may or may not have subfolders. And then we're going to click the upload button here. From there, you can drag and drop a file or you can click add files to get your browser window there, but we're just going to drag and drop our new file in here and then click start upload.
01:03
Once it's uploaded, you can select your image from the list and then click OK. You're going to want to keep relative URL checked. Once your image is in there, you'll want to clear out the height and width that is automatically placing in there.
01:32
Since your site has a responsive framework applied, you're going to want that to just use and fill that browser or module window. If you leave those values in there, it is going to end up possibly on a specially mobile phone making your image bleed past the edge of your device.
01:55
You'll also want to add an alt text in this field as well prior to saving, basically clicking OK and then saving your content. So that is how you can add an image to an HTML module in DNN9.