nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Return image based on rules

manhdo

Is there any way to return an image or media type based on a rule? Right now, the only way that I know of is to embed an image in a component in a page file. The problem is, we only want to show the image, not the html page/snippet that contains the image.

EG:
www.mysite.com/images/getImage.png?memberType=Professional

or

www.mysite.com/images/getImage.page?memberType=Professional

We want to know if the above url can just return the image instead of the html snippet.

Find more posts tagged with

Comments

manhdo

Anyone have any ideas on how we should approach this?

Rick Poulin

Not that I've tried, but I'd ditch the idea of running your rules through a .page. Instead, just call the rules engine directly in your External and make the resulting image path available to your component XSL. (I'm assuming your images live somewhere that's already addressible via URL)

manhdo

Thanks for the response.

I am looking at two different approaches to solve the above scenario. I was wondering if you can tell me what I am doing wrong as it's currently not working when I believe it should work.

Both approaches utilize a controller. I am essentially doing:

1. A redirect to the image
Example:
return new URLRedirectForwardAction(context, "http://host.com/image.jpg");

2. Output the image stream into the ServletOutputStream (essentially hijacking the current response stream).

ServletOutputStream output = context.getResponse().getOutputStream();
context.getResponse().setContentType("image/jpg");
context.getResponse().setStatus(HttpServletResponse.SC_OK);
output.write(imageBytes);
output.flush();
return new StopForwardAction();

I utilize this new controller in a Component that I created. I then dropped the component in a "page". However, when I go to the page, nothing happens.

Attached is my component xml.

Any ideas why it's not working?

manhdo

Got it working by applying my controller to the "pre-controller" section of the page.

Thanks.

Rick Poulin

It's great that you got it working, but I just have to question whether this is the best approach for you. Your option #1 is a terrible for SEO and overall performance, and your option #2 is highly unsupported. In addition, it sounds like you're building yourself a major headache by wrapping all of these layers (page + page controller + component) around your image, when the calling page could potentially just print the real URL itself, rather than a link to a .page... unless your calling page is not a LiveSite page?

Out of curiosity, is there a reason you had to do it this way?

manhdo

Thanks for the response.

The idea here is to mimic a custom REST API endpoint through Autonomy. Personally, I rather write my own webapp with an REST endpoint that returns the correct image stream based on what's passed in through the request. The specific use case requires the use of LiveSite "page" as an endpoint for a REST API. Yes, we're breaking the convention here.

The specific use case is for an email, where based on the input values, will display a different image in an img tag. The list of images live in the resources section in LiveSite. Note that we are not returning a link but we're returning a stream or a redirect to the asset.

< img src="imageAPI.page?type=Paid" />

If this was all done within a "page", then this problem would have been easily resolved. We could just embed the image in the page itself.

You are correct that our calling page is outside of LiveSite.