Using MMM-Widget for images

N6NG

How would I use MMM-Widget for adding images like the following to my Magic Mirror?
href=“https://www.hamqsl.com/solar.html” title=“Click to add Solar-Terrestrial Data to your website!”><img src=“https://www.hamqsl.com/solarmuf.php”

Thanks
Dennis

wishmaster270

@N6NG Hi,

I do not know the MMM-Widget module but you could use my MMM-EmbedURL for this job. Simply set the “embedElementType” to “img”.

The config will look something like:

{
  module: "MMM-MMM-EmbedURL",
  position: "top_center",
  header: "Embed-URL",
  config: {
    updateInterval: 120,
    embedElementType: "img", 
    embed: [
        "https://www.hamqsl.com/solarmuf.php" 
    ]
  },
},

N6NG

@wishmaster270 Thank you… I’ll give it a try…
Dennis

N6NG

@N6NG
I put this in my config.js and I get nothing in the bottom_right of my screen. The rest of my MM looks fine… but nothing shows up
from this module.

{
module: “MMM-MMM-EmbedURL”,
position: “bottom_right”,
header: “Embed-URL”,
config: {
updateInterval: 120,
embedElementType: “img”,
embed: [
“https://www.hamqsl.com/solarmuf.php”
]
},
},

Dennis

wishmaster270

@N6NG
Sorry, there was a copy paste mistake in the example. The module name was wrong…

{
  module: "MMM-EmbedURL",
  position: "top_center",
  header: "Embed-URL",
  config: {
    updateInterval: 120,
    embedElementType: "img", 
    embed: [
        "https://www.hamqsl.com/solarmuf.php" 
    ]
  },
},

N6NG

@wishmaster270 I couldn’t see how that would affect it but it sure did…
Thank you so much… works fine lasts a long time.
Dennis N6NG

sdetweil

@N6NG MagicMirror uses the module: setting to find the folder and files…

currently a mispelling is not reported

N6NG

@sdetweil That makes sense… It works well now.

N6NG

@wishmaster270 Is their any way to size the img?
Dennis

wishmaster270

@N6NG I put a small section about styling to the readme.
It is done via custom.css

.embed .embeded {
    width: 800px;
    height: 400px;
}

sdetweil

@wishmaster270 you should always include your module name 1st, in case some other module uses the same sub classes

wishmaster270

@sdetweil Hi Sam, your right. Did avoid this in the past because it was a problem if someone copied the module to have multiple instances. As most of my modules provide multi instance now this shouldn’t be a problem anymore.

I will check the css files of my modules and add prefix all CSS with MMM-ModuleName.

sdetweil

@wishmaster270 and one can make use of the module classes property to make unique names for each of the instances so that you could Target the CSS to the appropriate instance

but like copying, the css must be updated w the new class name selector