1 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
2 @using Dynamicweb
3 @using System.IO
4 @using System.Web
5 @using System.Collections
6
7 @functions {
8 public string[] supportedImageFormats { get; set; }
9 public string[] supportedDocumentFormats { get; set; }
10 public string[] allSupportedFormats { get; set; }
11 }
12
13 @{
14 var assetsList = GetLoop("QueryResultItem");
15 string iconPath = "/Files/Templates/Designs/Swift/Assets/icons/";
16
17 @* Supported formats *@
18 supportedImageFormats = new string[] { ".jpg", ".jpeg", ".webp", ".png", ".gif", ".bmp", ".tiff", ".pdf" };
19 supportedDocumentFormats = new string[] { ".docx", ".xlsx", ".ppt", ".pptx" };
20 allSupportedFormats = supportedImageFormats.Concat(supportedDocumentFormats).ToArray();
21
22 bool imageFound = false;
23 string fileName;
24 string filePath = "";
25
26 var asset = assetsList.FirstOrDefault();
27 }
28
29
30 <div class="d-flex flex-column p-4 pe-0 vh-100">
31 <div class="flex-fill overflow-y-auto overflow-x-hidden pe-4 mb-4">
32 @foreach (string format in allSupportedFormats)
33 {
34 fileName = asset.GetString("FileName");
35 filePath = !string.IsNullOrEmpty(asset.GetString("DirectoryRelativePath")) ? asset.GetString("DirectoryRelativePath") + "/" + fileName : "";
36 string fileServerPath = Dynamicweb.Context.Current.Server.MapPath("Files" + asset.GetString("DirectoryRelativePath") + "/" + asset.GetString("FileName"));
37 bool fileExists = File.Exists(fileServerPath);
38
39 if (fileName.EndsWith(format, StringComparison.OrdinalIgnoreCase))
40 {
41 <div class="d-flex flex-row gap-4 mb-3">
42 <div style="width: 120px">
43 <div class="ratio" style="--bs-aspect-ratio: 100%">
44 @foreach (string imageFormat in supportedImageFormats)
45 {
46 if (fileName.EndsWith(imageFormat, StringComparison.OrdinalIgnoreCase) && fileExists)
47 {
48 string imagePath = !string.IsNullOrEmpty(asset.GetString("DirectoryRelativePath")) ? "/Admin/Public/GetImage.ashx?image=/Files" + asset.GetString("DirectoryRelativePath") + "/" + fileName + "&width=300&format=webp" : "";
49
50 <img src="@imagePath" loading="lazy" style="object-fit: cover">
51
52 imageFound = true;
53 }
54 }
55
56 @if (imageFound == false)
57 {
58 <div class="position-absolute bg-black bg-opacity-10 w-100 h-100"></div>
59 <div class="d-flex align-items-center justify-content-center">
60 <span class="icon-4">@ReadFile(iconPath + "file.svg")</span>
61 </div>
62 }
63 </div>
64 </div>
65 <div class="flex-fill">
66 <h3 class="h6 flex-fill" style="word-break: break-all">@fileName</h3>
67 <div class="fs-6 opacity-50">
68 @(asset.GetString("FileSize"))kb
69 </div>
70 </div>
71 </div>
72
73 @* Basic file data *@
74 <dl class="m-0">
75 <div class="d-flex flex-row">
76 <dt class="flex-fill">@Translate("Updated")</dt>
77 <dd>@asset.GetString("LastWriteTime")</dd>
78 </div>
79 <div class="d-flex flex-row">
80 <dt class="flex-fill">@Translate("Filetype")</dt>
81 <dd>@asset.GetString("Extension")</dd>
82 </div>
83 </dl>
84
85 if (imageFound && !fileName.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase)) {
86 if (fileExists) {
87 var attributes = Dynamicweb.Imaging.Image.GetAttributesFromFile(fileServerPath);
88 var dimensions = string.Format("{0} x {1}px", attributes.Size.Width, attributes.Size.Height);
89 var colors = string.Format("{0} ({1} {2})", attributes.ColorType, attributes.ColorDepth, Translate("bits"));
90
91 @* Basic image data *@
92 <dl>
93 <div class="d-flex flex-row">
94 <dt class="flex-fill">@Translate("Dimensions")</dt>
95 <dd>@dimensions</dd>
96 </div>
97
98 <div class="d-flex flex-row">
99 <dt class="flex-fill">@Translate("Colors")</dt>
100 <dd>@colors</dd>
101 </div>
102 </dl>
103
104 if (Dynamicweb.Imaging.Image.GetMetadataFromFile(fileServerPath) != null) {
105 var dynamicwebMetadata = Dynamicweb.Imaging.Image.GetMetadataFromFile(fileServerPath);
106
107 var IPTC = dynamicwebMetadata.GetTagValuesByGroup("IPTC");
108
109 @* IPTC image data *@
110 if (IPTC.Values.Count > 0) {
111 <div class="border-bottom">
112 <div class="d-flex collapsed" data-bs-toggle="collapse" data-bs-target="#IPTC_Group" role="button" aria-expanded="true" aria-controls="IPTC_Group">
113 <h2 class="my-3 opacity-85 m-0 flex-fill h6">IPTC</h2>
114 <div class="my-auto collapse-chevron-icon"></div>
115 </div>
116 <div class="collapse" id="IPTC_Group">
117 <dl class="pb-3">
118 @foreach (var metadata in IPTC.Values)
119 {
120 if (!String.IsNullOrEmpty(metadata.Value))
121 {
122 if (metadata.Value.Length < 20) {
123 <div class="d-flex flex-row">
124 <dt class="flex-fill">@metadata.Name</dt>
125 <dd>@metadata.Value</dd>
126 </div>
127 } else {
128 <dt class="flex-fill">@metadata.Name</dt>
129 <dd>@metadata.Value</dd>
130 }
131 }
132 }
133 </dl>
134 </div>
135 </div>
136 }
137
138 var XMP = dynamicwebMetadata.GetTagValuesByGroup("XMP");
139
140 @* XMP image data *@
141 if (XMP.Values.Count > 0) {
142 <div class="border-bottom">
143 <div class="d-flex collapsed" data-bs-toggle="collapse" data-bs-target="#XMP_Group" role="button" aria-expanded="true" aria-controls="XMP_Group">
144 <h2 class="my-3 opacity-85 m-0 flex-fill h6">XMP</h2>
145 <div class="my-auto collapse-chevron-icon"></div>
146 </div>
147 <div class="collapse" id="XMP_Group">
148 <dl class="pb-3">
149 @foreach (var metadata in XMP.Values)
150 {
151 if (!String.IsNullOrEmpty(metadata.Value))
152 {
153 if (metadata.Value.Length < 20) {
154 <div class="d-flex flex-row">
155 <dt class="flex-fill">@metadata.Name</dt>
156 <dd>@metadata.Value</dd>
157 </div>
158 } else {
159 <dt class="flex-fill">@metadata.Name</dt>
160 <dd>@metadata.Value</dd>
161 }
162 }
163 }
164 </dl>
165 </div>
166 </div>
167 }
168
169 var EXIF = dynamicwebMetadata.GetTagValuesByGroup("EXIF");
170
171 @* EXIF image data *@
172 if (EXIF.Values.Count > 0) {
173 <div class="border-bottom">
174 <div class="d-flex collapsed" data-bs-toggle="collapse" data-bs-target="#EXIF_Group" role="button" aria-expanded="true" aria-controls="EXIF_Group">
175 <h2 class="my-3 opacity-85 m-0 flex-fill h6">EXIF</h2>
176 <div class="my-auto collapse-chevron-icon"></div>
177 </div>
178 <div class="collapse" id="EXIF_Group">
179 <dl class="pb-3">
180 @foreach (var metadata in EXIF.Values)
181 {
182 if (!String.IsNullOrEmpty(metadata.Value))
183 {
184 if (metadata.Value.Length < 20) {
185 <div class="d-flex flex-row">
186 <dt class="flex-fill">@metadata.Name</dt>
187 <dd>@metadata.Value</dd>
188 </div>
189 } else {
190 <dt class="flex-fill">@metadata.Name</dt>
191 <dd>@metadata.Value</dd>
192 }
193 }
194 }
195 </dl>
196 </div>
197 </div>
198 }
199 }
200 }
201 }
202
203 if (!fileExists) {
204 <div class="alert alert-warning mt-3" role="alert">@Translate("The file does not exist on the server")</div>
205 }
206 }
207 }
208 </div>
209
210 <form class="pe-4">
211 @if (imageFound && !filePath.EndsWith(".pdf", StringComparison.OrdinalIgnoreCase)) {
212 filePath = "/Admin/Public/GetImage.ashx?image=/Files" + filePath;
213
214
215 <div class="mb-2">
216 <h3 class="h5">@Translate("Image settings")</h3>
217 <div>@Translate("Select a resolution for your images")</div>
218 </div>
219
220 <div class="form-floating mb-4">
221 <select class="form-select bg-white" id="ImageSettingsSelector" aria-label="@Translate("Resolution")">
222 <option data-dpi="72" data-image-format="png" data-image-width="1000" selected>@Translate("Web images") (dpi: 72)</option>
223 <option data-dpi="300" data-image-format="jpg" data-image-width="2500">@Translate("Print images") (dpi: 300)</option>
224 <option data-dpi="600" data-image-format="jpg" data-image-width="10000">@Translate("HQ images") (dpi: 600)</option>
225 </select>
226 <label for="ImageFormatSelector">@Translate("Resolution")</label>
227 </div>
228
229 <script type="module">
230 document.querySelector("#ImageSettingsSelector").addEventListener("change", function (e) {
231 const selector = e.currentTarget;
232
233 let href = "@(filePath)";
234
235 if (selector.options[selector.selectedIndex].getAttribute('data-dpi')) {
236 href += "&resolution=" + selector.options[selector.selectedIndex].getAttribute('data-dpi');
237 }
238
239 if (selector.options[selector.selectedIndex].getAttribute('data-image-format')) {
240 href += "&format=" + selector.options[selector.selectedIndex].getAttribute('data-image-format');
241 }
242
243 if (selector.options[selector.selectedIndex].getAttribute('data-image-width')) {
244 href += "&width=" + selector.options[selector.selectedIndex].getAttribute('data-image-width');
245 }
246
247 href += "&width=10000&height=10000&donotupscale=1&crop=5";
248
249 document.querySelector('#AssetDownloadButton').href = href;
250 });
251 </script>
252
253 filePath = filePath + "&resolution=72&format=png&width=1000&donotupscale=1&crop=5";
254 } else {
255 filePath = "/Files" + filePath;
256 }
257
258 <a href="@filePath" download class="btn btn-primary w-100" id="AssetDownloadButton">@Translate("Download asset")</a>
259 </form>
260 </div>
261
262