twicpics component blank in production nextjs app

[Dakuan]

v: 0.28.0

everything fine in development:

but broken in production:

https://photos.dombarker.co.uk/posts/sgN9ll71ju/shoveler

strange 404 that might be related (url looks a bit like the end of a twicpics url)

have tried:

• clearing vercel cache
• redeploying same code
• redeploying code with trivial change
• redeploying previous version

was working just fine yesterday 😂

[Dakuan]

ignore me, i changed a env var name and forgot. friday 😂

[mbgspcii]

Hi @Dakuan

Yes... It's definitely not normal.

Can you tell me which version of the components you used when it worked?

[mbgspcii]

Ah, well, i prefer that (😉).

No problem.

But I can see that the undefined (null should be ?) case is not well managed.

We'll add a more explicit message to handle that case.

Thanks for opening the issue and have a nice day.

Happy coding.

[Dakuan]

thanks, yes i think if the domain is missing / invalid it should error hard, like when you miss an API key in an SDK or some such

[mbgspcii]

I see your image in production.

2 comments:

• if you want to use TwicPicture (LCP image optimization), in your case, you need to specify a value for the sizes attribute. In your version, the browser thinks you're going to display the image across the entire width of the viewport: the loaded image is too big.
• if you simply want to display a content image, we recommend that you use TwicImg rather than TwicPicture: this way, you delegate management of the size of the image actually displayed (pixel-perfect) to the TwicPics script. You'll also benefit from automatic LQIP and lazy-loading.

[Dakuan]

would love to have used TwicImage but I need to maintain the original aspect ratio and didnt see an easy way to do that - ditto for a masonry layout for the lists pages, photographers dont like having their compositions messed with!

[mbgspcii]

I see. Something to test if you want: On server side call this route: https://fortherecord.twic.pics/production/users/5a5ec10e-4cba-44e6-af46-52d39e75705c/2pi3cid0-DSC01526-ARW_DxO_DeepPRIMEXD.jpg?twic=v1/inspect

Inspect will return a json with intrinsic sizes of your asset.

The you can use TwicImg giving to ratio prop the value : 3728/2485 (in that particular case) Of course you'll have to make an additional request but i think it is worth a try.

[Dakuan]

thats super useful, my other option was do some lambda thing on image upload and store the aspect myself! thanks very much!

[Dakuan]

that works brilliantly, i make that api call in a pre-insert model hook et voila:

[mbgspcii]

Wow super nice. Thanks for the feedback.

Please, could you share with us the url of your site when it will be in production?

Well done in any case.

Be seeing you.

[Dakuan]

we are all in production now :)

Here is what I did...

create a utility to get the ratio:

import { toFullTwicPicsUrl } from "./toFullTwicPicsUrl";

export const fetchRatioFromTwicPics = async (storageUrl: string) => {
    const twicUrl = `${toFullTwicPicsUrl(storageUrl)}?twic=v1/inspect`;

    const res = await fetch(twicUrl);
    const {
        input: { width, height },
    } = await res.json();

    return `${width}/${height}`;
};

add a ratio col to my images table, and populate for existing images:

import { fetchRatioFromTwicPics } from "@/lib/services/twicpics";
import type { Knex } from "knex";

const tableName = "images";

export async function up(knex: Knex): Promise<void> {
  await knex.schema.alterTable(tableName, (table) => {
    table.string("ratio");
  });

  const images = await knex
    .table(tableName)
    .select<{ url: string; id: string }[]>("url", "id");

  for (let i = 0; i < images.length; i++) {
    const { id, url } = images[i];

    const ratio = await fetchRatioFromTwicPics(url);

    await knex.table(tableName).update({ ratio }).where({ id });
  }
}

export async function down(knex: Knex): Promise<void> {
  await knex.schema.alterTable(tableName, (table) => {
    table.dropColumn("ratio");
  });
}

Get ratio from twicpics when saving my image model for new images:

import { QueryContext } from "objection";
import { RawExif } from "./RawExif";
import { ForTheRecordModel } from "./model";
import { fetchRatioFromTwicPics } from "../services/twicpics";

export class Image extends ForTheRecordModel {
  static tableName = "images";
  id!: string;
  url!: string;
  userId!: string;
  rawExif!: RawExif;
  ratio!: string;

  async $beforeInsert(_queryContext: QueryContext): Promise<any> {
    this.ratio = await fetchRatioFromTwicPics(this.url);
  }
}

use the ratio col in the front end:

  <Masonry className="flex" columnClassName="pl-2 md:pl-4" breakpointCols={breaks}>
    {posts.map((p) => {
      return (
        <Link
          className="pb-2 md:pb-4 block"
          key={p.id}
          href={toPostsUrl(p.nanoId, p.species.commonName)}
        >
          <TwicImg
            src={toTwicPicsPath(p.image.url)}
            ratio={p.image.ratio}
          />
        </Link>
      );
    })}
    <div ref={ref} />
  </Masonry>

used for masony grid: https://photos.dombarker.co.uk/ (you can see the old grid too for comparison: https://photos.dombarker.co.uk/?grid=grid) for where images should not be cropped: https://photos.dombarker.co.uk/posts/5xhWSalsPh/goshawk

things that would be really helpful in that inspect call:

• colours that are in the image, primary, secondary etc, fun for rendering gradient backgrounds etc
• info from the subject detection model you are using (ie what objects the model has classified, where they are)

other feedback:

• ratio=original that automagically does what i've done would be ace
• really need custom watermarks in the api, other image transforms services do this. the per domain thing doesnt really work as the watermark placement location is contextual to the image and you might have different photographers on the same platform who want different watermarks
• image limits are are problem, 100MP cameras are not uncommon now, and this is getting worse with each new camera generation. Im going to have to store two images, one full size (for selling prints) and one reized for twicpics to get around image limits. I could create limits on upload, but this is a bad UX because the users can see on browsing what the file size in MB is but not how many px are in the photo. And i still really want the full size image for selling prints anyway.
• be good to be able to supply my own model for focus. The subjection one is mosly great, but for me, the middle of the subject is not the focal point of the image - its the eyes for wildlife!

[mbgspcii]

Thank you for your comments. They are very valuable and well noted.

[Dakuan]

not at all, love the product! the inspect call is especially exciting as easy access to image metadata adds all kinds of creative possiblities!