Ability to align images on modern pages
I'd like to align an image directly from the image webpart.
This is really annoying that the pages are so easy to create but that you can't control the image alignment on the page.
Aligning images is an essential.
Today an image occupies the width of the container it’s in (e.g. 1/3 column). Assuming you could make your image smaller than the column width, what level of alignment would you want? Is left, right, center sufficient, or are you wanting vertical alignment in the negative space around the image (e.g. top, middle, bottom)? What would you expect happens to the space on different break points (e.g. iPad, mobile phone, etc.) Does it go away, or is it somehow retained? Thanks.
I would like the ability to have an image web part to the left of a text web part for the purpose of creating a header. Currently, we have to create the graphic with the text included, which is not as compliant with screen readers as we would like. In addition, we would need to recreate the image in order to change the text, taking away from the flexibility of the modern pages.
As stated in other comments, left, center, right would be sufficient, however, I urge the SharePoint development team to take a look at the HTML5/CSS3 Specs which describe how this should work:
Example from above link:
<p><img src="warning.png" width="15" height="15" alt="">
Your session is about to expire</p>
Note that the <p> tag can be replaced by any block element like a <div> for example. It would be easy enough to allow the user to pick an image file, then pick the text and the alignment from the settings panel.
It would be good to have the same image size/alignment controls as are provided for shape sizing and alignment in PowerPoint, e.g. lasso or control-click a set of shapes and set the width/height/lock/unlock aspect ratio controls for all of them, align to top/middle/bottom/left/centre/right. Actually the PowerPoint shape management controls are an excellent model for this in a lot of ways. Shadow and gradient shading presets are a useful addition too.
And please can we have an option on the text-over-image to make it visible on hover rather than always visible?
I have 3 columns. Each has 1 image (selected from sharepoint websearch).
I choose the same aspect ratio.
Each image size is different!
I have spent 2 hours trying different things and googling to find out how to align the images.
This is for a corporate web-site - audience will view on laptop
Jonathan Schreven commented
I would like to see the ability to align an image to the left and then use the indent feature to adjust more incrementally. When creating "how to" pages for our wiki we have a lot of numbered or bulleted sub-levels and images need to be aligned to those indented lists.
Shogo Tsuruta commented
Please add this feature today!!!
David Henstock commented
I want a standard inline image as per standard html
220.127.116.11.10. Inline images
When images are used inline as part of the flow of text in a sentence, provide a word or phrase as a text alternative which makes sense in the context of the sentence it is apart of.
I love you.
I <img src="heart.png" alt="love"> you.
My heart breaks.
My <img src="heart.png" alt="heart"> breaks.
Antonio Alonso commented
Please include this. alignment won't break responsiveness...
I'd like to see the ability to put small thumbnails images or icons in-line with text. Then the user could click or hover over the icon to see a larger version of the image. A screen pop. We use this for technical documentation of other systems.
Basic alignment options: left, right and center.
Currently, it's impossible to have negative space above or below an image, so not sure why the product team is asking this...
Spacing at different break points just reflects what you are already doing with text.
Lisa Reyes commented
Seriously, Microsoft? What are SharePoint developers doing? Do you enjoy your small, misaligned SharePoint images as much as we are?
Zoom in/out in the image, crop to fit, choose thumbnail for news post, for page header and use the full width of the page
I would like to see horizontal and vertical alignment.
Fluidity and multi-device-compatibility should always be considered. Thus I would disable this on mobile devices when the columns (which initially are on the same level) are displayed below each other. Or always align it to the left in such cases. Center-alignment by default is anyways the wrong choice.
Technically what you are describing, that the picture is the same width as the width of the column, isn't true. This only applies to pictures which are bigger or the same width as the container. Smaller pictures are displayed in their original size and are aligned in the center. Thus small pictures in the left 1/3-column are not aligned with the left side of the page (where text starts)
Generally what I want is to have one line of text and right under where the first letter is should be the top-left edge of the picture and this picture should be controllable in size. As sometimes the original size isn't the size I want to have it displayed or 1/3 is still too big.
I think having a relative width-parameter (relative to container-width) for size would be the right way to go.
Regarding the size, I think this UserVoice handles this issue but both should be handled together: https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/20390116-ability-to-resize-images-on-modern-pages
I know this would be a new request (I can make one if you wish) but generally having basic picture-editor-capabilitys (only on a CSS level like adding a border) would be really helpful for the ability to scan a page with your eyes before reading the whole thing as you then can clearly distinguish between text and pictures (no, the ridiculous amount of whitespace hasn't solved this problem, it just helps breaking the scrolling-wheel on my mouse)
Vertical and horizontal alignment, blank space remains in across devices
Andy Bolam commented
If you were able to specify a limited range of CSS properties to the image control (obviously these would all need to be responsive) this would dramatically increase the usabililty - basically it should mirror or better the range of controls available in the classic content editor webpart, but not allow non fabric/modern theming.
Yes to all the above. If I only have (1) image in a 1/3 column positioned on the left, I'd like a smaller image to align right, adjacent to the text on the right. It would also be great to position images vertically within a 1/3 column. As for mobile views, I'm not currently interested in this aspect and don't have an opinion yet. However, I'm sure others are interested.
Christine Green commented
Left, right, center would be sufficient. Thanks!
Essential for proper page design