Highlighted

Embed HTML with the Path to an Image File

Participant ,
Mar 14, 2018

Copy link to clipboard

Copied

I’d like to embed HTML on a page, to create a simple hyperlinked image. Neither of these works:

Simply placing the image file into the same directory as the Muse project file and using the name of the file as the path fails:

<a href="#some-page"><img src="some-button.png"></a>

Placing the image in the Assets panel, and choosing Copy Full Path fails:

<a href="#some-page"><img src="/Volumes/Drivename/some-button.png"></a>

How do I insert the path to an image so that I can Preview Site in Browser…?

Thanks.

Add the image as a file for upload. In the code, the path must be assets/some-button.png

Views

838

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Embed HTML with the Path to an Image File

Participant ,
Mar 14, 2018

Copy link to clipboard

Copied

I’d like to embed HTML on a page, to create a simple hyperlinked image. Neither of these works:

Simply placing the image file into the same directory as the Muse project file and using the name of the file as the path fails:

<a href="#some-page"><img src="some-button.png"></a>

Placing the image in the Assets panel, and choosing Copy Full Path fails:

<a href="#some-page"><img src="/Volumes/Drivename/some-button.png"></a>

How do I insert the path to an image so that I can Preview Site in Browser…?

Thanks.

Add the image as a file for upload. In the code, the path must be assets/some-button.png

Views

839

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 14, 2018 0
Guide ,
Mar 14, 2018

Copy link to clipboard

Copied

Add the image as a file for upload. In the code, the path must be assets/some-button.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2018 0
Participant ,
Mar 14, 2018

Copy link to clipboard

Copied

Thank you. At your suggestion, I added the file for upload, but this does not work:

<img src="assets/some-button.png">

Nor does the full path work.

<img src="/Volumes/muse/some-button.png">

which is the exact location of the file.

I'm puzzled.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2018 0
Participant ,
Mar 14, 2018

Copy link to clipboard

Copied

I now understand, but it is not a complete solution.

The answer is that Muse Preview Site In Browser cannot display an image embedded in an HTML object.

Only the exported site can display the image in a browser, even though it appears as a question mark in Design view.

Thank you, Pavel, for pointing me in the right direction.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 14, 2018 0
Guide ,
Mar 15, 2018

Copy link to clipboard

Copied

To make it more flexible to embed code, you can install something like XAMPP on your computer. Then you can place any folders and files relative to the root directory of the site (not to be confused with the Muse file).


In this case, the workflow will be somewhat more complicated. In order to view the site with such assets, you must export it as html to the domain folder created inside XAMPP. To view the site, you must type the address of this domain in the browser. You can place any files and folders in this directory and use relative paths when embedding html code.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 15, 2018 0
Participant ,
Mar 15, 2018

Copy link to clipboard

Copied

Yes! I have installed MAMP, and will be using it for testing.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 15, 2018 0
Guide ,
Mar 15, 2018

Copy link to clipboard

Copied

I am confused as to why you are doing this in such a convoluted way. Why are you not placing the image in Muse and making it a hyperlink?

David

Creative Muse

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 15, 2018 0
Participant ,
Mar 15, 2018

Copy link to clipboard

Copied

Because I am navigating a Single Page App (SPA) with anchors.

The Muse Hyperlink menu that you cite still imposes a slow scroll on every link to an anchor, with no way to stop it or change the rate of scroll. Any other transition (or no transition at all) requires that you insert an HTML link or a widget of your own.

Moreover, if you want that link to be appear as a button, and not as a text link, you need an image embedded in your HTML.

And, so... here we are.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 15, 2018 0
Guide ,
Mar 16, 2018

Copy link to clipboard

Copied

I see. The reason wasn't clear to begin with. I put a quick widget together that does what you want. Just give your button(s) a graphic style and enter that into the widget options. It's a hack but quicker than messing with file paths.

Dropbox - Creative Muse - Slow Scroll Remover.mulib

David

Creative Muse

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 16, 2018 0
Participant ,
Mar 16, 2018

Copy link to clipboard

Copied

Thanks for this. It looks like a great time-saver.

However, I can't get it to work. The button is linked to an anchor at the bottom of the single page.

The style matches. But it still scrolls, even after export to HTML.

What am I doing wrong?

Nice website and widgets, by the way.

no-scroll-test.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 16, 2018 0
Guide ,
Mar 16, 2018

Copy link to clipboard

Copied

Can you share the link to the site (test or otherwise) so I can look at the code. Testing worked for me but there may be differences in your site.

David

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 16, 2018 0
Participant ,
Mar 16, 2018

Copy link to clipboard

Copied

Never mind. On a hunch, I quit Muse and relaunched it.

Now your widget works a treat, even with Preview Site in Browser…

Thanks much. I will give you credit wherever I use it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 16, 2018 0
Guide ,
Mar 19, 2018

Copy link to clipboard

Copied

No problem, I'm glad it works for you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0