Prevent image loaded as base 64

OL Connect Professional Designer
1

Hi,

I load the images externally from the disk and show them on the page. to load these images takes about 5 seconds.

I think this is because the images are loaded as base64

how do I prevent that images are loaded as base64 on a webpage?

2

In web contexts external images are created as image elements with external links (e.g. < img src=“file:/…” />). Only if you activate the option “Embed all resources” in the Workflow Plugin “Create Web Content” to create the web page, an external image will be included as Base64.

3

Hi Thomas,

I know, but if I don’t enable Embed all recources all my external js, css and html also won’t be loaded.

The helpdesk explained there is a workaround by using http server input 2, but I don’t know how to set this up. the help file isn’t really clear about that.
https://help.objectiflune.com/en/planetpress-workflow-user-guide/2020.2/#Workflow/Interface/HTTP_Server_Input_User_Options_2.html?Highlight=http%20input%202

4

Hi koen,

as a workaround you can include the css and javascript resources via script as external files in the Designer and deactivate the option “Embed all resources” in the Workflow plugin. Do not forget to remove the css/javascript assignments in the web context (local files in the Designer).

Just create a script in the Designer with selector “head”. See following example.

var ext_res = '<link type="text/css" rel="stylesheet" href="https://myDomain_or_IP.com/ppc_res/css/sample.css">';
ext_res += '<script src="https://myDomain_or_IP/ppc_res/js/foundation/vendor/sample.min.js"></script>';
results.append(ext_res);
5

Hi Thomas,

I have several websites running, if I do it in this way the maintenance will be awfull.

In my opinion there should be an option not to convert images to base64.

I will have a look at the http server input 2 and try to figure that one out.

6

@koen,

When embedding images, they have to be converted to Base64, otherwise they would remain external resources.

Alternatively, you can store these images in the HTTP Server’s Resource folder (that’s the HTTP2 options you are referring to), which is simply a way for the HTTP Server to serve static resources from a fixed location. So if you store your images in that folder, they are served immediately by the HTTP Server without having to go through a Workflow process.

But that means you no longer manage your images through the Template: you have to make sure your images are properly stored and updated in the HTTP Server’s resource folder.

By the way, you should use the NodeJS server instead of the HTTP server as it is more flexible, more robust and faster.

2 Likes
7

To further explain my last comment:

Let’s say your HTML needs to display 3 images: Image1.jpg, Image2.jpg and Image3.png.
Here’s how you would set this up using the HTTP Server’s static Resource functionality.

Let’s say you set the following values in Workflow’s HTTP 2 preferences:
Resource Action Name: myResources
Resource Folder: C:\AllResources

You would first copy all your JPGs to C:\AllResources\images\jpg and all your PNGs to C:\AllResources\images\png
Your HTML could then fetch those images with the following code:

<div><img src="/myResources/images/jpg/image1.jpg"></div>
<div><img src="/myResources/images/jpg/image2.jpg"></div>
<div><img src="/myResources/images/png/image3.png"></div>

In the example above, I have stored jpgs and pngs in different folders simply to demonstrate how you can store your resources in any arbitrary structure under the root Resources folder.
This would allow you, for instance, to store resources for each template into their own distinct folder structure.

The NodeJS Server takes things even further by allowing you to specify multiple Mount Points for your static resources as opposed to the HTTP Server’s single Mount Point.

2 Likes
8

Hi Phil,

thank you for your response, I am looking into the nodeJS server input now and will also have a look into the http2 preferences, and nodeJS mount point :wink: