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