No resize option?

[kissifrot]

Hello,

It seems ratio is used, but we cannot use it with a resize combination. Would it be possible to add the option?

[jaubourg]

Hi @kissifrot,

The idea is to size the component using CSS. TwicPics will automatically create the resize API call for you under the hood (even taking the device's DPR into account in the process).

For instance:

<TwicImg
  class="image-class"
  src="path/to/your/image.jpeg"
  ratio="16/9"
></TwicImg>

.image-class {
  width: 50%;
}

@media-query ( min-width: 800px ) {
  .image-class {
    width: 80%;
  }
}

You can also handle ratios using pure CSS for true responsive designs:

<TwicImg
  class="image-class"
  src="path/to/your/image.jpeg"
></TwicImg>

.image-class {
  --twic-ratio: calc( 4 / 3 );
  width: 50%;
}

@media-query ( min-width: 800px ) {
  .image-class {
    --twic-ratio: calc( 16 / 9 );
    width: 80%;
  }
}

You can find more information about all of this in the documentation.

Would that cover your use-case?

Regards,

Julian

[HTaiNguyen]

@jaubourg Thanks for this answer. So you're telling us that we should resize using css instead and there is not an existing props to do this: https://www.twicpics.com/docs/api/transformations#resize

[mbgspcii]

Hi @HTaiNguyen

The size transformation is indeed managed by the use of a style rule.

We have made an example of resize by using css classes (see screenshot).

As you can see, for a single image "master" we get 2 variants :

• one in 100x100 px
• the other one in 500x500 px

We hope that this will meet your needs.

Incidentally we are currently thinking about the possibilities of extending TwicPics components to other features exposed by the TwicPics API. The size transformation could be one of them.

Regards

Miguel