Image rendering #3337

pnicolli · 2022-05-06T10:55:57Z

This is mainly documentation about how to properly render images, at this time.
This is meant to be improved still, in order to document how we want to do this and then implement it.

This now contains the new Image component implementation.

Depends on plone/plone.restapi#1642

netlify · 2022-05-06T10:56:02Z

✅ Deploy Preview for volto ready!

Name	Link
🔨 Latest commit	`17c3c28`
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/64ba5ad0ef82490008857279
😎 Deploy Preview	https://deploy-preview-3337--volto.netlify.app/upgrade-guide/index.html
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

cypress · 2022-05-06T11:09:38Z

Passing run #6541 ↗︎

0	529	20	0	0

Details:

Update docs/source/upgrade-guide/index.md
Project: Volto	Commit: `17c3c28039`
Status: Passed	Duration: 16:48 💡
Started: Jul 21, 2023 10:19 AM	Ended: Jul 21, 2023 10:35 AM

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

giuliaghisini · 2022-05-06T12:05:09Z

good. This morning i found out also that defining the aspect ratio in css could help the browser if you don't know the real size of the rendered image..
So, in #2103 i've added the inline-style with aspect-ratio value taked from real image sizes..
What do you think?

src/components/theme/PreviewImage/PreviewImage.jsx

pnicolli

I left a few implementation comments on point that imho we should discuss together @plone/volto-team

src/components/manage/Blocks/Listing/SummaryTemplate.jsx

src/components/theme/Image/Image.jsx

src/components/theme/Image/utils.js

src/components/theme/PreviewImage/PreviewImage.jsx

docs/source/developer-guidelines/images.md

src/components/theme/Image/Image.jsx

pnicolli · 2023-05-17T08:13:32Z

Note from Beethoven sprint discussion: in blocks that pick images (e.g. Hero and Image block), if we save image metadata like image_scales in the block data, we can end up having outdated information, because if the image changes, the scales change and the blocks data do not reflect that change.

Since the image selection is basically a url in the block data, and those are already being transformed by the resolveuid machinery, we could plug into that, check if the item is an image and update the block data accordingly, which likely also means deleting that data if the image is no longer there.

@davisagli feel free to correct me and/or add info.

davisagli · 2023-05-17T09:39:16Z

@pnicolli yes, that's right. I have code from a project that can be adapted for this.

pnicolli · 2023-07-17T15:34:33Z

@sneridagh I don't understand this PR https://github.com/plone/volto/pull/4964/files
I am inclined to resolve the conflicts by just removing all the changes done there for the teaser block DefaultBody component, because we don't need to handle a case where we don't have an Image component registered in the component registry. Am I missing something?

sneridagh · 2023-07-17T16:54:09Z

@pnicolli a part of that was fixing the use case of having a local override of the teaser image. If you are referring to amend the instantiation of the registered component using the "new one" used in the core component, then go ahead, by all means.

sneridagh · 2023-07-17T17:02:26Z

@pnicolli btw, master now have the latest p.restapi version (but I guess you already realised).

pnicolli · 2023-07-17T17:54:55Z

@pnicolli a part of that was fixing the use case of having a local override of the teaser image. If you are referring to amend the instantiation of the registered component using the "new one" used in the core component, then go ahead, by all means.

@sneridagh The current implementation in this branch does the same exact thing you did in that PR, exept this does not fallback to a native <img> tag. I would remove the fallback and all the code, basically restoring what you can see in this PR in that component, because we now have a component registered with the name Image by default in core volto.

pnicolli · 2023-07-18T15:22:48Z

I really don't understand why the unit tests are failing here.

https://github.com/plone/volto/actions/runs/5589278409

This is the error:

PASS src/components/manage/Blocks/LeadImage/Edit.test.jsx
PASS src/components/theme/Widgets/SelectWidget.test.js
PASS src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx
PASS src/components/manage/Blocks/Video/Edit.test.jsx
PASS src/components/manage/Blocks/Maps/View.test.jsx
PASS src/helpers/Api/Api.test.js
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error: connect ECONNREFUSED 127.0.0.1:8080
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16) {
  errno: -111,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 8080,
  response: undefined
}

I don't get these errors on my local laptop, I actually get other errors, which are related to the Html SSR component and to auth token verifications - two things I did not touch at all anyway.

@plone/volto-team any pointers by any chance?

sneridagh · 2023-07-18T21:07:57Z

@davisagli @pnicolli 🟢

* master: feat(Url.js): add getFieldURL helper function to get the url value of a field based on its structure (#4731) Handle @linkintegrity response with items but no breaches (#4832)

sneridagh · 2023-07-21T09:55:02Z

@stevepiercy I added some last minute docs regarding upgrade guide.

stevepiercy

Minor tweak, then it's good to go. Thank you!

docs/source/upgrade-guide/index.md

Co-authored-by: Steve Piercy <web@stevepiercy.com>

* master: (42 commits) make selectedView and className props available for Search block (#4997) Release @plone/volto-testing 4.0.0-alpha.0 Release 17.0.0-alpha.21 Upgrade to Cypress 12.17.1 (latest) (#4981) Image rendering (#3337) feat(Url.js): add getFieldURL helper function to get the url value of a field based on its structure (#4731) Handle @linkintegrity response with items but no breaches (#4832) Release 17.0.0-alpha.20 Use all the apiExpanders in use, so we perform a single request for getting all the required data. (#4946) Fix the condition deciding on listing pagination format so it takes into account container blocks as well (#4978) Release 17.0.0-alpha.19 Fix search block input clear button doesn't reset the search (#4837) Add /ok route as an express middleware (#4432) handles condition for yearly frequency in recurrence (#4604) Remove dangling out of place Guillotina Cypress tests (#4980) Update to latest plone.restapi and Plone 6.0.6 (#4979) Update browserlist (#4977) `Links and references` view via content menu [Add `Links to item` view] (#4787) Release 17.0.0-alpha.18 Toc responsive (#4912) ...

tisto · 2023-09-10T06:28:51Z

@sneridagh do we have a PLIP for this feature? Anything else that is left to do here? This is something we definitely want to mention when talking about Plone 6.1.

sneridagh · 2023-09-10T07:24:17Z

I thought we had one, but not. I think there's a plain issue: #1428

Added first draft of image rendering docs

7534cab

pnicolli added the 04 type: enhancement label May 6, 2022

pnicolli requested review from iham, agitator, sneridagh, tisto, robgietema, MrTango and giuliaghisini May 6, 2022 10:55

pnicolli requested a review from fredvd May 6, 2022 10:59

pnicolli added 2 commits May 9, 2022 00:17

Merge branch 'master' into image-rendering

7ddce3e

Added Image implementation and draft of PreviewImage refactoring

09e0ba5

giuliaghisini reviewed May 9, 2022

View reviewed changes

src/components/theme/PreviewImage/PreviewImage.jsx Outdated Show resolved Hide resolved

pnicolli commented May 9, 2022

View reviewed changes

mamico reviewed May 22, 2022

View reviewed changes

docs/source/developer-guidelines/images.md Outdated Show resolved Hide resolved

pnicolli and others added 8 commits July 21, 2022 11:24

Merge branch 'master' into image-rendering

37e6486

Merge branch 'master' into image-rendering

aba0282

Merge branch 'master' into image-rendering

48032f5

Merge branch 'master' into image-rendering

58ed19c

Merge branch 'master' into image-rendering

2e3ed0a

Merge branch 'master' into image-rendering

e28a3b1

Update with simplified image

82e1667

use baseUrl

4bb5e7c

pnicolli commented May 16, 2023

View reviewed changes

src/components/theme/Image/Image.jsx Outdated Show resolved Hide resolved

stevepiercy approved these changes Jul 4, 2023

View reviewed changes

pnicolli and others added 5 commits July 18, 2023 00:07

Merge branch 'master' into image-rendering

eba14b3

fix unit tests

948ee0a

fix acceptance tests

984f4b0

Merge branch 'master' into image-rendering

f8100b9

Merge branch 'master' into image-rendering

1b39ddf

pnicolli mentioned this pull request Jul 18, 2023

Add Image for srcset and lazy loading #2103

Closed

fix unit tests

fe61e13

sneridagh approved these changes Jul 18, 2023

View reviewed changes

sneridagh added 2 commits July 21, 2023 11:53

Merge branch 'master' into image-rendering

154bdb5

* master: feat(Url.js): add getFieldURL helper function to get the url value of a field based on its structure (#4731) Handle @linkintegrity response with items but no breaches (#4832)

Last minute docs

f8621ef

stevepiercy requested changes Jul 21, 2023

View reviewed changes

docs/source/upgrade-guide/index.md Outdated Show resolved Hide resolved

Update docs/source/upgrade-guide/index.md

17c3c28

Co-authored-by: Steve Piercy <web@stevepiercy.com>

stevepiercy approved these changes Jul 21, 2023

View reviewed changes

sneridagh merged commit 262b755 into master Jul 23, 2023
39 checks passed

sneridagh deleted the image-rendering branch July 23, 2023 07:21

This was referenced Jul 24, 2023

Adding src-set in image block #1553

Closed

PLIP: Implement srcset and sizes for images in Volto #1428

Closed

Fosten mentioned this pull request Aug 9, 2023

[object Object] for images component in Slider View kitconcept/volto-slider-block#24

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Image rendering #3337

Image rendering #3337

pnicolli commented May 6, 2022 •

edited by davisagli

Loading

netlify bot commented May 6, 2022 •

edited

Loading

cypress bot commented May 6, 2022 •

edited

Loading

giuliaghisini commented May 6, 2022

pnicolli left a comment

pnicolli commented May 17, 2023

davisagli commented May 17, 2023

pnicolli commented Jul 17, 2023

sneridagh commented Jul 17, 2023 •

edited

Loading

sneridagh commented Jul 17, 2023

pnicolli commented Jul 17, 2023

pnicolli commented Jul 18, 2023

sneridagh commented Jul 18, 2023

sneridagh commented Jul 21, 2023

stevepiercy left a comment

tisto commented Sep 10, 2023

sneridagh commented Sep 10, 2023

Image rendering #3337

Image rendering #3337

Conversation

pnicolli commented May 6, 2022 • edited by davisagli Loading

netlify bot commented May 6, 2022 • edited Loading

✅ Deploy Preview for volto ready!

cypress bot commented May 6, 2022 • edited Loading

Passing run #6541 ↗︎

giuliaghisini commented May 6, 2022

pnicolli left a comment

Choose a reason for hiding this comment

pnicolli commented May 17, 2023

davisagli commented May 17, 2023

pnicolli commented Jul 17, 2023

sneridagh commented Jul 17, 2023 • edited Loading

sneridagh commented Jul 17, 2023

pnicolli commented Jul 17, 2023

pnicolli commented Jul 18, 2023

sneridagh commented Jul 18, 2023

sneridagh commented Jul 21, 2023

stevepiercy left a comment

Choose a reason for hiding this comment

tisto commented Sep 10, 2023

sneridagh commented Sep 10, 2023

pnicolli commented May 6, 2022 •

edited by davisagli

Loading

netlify bot commented May 6, 2022 •

edited

Loading

cypress bot commented May 6, 2022 •

edited

Loading

sneridagh commented Jul 17, 2023 •

edited

Loading