How to display an image from a database id in a Sealious app

Open-source projects Sealious
1

If you’re tasked with displaying an image contained in a Image field in a Sealious Collection, you need to first get a path to that file on a disk, and then pass it to imageRouter.image() function as the first argument. Here’s a snippet:

import { imageRouter } from "../../../image-router.js";
import arrow from "./treatment-tile-arrow.svg";
import { File as SealiousFile } from "sealious";

export async function display_item_with_image(item_id: string) {
 const { the_app } = await import("../../../index.js");
 const item = await the_app.collections.items.suGetByID(item_id);

 let picture = item.get("picture");
 const file = await SealiousFile.fromID(the_app, (picture as { id: string }).id);

const htmlOutput = /* HTML */ `<div class="some-wrapper">
  ${await imageRouter.image(file.getDataPath(), {
   container: { width: 200, height: 200 },
  })}
 </div>`;

 return htmlOutput;
}
1 Like
2

ok but how to swap this element with new Controls.Photo:

	controls = [
		new Controls.SimpleInput(fields.name, { label: "Name", field: "name" }),
		new Controls.SimpleInput(fields.description, {
			label: "Description",
			field: "description",
		}),
		new Controls.SimpleInput(fields.position, {
			label: "Position",
			field: "position",
		}),
		new Controls.SimpleInput(fields.quote, { label: "Quote", field: "quote" }),
		new Controls.Photo(fields.photo, imageRouter, { label: "photo" }),
		new Controls.Photo(fields.secondPhoto, imageRouter, { label: "Second photo" }),
		new Controls.SimpleInput(fields.seoText, { label: "Seo text", field: "seoText" }),
	];

if the photo preview is about to be in the file place in the form
image

I guess control element can be embedded in some html, but im not sure in that scenario

3

@kuba-orlik i remember we were talking about some solution that exists in sealious, if so how it looks like? I keep asking cus its an blocking issue for tasks

4

While working on a tutorial I’ve found a pesky bug. I’m working hard on a solution, will let you know asap when it’s done :pray: