bootstrap popover add separate data attributes for both text and image

Question

I had found some js to extend bootstrap's popover plugin to make it closeable similar to their modal. The popover I'm creating also needs to have a different image for each popover and wanted to add a custom data attribute called "data-image". Is there a way to keep the text in "data-content" and create a new custom one just for an image location?

I've found solutions for showing ONLY the image but keeping the data-content blank and creating a function to grab the data in content:

content: function () {
    return '<img src="'+$(this).data('image') + '" />';

but I would still want to have an attribute for text.

Any help would be great, thank you!

html:

 <div class="acenter">
        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-image="img/moment_images/seattle.png" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</button>
    </div>

js:

$.fn.extend({
    popoverClosable: function (options) {
        var defaults = {
            template:
                '<div class="popover">\
<div class="popover-header">\
<button type="button" class="close" data-dismiss="popover" aria-hidden="true">&times;</button>\
<h3 class="popover-title"></h3>\
</div>\
<div class="popover-image"></div>\
<div class="popover-content"></div>\
</div>'
        };

        options = $.extend({}, defaults, options);
        var $popover_togglers = this;
        $popover_togglers.popover(options);
        $popover_togglers.on('click', function (e) {
            e.preventDefault();
            $popover_togglers.not(this).popover('hide');
        });
        $('html').on('click', '[data-dismiss="popover"]', function (e) {
            $popover_togglers.popover('hide');
        });

    }
});

$(function () {
    $('[data-toggle="popover"]').popoverClosable();
});

Answer 1

I think what you need is:

<div class="acenter">
        <button type="button"
                class="btn btn-default" 
                data-toggle="popover" 
                data-placement="right" 
                data-html="true" 
                data-original-title="Popover on right"
                data-content="<img src='img/moment_images/seattle.png' alt='Seattle'/>Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 
                    Popover on right
        </button> 
</div>