Is there a way to add an image and not a background image?

[frazerf]

Sorry if this is the wrong forum but I've tried everything with no luck. I'm currently trying to create an image to add in to the DOM. I know how to do this as a background but not as a plain image. Can anyone help?

this.sliderImage = this.smartObject({
    backgroundImage: 'images/1_1.jpg',
    parent: this.sliderHolder
});

[joemidi]

Sorry @frazerf, there isn't a "Bannertime" way to do this, but you can use normal Javascript to do it.

// Create an empty container to add your image to
this.sliderHolder = this.smartObject({
  width: this.bannerWidth,
  height: this.bannerHeight,
  parent: this.banner
});

// Create an image element
var image1 = document.createElement('img');
image1.src = 'images/1_1.jpg';

// Attach image element to container
this.sliderHolder.appendChild(image1);

You can see this working on CodePen

[pyramidium]

Would it be useful to add a method which allows creation of an image as a smart object like the video method?

Something like this perhaps?

this.inlineImage = this.smartObject({
  type: 'img',
  src: 'images/1_1.jpg',
  alt: 'Alt tag',
  parent: this.banner
});

[KP-DEV]

Nice one, think that will work perfectly. And as you said it's the same as video so everyone is familiar with the setup.

[frazerf]

Thanks guys! @joemidi Cheers for the codepen as well, super helpful! Would be awesome to include that as a feature @pyramidium

[pyramidium]

Cool I'll take a look at this tonight.