plone
Fix Image block field to wrap the entire image across left and right alignments.
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.
Deploy Preview for plone-components canceled.
| Name | Link |
|---|---|
| Latest commit | 7d5564b1444b29990f2a0ee4d52380b6d0be7ead |
| Latest deploy log | https://app.netlify.com/sites/plone-components/deploys/660a9b627d0c3d000804b7f3 |
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
Deploy Preview for volto canceled.
| Name | Link |
|---|---|
| Latest commit | 7d5564b1444b29990f2a0ee4d52380b6d0be7ead |
| Latest deploy log | https://app.netlify.com/sites/volto/deploys/660a9b625903e70008ed4340 |
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
@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.
@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. Now i understand the importance of it and i will try to make the same behaviour as it was.
It looks like this PR did not solve the problem in a way that supported floating images next to text, and has been abandoned, so I will close it.
