Displaying an image in HTML page using Webster+

pwhirley · August 02, 2024, 02:35:15 PM

I have a very simple web page that only displays an image. The image displays just fine if I hope the HTML page in Safari or Edge or any other browser. But when I add that page, testimage.html, to the Webster+ sidebar menu (as a Webpage), the image will not display. All the text displays, but not the image. The page and the JPG (or PNG) file both are in the Pages folder.
I've tried moving the image to other folders but cannot get it to display when viewed from the Webster+ menu.
Below is the simple web page:

Code Select

<!DOCTYPE html>
<html>
  <head>
    <title>Display simple image</title>
  </head>
  <body>
    <img width="468" height="312" src="image001.jpg">
  </body>
</html>

pwhirley · August 02, 2024, 04:42:34 PM

Never mind! I searched through the CATS pages which referred me to the "PICTURE" short code. That seems to be the solution to my problem.

Phil

Mike King · August 03, 2024, 02:46:11 PM

Phil

Actually the picture short code is designed to make it easier and more secure to display images.

Basically you can have the system show a picture from any location/directory as the system will generate code that encrypts the pathname forcing user security to be applied. This means you don't have to place images (which could contain sensitive information) on a directory that can be directly accessed via URL. The encrypted pathname is based on a key that is specific the user making the request therefore providing additional security.

pwhirley · August 05, 2024, 11:15:25 AM

Thanks Mike,
I still don't understand some things regarding images. I was able to get the .PNG files to display (on my workstation) by inserting a line like this:
[picture file="userguide/image1.png" size=109x39 align="left,top"]

This required that I find all the <img> tags in my HTML and replace them with [picture], which is laborious. I thought I should be able to use the short code, which should tell Webster+ to use the <img> as it was entered. For example:
<iimg width=434 height=154 src=userguide/image1.png" aligh=left>

When I try this, it does not display anything at all... not even a blank rectangle.

What am I missing about the short code? My document displays just fine with all the images when I'm not going through Webster+. Not only that, everything works through Webster+ *except* the images. All the other HTML seems to be rendered correctly, including links and style.

Thanks - Phil

Mike King · August 05, 2024, 09:17:21 PM

Phil

You can use the img tag in webster, however the image source will need to be directly accessible through the Internet. This is likely something you won't want. For example if the image had sensitive information such as a payroll stub or invoice with pricing you would not want to have the images directly accessible.

Using the [picture] shortcake allows you to display any image (or pdf) from any directory as long as the requesting browser is signed on to the system with appropriate security. This is done by encrypting the full pathname of the file being requested within the src= used by the img tag generated by the [picture] shortcake. This renders the value in the src= useless by anybody other than the desired end user whose encryption key is maintained by Webster.

Mike

pwhirley · August 06, 2024, 11:09:17 AM

Thanks again, Mike. My misunderstanding was in what folders are available through the browser. In my ignorance I thought Pages was available through the web browser. It turns out only Docroot is available. This makes total sense, but I wasn't thinking properly. If I simply move my little web page to Docroot instead of Pages, it works fine when presented on the menu as a URL.

I'm learning.

Displaying an image in HTML page using Webster+

pwhirley

pwhirley

Mike King

pwhirley

Mike King

pwhirley