-
-
Notifications
You must be signed in to change notification settings - Fork 570
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix Image block field to wrap the entire image across left and right alignments. #5937
base: main
Are you sure you want to change the base?
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just missing a space in the change log.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I approve, but this still needs review from a Volto Team member.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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. |
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.