Skip to content

Adds a fluentcx picture#88

Merged
MarvinKlein1508 merged 9 commits into
mainfrom
feat/fluentcx-picture
Oct 30, 2025
Merged

Adds a fluentcx picture#88
MarvinKlein1508 merged 9 commits into
mainfrom
feat/fluentcx-picture

Conversation

@JeremyJ78

@JeremyJ78 JeremyJ78 commented Sep 17, 2025

Copy link
Copy Markdown
Contributor

Pull Request

📖 Description

Provides a FluentCxPicture, a component which can have multiple source of images and let the picture to choose which image to show on the screen (responsive images)

Provides a way to create shadow and many effects (grayscale, blur...)

Picture can have a caption and an overlay

✅ Checklist

General

  • I have added tests for my changes.
  • I have tested my changes.
  • I have updated the project documentation to reflect my changes.

Component-specific

  • I have added a new component
  • I have modified an existing component

@github-actions

github-actions Bot commented Sep 17, 2025

Copy link
Copy Markdown

✅ All tests passed successfully

Details on your Workflow / Core Tests page.

@github-actions

github-actions Bot commented Sep 17, 2025

Copy link
Copy Markdown

Summary - Unit Tests Code Coverage

Summary
Generated on: 10/30/2025 - 9:23:04 AM
Coverage date: 10/30/2025 - 9:22:55 AM
Parser: Cobertura
Assemblies: 1
Classes: 219
Files: 277
Line coverage: 75.2% (7074 of 9397)
Covered lines: 7074
Uncovered lines: 2323
Coverable lines: 9397
Total lines: 30485
Branch coverage: 55.1% (1961 of 3555)
Covered branches: 1961
Total branches: 3555
Method coverage: Feature is only available for sponsors
Tag: 242_18935768286

Coverage

FluentUI.Blazor.Community.Components - 75.2%
Name Line Branch
FluentUI.Blazor.Community.Components 75.2% 55.1%
FluentUI.Blazor.Community.Animations.AnimationEngine 61.2% 40.4%
FluentUI.Blazor.Community.ByteSize 88.1% 71.7%
FluentUI.Blazor.Community.ByteSizeTypeConverter 83.3% 50%
FluentUI.Blazor.Community.Components.AcceptFileProvider 100% 100%
FluentUI.Blazor.Community.Components.AccessibilitySafePlugin 100%
FluentUI.Blazor.Community.Components.AnalogousPlugin 100% 100%
FluentUI.Blazor.Community.Components.AnimatedElement 79.3% 81.8%
FluentUI.Blazor.Community.Components.AnimatedElementGroup 97% 70%
FluentUI.Blazor.Community.Components.AnimatedLayoutBase 80.3% 63.6%
FluentUI.Blazor.Community.Components.AnimationGroup 97.2% 63.6%
FluentUI.Blazor.Community.Components.AnimationItem 100% 100%
FluentUI.Blazor.Community.Components.AnimationState`1 40.4% 2.1%
FluentUI.Blazor.Community.Components.BackEasing 100% 100%
FluentUI.Blazor.Community.Components.BindStackLayout 100% 100%
FluentUI.Blazor.Community.Components.BounceEasing 90.9% 87.5%
FluentUI.Blazor.Community.Components.BrowserConverter 100% 100%
FluentUI.Blazor.Community.Components.CascadeLayout 100%
FluentUI.Blazor.Community.Components.ChaosLayout 100%
FluentUI.Blazor.Community.Components.CircularEasing 100% 100%
FluentUI.Blazor.Community.Components.ColorInterpolator 100%
FluentUI.Blazor.Community.Components.ColorPaletteItem 100% 75%
FluentUI.Blazor.Community.Components.ComplementaryPlugin 100% 100%
FluentUI.Blazor.Community.Components.CookieData 100%
FluentUI.Blazor.Community.Components.CookieItem 100%
FluentUI.Blazor.Community.Components.CookieItemView 95.2% 90%
FluentUI.Blazor.Community.Components.CookieLabels 100%
FluentUI.Blazor.Community.Components.CoolPlugin 100% 100%
FluentUI.Blazor.Community.Components.CreateFileManagerEntryEventArgs`1 100%
FluentUI.Blazor.Community.Components.CssLength 100% 100%
FluentUI.Blazor.Community.Components.CubicEasing 100% 100%
FluentUI.Blazor.Community.Components.DeleteFileManagerEntryEventArgs`1 100%
FluentUI.Blazor.Community.Components.DesaturatePlugin 100% 100%
FluentUI.Blazor.Community.Components.DeviceInfo 100% 100%
FluentUI.Blazor.Community.Components.DeviceInfoState 100%
FluentUI.Blazor.Community.Components.DomRect 0%
FluentUI.Blazor.Community.Components.DotIndicator`1 100% 100%
FluentUI.Blazor.Community.Components.DoubleInterpolator 100%
FluentUI.Blazor.Community.Components.DualHuePlugin 100% 100%
FluentUI.Blazor.Community.Components.ElasticEasing 100% 100%
FluentUI.Blazor.Community.Components.ExponentialEasing 100% 100%
FluentUI.Blazor.Community.Components.FanLayout 100%
FluentUI.Blazor.Community.Components.FileExtensionTypeLabels 100%
FluentUI.Blazor.Community.Components.FileExtensionTypeProvider 100% 100%
FluentUI.Blazor.Community.Components.FileIcons 93.4% 100%
FluentUI.Blazor.Community.Components.FileListDataGridColumnLabels 100%
FluentUI.Blazor.Community.Components.FileManager.FileManagerDetailsDialog`1 100% 100%
FluentUI.Blazor.Community.Components.FileManager`1 63% 31.8%
FluentUI.Blazor.Community.Components.FileManagerBase`1 40.7% 0%
FluentUI.Blazor.Community.Components.FileManagerContent 100%
FluentUI.Blazor.Community.Components.FileManagerDetailsDialogContent`1 100%
FluentUI.Blazor.Community.Components.FileManagerDetailsLabels 100%
FluentUI.Blazor.Community.Components.FileManagerDialog 0% 0%
FluentUI.Blazor.Community.Components.FileManagerEntriesMovedEventArgs`1 100%
FluentUI.Blazor.Community.Components.FileManagerEntry`1 84% 72.9%
FluentUI.Blazor.Community.Components.FileManagerEntryComparer`1 53.3% 22.7%
FluentUI.Blazor.Community.Components.FileManagerEntryDetails`1 43.9% 51.6%
FluentUI.Blazor.Community.Components.FileManagerEntryEventArgs`1 100%
FluentUI.Blazor.Community.Components.FileManagerEntryMenuItemDescription`1 100%
FluentUI.Blazor.Community.Components.FileManagerEntryTreeViewItemComparer 100% 83.3%
FluentUI.Blazor.Community.Components.FileManagerGrid`1 60.9% 43.9%
FluentUI.Blazor.Community.Components.FileManagerLabels 100%
FluentUI.Blazor.Community.Components.FileManagerList`1 53.3% 50%
FluentUI.Blazor.Community.Components.FileManagerState 26.6% 16.6%
FluentUI.Blazor.Community.Components.FileMoverDialog`1 0% 0%
FluentUI.Blazor.Community.Components.FileZipper 95.2% 87.5%
FluentUI.Blazor.Community.Components.FloatInterpolator 100%
FluentUI.Blazor.Community.Components.FloatLayout 100%
FluentUI.Blazor.Community.Components.FlowerLayout 100%
FluentUI.Blazor.Community.Components.FluentCxAnimation 70.6% 47.7%
FluentUI.Blazor.Community.Components.FluentCxColorPalette 52.4% 39.3%
FluentUI.Blazor.Community.Components.FluentCxCookie 95% 67.7%
FluentUI.Blazor.Community.Components.FluentCxDeviceDetector 93.1% 75%
FluentUI.Blazor.Community.Components.FluentCxFileManager`1 69.1% 66.8%
FluentUI.Blazor.Community.Components.FluentCxFloatingButton 95% 91.6%
FluentUI.Blazor.Community.Components.FluentCxImageGroup 100% 100%
FluentUI.Blazor.Community.Components.FluentCxImageGroupItem 100% 85%
FluentUI.Blazor.Community.Components.FluentCxLottiePlayer 96.7% 86.8%
FluentUI.Blazor.Community.Components.FluentCxLottieProvider 0%
FluentUI.Blazor.Community.Components.FluentCxMediaQuery 86.4% 68.7%
FluentUI.Blazor.Community.Components.FluentCxObserverProvider 0% 0%
FluentUI.Blazor.Community.Components.FluentCxPathBar 57.6% 45.7%
FluentUI.Blazor.Community.Components.FluentCxPathBarItem 80% 60%
FluentUI.Blazor.Community.Components.FluentCxPathBarItemMenu 50% 0%
FluentUI.Blazor.Community.Components.FluentCxPicture 94% 70%
FluentUI.Blazor.Community.Components.FluentCxResizer 90.3% 85%
FluentUI.Blazor.Community.Components.FluentCxSignature 0% 0%
FluentUI.Blazor.Community.Components.FluentCxSleekDial 81% 55.2%
FluentUI.Blazor.Community.Components.FluentCxSlideshow`1 78.6% 57.5%
FluentUI.Blazor.Community.Components.FluentCxTileGrid`1 96.2% 90.6%
FluentUI.Blazor.Community.Components.FluentCxTileGridItem`1 97% 53.1%
FluentUI.Blazor.Community.Components.GalaxyLayout 100%
FluentUI.Blazor.Community.Components.GenerationOptions 100%
FluentUI.Blazor.Community.Components.GoldenSpiralLayout 100%
FluentUI.Blazor.Community.Components.GrayscalePlugin 100% 100%
FluentUI.Blazor.Community.Components.GridLayout 76.9% 0%
FluentUI.Blazor.Community.Components.GridLayoutBase 93.9% 100%
FluentUI.Blazor.Community.Components.GridLayoutBaseItem 100%
FluentUI.Blazor.Community.Components.GroupObserverItem 0%
FluentUI.Blazor.Community.Components.HeartLayout 100%
FluentUI.Blazor.Community.Components.HelixLayout 100%
FluentUI.Blazor.Community.Components.ImageShapeExtensions 100% 100%
FluentUI.Blazor.Community.Components.Internal.ChildComponentValueEqualityCo
mparer`1
45.4% 33.3%
FluentUI.Blazor.Community.Components.Internal.DropZoneState`1 25% 0%
FluentUI.Blazor.Community.Components.Internal.FluentCxDropZone`1 70% 39%
FluentUI.Blazor.Community.Components.Internal.FluentCxDropZoneContainer`1 49.5% 23.3%
FluentUI.Blazor.Community.Components.Internal.TileGridSettings 100% 100%
FluentUI.Blazor.Community.Components.IntersectBatch 0%
FluentUI.Blazor.Community.Components.IntersectEntry 0%
FluentUI.Blazor.Community.Components.IntersectEventArgs 0%
FluentUI.Blazor.Community.Components.JsonAnimatedElement 100%
FluentUI.Blazor.Community.Components.LinearEasing 100%
FluentUI.Blazor.Community.Components.LottieControls 81.6% 66.6%
FluentUI.Blazor.Community.Components.LottieLabels 100%
FluentUI.Blazor.Community.Components.LottieOptions 100%
FluentUI.Blazor.Community.Components.LottieState 0% 0%
FluentUI.Blazor.Community.Components.MagnetLayout 100%
FluentUI.Blazor.Community.Components.ManageCookie 92.8% 100%
FluentUI.Blazor.Community.Components.MenuOptions 100%
FluentUI.Blazor.Community.Components.Middleware.Base64ImageStrategy 0%
FluentUI.Blazor.Community.Components.Middleware.FtpImageStrategy 0%
FluentUI.Blazor.Community.Components.Middleware.HttpImageStrategy 0%
FluentUI.Blazor.Community.Components.Middleware.ImageProcessingMiddleware 0% 0%
FluentUI.Blazor.Community.Components.Middleware.IpfsImageStrategy 0%
FluentUI.Blazor.Community.Components.MobileConverter 100% 100%
FluentUI.Blazor.Community.Components.MonochromaticPlugin 100% 87.5%
FluentUI.Blazor.Community.Components.MorphingLayout 81% 35.1%
FluentUI.Blazor.Community.Components.MutationBatch 0%
FluentUI.Blazor.Community.Components.MutationEntry 0%
FluentUI.Blazor.Community.Components.MutationEventArgs 0%
FluentUI.Blazor.Community.Components.MutationObserverOptions 0%
FluentUI.Blazor.Community.Components.NeonPlugin 100% 100%
FluentUI.Blazor.Community.Components.NoFileEntryData 100%
FluentUI.Blazor.Community.Components.ObserverItem 0% 0%
FluentUI.Blazor.Community.Components.ObserverState 0% 0%
FluentUI.Blazor.Community.Components.OperatingSystemConverter 100% 100%
FluentUI.Blazor.Community.Components.OrbitLayout 100%
FluentUI.Blazor.Community.Components.OverflowButton 88.8% 75%
FluentUI.Blazor.Community.Components.PastelPlugin 100% 100%
FluentUI.Blazor.Community.Components.PathBarItem 100% 100%
FluentUI.Blazor.Community.Components.PathBarItemBuilder 94.8% 88.3%
FluentUI.Blazor.Community.Components.PathBarItemComparer 100% 83.3%
FluentUI.Blazor.Community.Components.PathBarItemEqualityComparer 44.4% 16.6%
FluentUI.Blazor.Community.Components.PictureOverlay 0%
FluentUI.Blazor.Community.Components.PinLayout 100%
FluentUI.Blazor.Community.Components.PulseLayout 100%
FluentUI.Blazor.Community.Components.QuadraticEasing 100% 100%
FluentUI.Blazor.Community.Components.QuarticEasing 100% 100%
FluentUI.Blazor.Community.Components.QuinticEasing 100% 100%
FluentUI.Blazor.Community.Components.ResizeBatch 0%
FluentUI.Blazor.Community.Components.ResizedEventArgs 100%
FluentUI.Blazor.Community.Components.ResizeEntry 0%
FluentUI.Blazor.Community.Components.ResizeEventArgs 0%
FluentUI.Blazor.Community.Components.ResizerHelper 100% 100%
FluentUI.Blazor.Community.Components.ResizeWindowEventArgs 0%
FluentUI.Blazor.Community.Components.ResponsiveImage 100% 50%
FluentUI.Blazor.Community.Components.RgbaColor 100% 100%
FluentUI.Blazor.Community.Components.Shadow 0%
FluentUI.Blazor.Community.Components.ShadowOptions 100%
FluentUI.Blazor.Community.Components.Signature 0% 0%
FluentUI.Blazor.Community.Components.SignatureEraserOptions 100% 100%
FluentUI.Blazor.Community.Components.SignatureEraserPanel 100%
FluentUI.Blazor.Community.Components.SignatureExporter 0% 0%
FluentUI.Blazor.Community.Components.SignatureExportEventArgs 0%
FluentUI.Blazor.Community.Components.SignatureExportOptions 100%
FluentUI.Blazor.Community.Components.SignatureExportPanel 100%
FluentUI.Blazor.Community.Components.SignatureGridLayer 0% 0%
FluentUI.Blazor.Community.Components.SignatureGridOptions 100%
FluentUI.Blazor.Community.Components.SignatureGridPanel 100%
FluentUI.Blazor.Community.Components.SignatureInkLayer 0% 0%
FluentUI.Blazor.Community.Components.SignatureLabels 100%
FluentUI.Blazor.Community.Components.SignatureMenu 94.1% 83.9%
FluentUI.Blazor.Community.Components.SignatureOptions 100%
FluentUI.Blazor.Community.Components.SignatureOverlayLayer 0% 0%
FluentUI.Blazor.Community.Components.SignaturePenOptions 100%
FluentUI.Blazor.Community.Components.SignaturePenPanel 100%
FluentUI.Blazor.Community.Components.SignaturePenPreviewer 100% 100%
FluentUI.Blazor.Community.Components.SignatureWatermarkOptions 100%
FluentUI.Blazor.Community.Components.SignatureWatermarkPanel 100%
FluentUI.Blazor.Community.Components.SleekDialAnimationSettings 100%
FluentUI.Blazor.Community.Components.SleekDialItem 96.8% 85%
FluentUI.Blazor.Community.Components.SleekDialItemView 75.5% 57.5%
FluentUI.Blazor.Community.Components.SleekDialPopup 46.5% 35.9%
FluentUI.Blazor.Community.Components.SleekDialRadialSettings 100%
FluentUI.Blazor.Community.Components.SleekDialView 83.3% 78.5%
FluentUI.Blazor.Community.Components.SlideshowCaption 100%
FluentUI.Blazor.Community.Components.SlideshowCaptionText 0%
FluentUI.Blazor.Community.Components.SlideshowImage`1 94.1% 50%
FluentUI.Blazor.Community.Components.SlideshowItem`1 95.8% 100%
FluentUI.Blazor.Community.Components.SlideshowResize 100%
FluentUI.Blazor.Community.Components.SnakeLayout 100% 50%
FluentUI.Blazor.Community.Components.SpiralGalaxyLayout 100%
FluentUI.Blazor.Community.Components.SpiralLayout 100%
FluentUI.Blazor.Community.Components.SplitComplementaryPlugin 100% 100%
FluentUI.Blazor.Community.Components.StackedRotatingLayout 100%
FluentUI.Blazor.Community.Components.StackLayout 100% 100%
FluentUI.Blazor.Community.Components.StringColorInterpolator 100%
FluentUI.Blazor.Community.Components.SunburstLayout 100%
FluentUI.Blazor.Community.Components.TetradicPlugin 100% 100%
FluentUI.Blazor.Community.Components.TileGridLayout 100% 100%
FluentUI.Blazor.Community.Components.TileGridLayoutItem 100%
FluentUI.Blazor.Community.Components.TriadicPlugin 100% 100%
FluentUI.Blazor.Community.Components.UploadFileEventArgs 100%
FluentUI.Blazor.Community.Components.VortexLayout 0%
FluentUI.Blazor.Community.Components.WarmPlugin 100%
FluentUI.Blazor.Community.Components.WaveLayout 100%
FluentUI.Blazor.Community.Components.ZigZagLayout 100% 100%
FluentUI.Blazor.Community.EffectBuilder 100% 100%
FluentUI.Blazor.Community.Extensions.EnumExtensions 100%
FluentUI.Blazor.Community.Extensions.ParameterViewExtensions 100% 100%
FluentUI.Blazor.Community.Extensions.RenderTreeBuilderExtensions 100%
FluentUI.Blazor.Community.Extensions.ServiceCollectionExtensions 100%
FluentUI.Blazor.Community.Helpers.ColorUtils 75.6% 76.8%
FluentUI.Blazor.Community.Helpers.CssColorNamesUtils 100% 100%
FluentUI.Blazor.Community.Helpers.ImagePalette 100% 100%
FluentUI.Blazor.Community.Helpers.MathHelper 100%
FluentUI.Blazor.Community.Helpers.PathHelper 100% 100%
FluentUI.Blazor.Community.Helpers.RunningWasmHelper 0%
FluentUI.Blazor.Community.Helpers.SvgConverter 0% 0%
FluentUI.Blazor.Community.Helpers.UnitFormatHelper 100% 100%

@MarvinKlein1508

Copy link
Copy Markdown
Contributor

Can you elabortae why you have added the

<PackageVersion Include="Azure.Storage.Blobs" Version="12.25.0" />
    <PackageVersion Include="Google.Cloud.Storage.V1" Version="4.13.0" />

dependencies?

@JeremyJ78

Copy link
Copy Markdown
Contributor Author

My bad 😅
To make more tests for the component, I used to try it with Azure Storage and cloud storage...
And to create a specific middleware to be able yo retrieve files from cloud and make some transformation...

But I remove these two middleware plugins to reduce dependencies (and forgot to remove them from the csproj, I will remove them this evening)

@JeremyJ78

Copy link
Copy Markdown
Contributor Author

@MarvinKlein1508 : I've added for handling image url, azure, google and amazon cloud... Like this the user will have less work to do to resize image... The middleware allow the images to be resized, reducing quality and so on...

@MarvinKlein1508

Copy link
Copy Markdown
Contributor

@JeremyJ78 do we need to provide these providers out of the box? I don't like having these dependencies in the library

@JeremyJ78

Copy link
Copy Markdown
Contributor Author

@JeremyJ78 do we need to provide these providers out of the box? I don't like having these dependencies in the library

We can provide these providers out of the box (and avoid the users to create them)
But how can we do that ?
In another package ? (we need a package for IA, so this package, how ñame it?)

@MarvinKlein1508

Copy link
Copy Markdown
Contributor

@JeremyJ78 I would put them in a markdown file for easy copy and paste.

@JeremyJ78

Copy link
Copy Markdown
Contributor Author

@JeremyJ78 I would put them in a markdown file for easy copy and paste.

Good Idea 😊

Jérémy JANISZEWSKI added 2 commits October 13, 2025 17:19
create a markdown file to have the 3 images processing available as copy / paste
@JeremyJ78

Copy link
Copy Markdown
Contributor Author

@MarvinKlein1508 : Done !
I remove the dependencies and put the code inside a markdown file

@MarvinKlein1508

Copy link
Copy Markdown
Contributor

Can you solve the conflicts? Will merge it then

@MarvinKlein1508 MarvinKlein1508 merged commit ff86f32 into main Oct 30, 2025
1 check passed
@MarvinKlein1508 MarvinKlein1508 deleted the feat/fluentcx-picture branch October 30, 2025 09:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants