Fix Image block field to wrap the entire image across left and right alignments. #5937
Conversation
✅ Deploy Preview for plone-components canceled.
|
✅ Deploy Preview for volto canceled.
|
|
Please review this pull request. @stevepiercy ,@polyester, could you please take a look and provide your feedback? Thank you! |
|
@MostafaMagdyy the lint CI check fails. You must fix it before review will happen. See https://6.docs.plone.org/volto/contributing/linting.html |
Co-authored-by: Steve Piercy <web@stevepiercy.com>
|
@stevepiercy Thank you for your feedback. I have addressed all your comments and fixed all the issues. Additionally, here are the screenshots displaying the new behavior for left and right alignment. |
There was a problem hiding this comment.
@MostafaMagdyy you don't fully understand why the select area with the border around the image is as small as it is.
It's because of a float property.
That is useful when you want to have text to the right or left of your image.
Here is a demo on the current feature in action:
and how it would function with your changes:
You need some css that will affect the editing selected area alongside
extra code to have the text float to the left or right.
Thank you for your feedback. |
ichim-david
added
22 status: in-progress
and removed
24 status: ready
32 needs: review
labels
Fixes #5922 for the image field container to wrap the entire image in right and left alignment.
For full-width alignment, I think it's another issue itself. Disregard the field to wrap the entire image because the image is going outside the whole container and above the sidebar on the right if you try to drag its block. So, I do not think this PR should fix it, because it is not related to the failure of the wrapper to fill the whole image. Let me know if I should fix it in this PR, and I will do so. Also, please clarify how the full width should be, because I do not see any difference between it and when the image is aligned center with size=large, as both take size=100vw in getImageBlockSizes function.