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