Highlighted

How do I embed graphics into a RoboHelp HTML file?

Explorer ,
Dec 12, 2014

Copy link to clipboard

Copied

I am using RH 11 and generating to WebHelp.  My developers want the Release Notes to be one HTML file with the graphics embedded and not linked.  They are okay with having a cascading style sheet.

How do I get my Release Notes set up so that the graphics are embedded and not linked, such that there is one HTML file and a cascading style sheet?

Thanks!

Views

421

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

How do I embed graphics into a RoboHelp HTML file?

Explorer ,
Dec 12, 2014

Copy link to clipboard

Copied

I am using RH 11 and generating to WebHelp.  My developers want the Release Notes to be one HTML file with the graphics embedded and not linked.  They are okay with having a cascading style sheet.

How do I get my Release Notes set up so that the graphics are embedded and not linked, such that there is one HTML file and a cascading style sheet?

Thanks!

Views

422

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
LEGEND ,
Dec 12, 2014

Copy link to clipboard

Copied

Hi there

Are you sure your dev team isn't messing with you?

To my knowledge, there is no way to embed graphics in an HTML page. They are always linked. HTML doesn't behave like Microsoft Word does.

Cheers... Rick

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...
Explorer ,
Dec 12, 2014

Copy link to clipboard

Copied

Yes, they are very adamant about wanting one HTML file for the Release Notes.  They want the Release Notes to show up on the Help menu as one item separate from the rest of the Help on that menu.  This is how they have always done it.  I don't know how my predecessor did it, and nobody here knows how my predecessor did it.  My manager doesn't know how he did it.

I'm thinking that I'm going to have to do the Release Notes in Word and save them as HTML rather than have them in RoboHelp.

I even tried to capture the Release Notes in SnagIt, but SnagIt does not save as HTML.

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...
LEGEND ,
Dec 12, 2014

Copy link to clipboard

Copied

What I might advise is to open the older version where it has what they are expecting. Click the link and inspect things. As you are working in RH 11, and assuming your predecessor was as well, it should be pretty easy to do. Just right-click what opens and begin to inspect.

The only way I'm aware of to create a single file containing images and everything is to create either a Microsoft Word document or an Adobe PDF. Perhaps your predecessor was doing that. Only detective work will ferret that out.

The bottom line here is that the very nature of HTML and the way it works is to link to things. Images are always separate objects that are linked to in some way. I would be happy to see an example, any example really, that has an HTML page with an image that is embedded. It's just not possible to achieve. Even if you take a Word document and save it as HTML, you will end up with any images as being separate objects.

Cheers... Rick

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...
Adobe Community Professional ,
Dec 12, 2014

Copy link to clipboard

Copied

When you get Word to save as HTML it will create a sub folder and put the images there. You could move them to the same folder and change the links but they will still be separate files. What you want, just one HTML file and nothing else, cannot be done.

Only a PDF would give what you want.

Ask the developers to send you a previous example and offer them cream cakes on receipt. They will not be eating cream cakes, more like humble pie!

______________________________________________

Peter Grainge

www.grainge.org

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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...
LEGEND ,
Dec 15, 2014

Copy link to clipboard

Copied

Actually, you can embed the images using CSS. Basically, you save a base64 encoded string of the image in your CSS and use that as a background image.The downside is that you have to style a block element (such as a div) with the background image. (And your CSS becomes very large very fast.

Here's a good tutorial on how it works: http://blog.bigdinosaur.org/embedding-images-in-css/

Kind regards,

Willam

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...
LEGEND ,
Dec 15, 2014

Copy link to clipboard

Copied

Another limitation would be that it would be only one image, no?

And since the desired output is a single file and the CSS would be a second file, it's really not "embedded" in the HTML. Right?

Cheers... Rick

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...
LEGEND ,
Dec 16, 2014

Copy link to clipboard

Copied

But you can also embed CSS in an HTML file using the <style> tag. 😉

You could even go for a MHTML file (MHTML - Wikipedia, the free encyclopedia) if you really want 😉

Willam

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...
Adobe Community Professional ,
Dec 16, 2014

Copy link to clipboard

Copied

Willam

Like Rick I am not seeing how this would work. Sure the CSS can be in the HTML file but from what you say that is only one image whereas the poster requires many images. Or can the method be used for multiple images?

Key though is where do those images reside? Isn't the CSS referencing them in the same way the HTML file would?


See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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...
LEGEND ,
Dec 16, 2014

Copy link to clipboard

Copied

You would have to have a different CSS selector for every image. (Or use a CSS sprite.)

The trick is here that the image is actually embedded in the css, so there is no reference. You take an image and calculate its base64 string. This string is a alphanumeric hash of the binary image file contents. You put this string directly into the CSS. Instead of a link to the image, you get:

background-image: url('data:image/png;base64,<base 64 string here>');

You can even do this with an image tag in HTML: <img src="data:image/png;base64,<base 64 string here>" />

Try out the following site: http://www.base64-image.de/

Here you can upload an image, turn it into a base64 string and get the code to encapsulate it into CSS/HTML.

The upside of this method is that it saves http requests, speeding up the loading of your site. The downside is that it is not very friendly for authors. It may be useful for small images such as icons. But in that case, the preferred solution is to use  CSS sprites. But since the original requirement here is to put it into a single file, this could work.

Kind regards,

Willam

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...
Captiv8r LATEST
LEGEND ,
Dec 16, 2014

Copy link to clipboard

Copied

Okay, mind officially blown...

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...