init

OpenArchival.Blazor.Blog/BlogPostViewer.razor

@@ -21,7 +21,7 @@
                     <MudCard Style="@($"height: {Math.Floor(400 * 0.7)}px; display: flex; flex-direction: column;")" >
                         @if (grouping.ChildArtifactEntries[0].Files.Any())
                         {
-                            <MudCardMedia Image="@($"/api/files/{grouping.ChildArtifactEntries[0].Files[0].Id}")"/>
+                            <MudCardMedia Image="@($"/api/files/{grouping.ChildArtifactEntries[0].Files[0].Id}/small")"/>
                         }
 
                         <MudCardContent Style=@($"flex-grow: 1; overflow-y: clip; height:{Math.Floor(400 * 0.3)}px;")>
@@ -42,7 +42,7 @@
     <MudPaper Class="pa-4 ma-2 rounded" Elevation="3">
         <MudGrid Justify="Justify.Center" Class="mb-2">
             <MudItem>
-                <MudImage ObjectPosition=ObjectPosition.Center Class="rounded-1g" Src=@($"/api/files/{_article.MainPhoto.Id}") Height="400"></MudImage>
+                <MudImage ObjectPosition=ObjectPosition.Center Class="rounded-1g" Src=@($"/api/files/{_article.MainPhoto.Id}/large") Height="400"></MudImage>
             </MudItem>
         </MudGrid>
         <MudText Typo="Typo.h6">@_article.Title</MudText>
@@ -55,7 +55,12 @@
     </MudPaper>
 
     <MudPaper Class="pa-4 ma-2 rounded" Elevation="3">
-        @((MarkupString)_article.Content)
+        @*ensure that the width is forced to be that of the containing screen, without this images will force the page to be wider than it is*@ 
+        @* ql-editor class tells the quill css that it should apply its classes in this div. Quill is used by the rich text editor this
+        project uses*@
+        <div class="dynamic-content-container ql-editor">
+            @((MarkupString)_article.Content)
+        </div>
     </MudPaper>
 }
 @inject IArtifactGroupingProvider GroupingProvider;