How do I add a Image to Reason theme Blog?


(Michael Walker) #1

I’m new here and older and my son turned me onto Rapidweaver, which i am very thankful for!

I just can’t seem to post along with my comments an image with my comments in the blog, they are in my resources the images that is, and I though I could drag an drop like I read on this forum, I’m sure I am wrong, but how do you do it without code? I was able to produce a very nice website without much code at all which i am not good at like my son…

Thank you for any help…


(Brad Halstead) #2

@Flashoser

You cannot drag and drop from the resources folder onto a page. You have to use the %resource()% macro in an image tag like thus:

<img src="%resource(sampleimage.jpg)%">

And all should be good…

HTH
Brad


(Michael Walker) #3

is there a way to reduce th size of them in that line? and by the way thank you very much…


(Jannis from inStacks Software) #4

@Flashoser

Michael, try this:

With this, you control the height of the image, and the width will adjust accordingly in respect to the original image layout.

Cheers, Jannis


(Michael Walker) #5

that did it perfectly!!! thanks!!!


(Oscar Schmid) #6

@instacks
Thank you, Jannis
Why this code does not work in Tesla, Split and some other themes?
How can I adjust the code for these themes?


(Jannis from inStacks Software) #7

Hi @Oscar,

This should be theme independent:

Cheers, Jannis


(Oscar Schmid) #8

No solution found in the w3school pages.
But, when I set the image width only, it works!

<img src="%resource(image.jpg)%"width="300px">


(Brad Halstead) #9

@Flashoser

Don’t forget to add the alt attribute

<img src="%resource(sampleimage.jpg)%" height="200px" width="auto" alt="sample text describing image">

Some good resources mentioned by @instacks and @Oscar

Brad


(Oscar Schmid) #10

The alt text is always forgotten :wink:


(Oscar Schmid) #11

Strange, in Tesla and some other themes, this code only works with data in width, not in height.

<img src="%resource(image.jpg)%" height="auto" width="600"alt="image description"</img>