pnp / cli-microsoft365

Manage Microsoft 365 and SharePoint Framework projects on any platform
https://aka.ms/cli-m365
MIT License
887 stars 314 forks source link

Enhancement: `spo page section add` extend *zoneEmphasis* option to handle images #6037

Open mkm17 opened 2 months ago

mkm17 commented 2 months ago

Hi, in the latest updates of SharePoint Online, there's a new feature allowing you to set different types of section backgrounds.

Here are the options that I can see in the page source when the background image option is used.

Option Values
--zoneEmphasis [zoneEmphasis] None, Neutral, Soft, Strong, Image,Gradient (the new ones)
--isCollapsibleSection Set section to be collapsible
--showDivider Show divider line between sections
--iconAlignment [iconAlignment] Expand/collapse icon alignment
--isExpanded Set default display of collapsible section
--gradientText [gradientText] Set gradient setting of a section
--imageUrl [imageUrl] Background image URL (if skipped, the default one will be set)
--imageHeight [imageHeight] Background image height
--imageWidth [imageWidth] Background image width
--fillMode [fillMode] Fill mode of an image. Possible values are ScaleToFill, ScaleToFit, Tile, OriginalSize
--useLightText Use light text parameter for background
--overlayColor [overlayColor] Overlay color for background
--overlayOpacity [overlayOpacity] Overlay opacity for background

Is it worth adding so many new parameters for this single option? Perhaps you have any recommendations regarding this matter. I will also explore the gradient option; maybe some parameters could be shared (like overlay ones).

And if you don't mind, I can take on this task, as I have already conducted some research.

Jwaegebaert commented 2 months ago

That would be a great enhancement. We definitely need to validate gradients too. If we're adding background images, we should consider gradients as well. Adding all these options to spo page section add seems like the best approach. We could also use spo page section background set, but that feels a bit overkill. One more feature I'd like is setting a focus point for the image. It's not the easiest to define, but it's quite interesting.

Adam-it commented 2 months ago

@mkm17 awesome suggestion:

mkm17 commented 2 months ago

@Jwaegebaert, thank you for the comment. I will then check the gradient option and extend the specification of the command. Regarding the focus, I believe it may need to be handled by the height and width parameters, but I am not sure how to handle it.

@Adam-it, ok, I will check how it is set and add it to the specification πŸ˜„ The overlayColor can be provided in #rrggbb format

mkm17 commented 1 month ago

Hi, I have updated the specification. The settings for the collapsible section and gradient background have been added. :)