Magento 2 Documentation  2.3
Documentation for Magento 2 CMS v2.3 (December 2018)
gallery.phtml
Go to the documentation of this file.
1 <?php
7 // @codingStandardsIgnoreFile
8 
10 $elementName = $block->getElement()->getName() . '[images]';
11 $formName = $block->getFormName();
12 ?>
13 
14 <div class="row">
15  <div class="add-video-button-container">
16  <button id="add_video_button"
17  title="<?= $block->escapeHtml(__('Add Video')) ?>"
18  data-role="add-video-button"
19  type="button"
20  class="action-secondary"
21  data-ui-id="widget-button-1">
22  <span><?= $block->escapeHtml(__('Add Video')) ?></span>
23  </button>
24  </div>
25 </div>
26 
27 <?php
29 $element = $block->getElement();
30 $elementToggleCode = $element->getToggleCode() ? $element->getToggleCode() : 'toggleValueElements(this, this.parentNode.parentNode.parentNode)';
31 ?>
32 
33 <div id="<?= $block->getHtmlId() ?>"
34  class="gallery"
35  data-mage-init='{"openVideoModal":{}}'
36  data-parent-component="<?= $block->escapeHtml($block->getData('config/parentComponent')) ?>"
37  data-images="<?= $block->escapeHtmlAttr($block->getImagesJson()) ?>"
38  data-types="<?= $block->escapeHtml(
39  $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($block->getImageTypes())
40  ) ?>"
41 >
42 
43  <?php
44  if (!$block->getElement()->getReadonly()):
45  ?>
46  <div class="image image-placeholder">
47  <?php /* @escapeNotVerified */ echo $block->getUploaderHtml();
48  ?>
49  <div class="product-image-wrapper">
50  <p class="image-placeholder-text">
51  <?= $block->escapeHtml(
52  __('Browse to find or drag image here')
53  ); ?>
54  </p>
55  </div>
56  </div>
57  <?= /* @escapeNotVerified */ $block->getChildHtml('additional_buttons') ?>
58  <?php
59  endif;
60  ?>
61  <?php
62  foreach ($block->getImageTypes() as $typeData):
63  ?>
64  <input name="<?= $block->escapeHtml($typeData['name']) ?>"
65  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
66  class="image-<?= $block->escapeHtml($typeData['code']) ?>"
67  type="hidden"
68  value="<?= $block->escapeHtml($typeData['value']) ?>"/>
69  <?php
70  endforeach;
71  ?>
72  <script id="<?= /* @escapeNotVerified */ $block->getHtmlId() ?>-template" data-template="image" type="text/x-magento-template">
73  <div class="image item <% if (data.disabled == 1) { %>hidden-for-front<% } %> <% if (data.video_url) { %>video-item<% } %>"
74  data-role="image">
75  <input type="hidden"
76  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][position]"
77  value="<%- data.position %>"
78  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
79  class="position"/>
80  <% if (data.media_type !== 'external-video') {%>
81  <input type="hidden"
82  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][media_type]"
83  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
84  value="image"/>
85  <% } else { %>
86  <input type="hidden"
87  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][media_type]"
88  value="<%- data.media_type %>"
89  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
90  <% } %>
91  <input type="hidden"
92  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][video_provider]"
93  value="<%- data.video_provider %>"
94  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
95  <input type="hidden"
96  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][file]"
97  value="<%- data.file %>"
98  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
99  <input type="hidden"
100  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][value_id]"
101  value="<%- data.value_id %>"
102  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
103  <input type="hidden"
104  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][label]"
105  value="<%- data.label %>"
106  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
107  <input type="hidden"
108  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][disabled]"
109  value="<%- data.disabled %>"
110  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
111  <input type="hidden"
112  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][removed]"
113  value="" class="is-removed"
114  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
115  <input type="hidden"
116  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][video_url]"
117  value="<%- data.video_url %>"
118  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
119  <input type="hidden"
120  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][video_title]"
121  value="<%- data.video_title %>"
122  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
123  <input type="hidden"
124  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][video_description]"
125  value="<%- data.video_description %>"
126  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
127  <input type="hidden"
128  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][video_metadata]"
129  value="<%- data.video_metadata %>"
130  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
131  <input type="hidden"
132  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][role]"
133  value="<%- data.video_description %>"
134  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"/>
135 
136  <div class="product-image-wrapper">
137  <img class="product-image"
138  data-role="image-element"
139  src="<%- data.url %>"
140  alt="<%- data.label %>"/>
141 
142  <div class="actions">
143  <button type="button"
144  class="action-remove"
145  data-role="delete-button"
146  title="<% if (data.media_type == 'external-video') {%>
147  <?= $block->escapeHtml(
148  __('Delete video')
149  ); ?>
150  <%} else {%>
151  <?= $block->escapeHtml(
152  __('Delete image')
153  ); ?>
154  <%}%>">
155  <span>
156  <% if (data.media_type == 'external-video') { %>
157  <?= $block->escapeHtml(
158  __('Delete video')
159  ); ?>
160  <% } else {%>
161  <?= $block->escapeHtml(
162  __('Delete image')
163  ); ?>
164  <%} %>
165  </span>
166  </button>
167  <div class="draggable-handle"></div>
168  </div>
169  <div class="image-fade"><span><?= $block->escapeHtml(
170  __('Hidden')
171  ); ?></span></div>
172  </div>
173 
174  <div class="item-description">
175  <% if (data.media_type !== 'external-video') {%>
176  <div class="item-title" data-role="img-title"><%- data.label %></div>
177  <div class="item-size">
178  <span data-role="image-dimens"></span>, <span data-role="image-size"><%- data.sizeLabel %></span>
179  </div>
180  <% } else { %>
181  <div class="item-title" data-role="img-title"><%- data.video_title %></div>
182  <% } %>
183  </div>
184 
185  <ul class="item-roles" data-role="roles-labels">
186  <?php
187  foreach ($block->getImageTypes() as $typeData):
188  ?>
189  <li data-role-code="<?= $block->escapeHtml(
190  $typeData['code']
191  ) ?>" class="item-role item-role-<?= $block->escapeHtml(
192  $typeData['code']
193  ) ?>">
194  <?= $block->escapeHtml($typeData['label']) ?>
195  </li>
196  <?php
197  endforeach;
198  ?>
199  </ul>
200  </div>
201  </script>
202 
203  <script data-role="img-dialog-container-tmpl" type="text/x-magento-template">
204  <div class="image-panel" data-role="dialog">
205  </div>
206  </script>
207 
208  <script data-role="img-dialog-tmpl" type="text/x-magento-template">
209  <div class="image-panel-preview">
210  <img src="<%- data.url %>" alt="<%- data.label %>" />
211  </div>
212  <div class="image-panel-controls">
213  <strong class="image-name"><%- data.label %></strong>
214 
215  <fieldset class="admin__fieldset fieldset-image-panel">
216  <div class="admin__field field-image-description">
217  <label class="admin__field-label" for="image-description">
218  <span><?= /* @escapeNotVerified */ __('Alt Text') ?></span>
219  </label>
220 
221  <div class="admin__field-control">
222  <textarea data-role="image-description"
223  rows="3"
224  class="admin__control-textarea"
225  name="<?php /* @escapeNotVerified */
226  echo $elementName
227  ?>[<%- data.file_id %>][label]"><%- data.label %></textarea>
228  </div>
229  </div>
230 
231  <div class="admin__field field-image-role">
232  <label class="admin__field-label">
233  <span><?= $block->escapeHtml(
234  __('Role')
235  ); ?></span>
236  </label>
237  <div class="admin__field-control">
238  <ul class="multiselect-alt">
239  <?php
240  foreach ($block->getMediaAttributes() as $attribute) :
241  ?>
242  <li class="item">
243  <label>
244  <input class="image-type"
245  data-role="type-selector"
246  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
247  type="checkbox"
248  value="<?= $block->escapeHtml(
249  $attribute->getAttributeCode()
250  ) ?>"
251  />
252  <?php /* @escapeNotVerified */ echo $block->escapeHtml(
253  $attribute->getFrontendLabel()
254  ) ?>
255  </label>
256  </li>
257  <?php
258  endforeach;
259  ?>
260  </ul>
261  </div>
262  </div>
263 
264  <div class="admin__field admin__field-inline field-image-size" data-role="size">
265  <label class="admin__field-label">
266  <span><?= /* @escapeNotVerified */ __('Image Size') ?></span>
267  </label>
268  <div class="admin__field-value" data-message="<?= /* @escapeNotVerified */ __('{size}') ?>"></div>
269  </div>
270 
271  <div class="admin__field admin__field-inline field-image-resolution" data-role="resolution">
272  <label class="admin__field-label">
273  <span><?= /* @escapeNotVerified */ __('Image Resolution') ?></span>
274  </label>
275  <div class="admin__field-value" data-message="<?= /* @escapeNotVerified */ __('{width}^{height} px') ?>"></div>
276  </div>
277 
278  <div class="admin__field field-image-hide">
279  <div class="admin__field-control">
280  <div class="admin__field admin__field-option">
281  <input type="checkbox"
282  id="hide-from-product-page"
283  data-role="visibility-trigger"
284  data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
285  value="1"
286  class="admin__control-checkbox"
287  name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][disabled]"
288  <% if (data.disabled == 1) { %>checked="checked"<% } %> />
289 
290  <label for="hide-from-product-page" class="admin__field-label">
291  <?= $block->escapeHtml(
292  __('Hide from Product Page')
293  ); ?>
294  </label>
295  </div>
296  </div>
297  </div>
298  </fieldset>
299  </div>
300  </script>
301  <div id="<?= /* @noEscape */ $block->getNewVideoBlockName() ?>" style="display:none">
302  <?= /* @escapeNotVerified */ $block->getFormHtml() ?>
303  <div id="video-player-preview-location" class="video-player-sidebar">
304  <div class="video-player-container"></div>
305  <div class="video-information title">
306  <label><?= $block->escapeHtml(
307  __('Title:')
308  ); ?> </label><span></span>
309  </div>
310  <div class="video-information uploaded">
311  <label><?= $block->escapeHtml(
312  __('Uploaded:')
313  ); ?> </label><span></span>
314  </div>
315  <div class="video-information uploader">
316  <label><?= $block->escapeHtml(
317  __('Uploader:')
318  ); ?> </label><span></span>
319  </div>
320  <div class="video-information duration">
321  <label><?= $block->escapeHtml(
322  __('Duration:')
323  ); ?> </label><span></span>
324  </div>
325  </div>
326  </div>
327 
328  <?= $block->getChildHtml('new-video') ?>
329 </div>
330 <script>
331  jQuery('body').trigger('contentUpdated');
332 </script>
$block setTitle( 'CMS Block Title') -> setIdentifier('fixture_block') ->setContent('< h1 >Fixture Block Title</h1 >< a href=" store url</a><p> Config value
Definition: block.php:9
$element
Definition: gallery.phtml:29
if( $form)() ?>< script > require(['jquery' mage mage
Definition: save.phtml:15
__()
Definition: __.php:13
jquery extjs ext tree mage adminhtml form
Definition: tree.phtml:41
$block
Definition: block.php:8
jquery ui
Definition: tree.phtml:41
$formName
Definition: gallery.phtml:11
endif
Definition: gallery.phtml:44
$elementToggleCode
Definition: gallery.phtml:30
jQuery('.store-switcher .dropdown-menu li a').each(function()
Definition: switcher.phtml:203
$elementName
Definition: gallery.phtml:10
endforeach
Definition: gallery.phtml:41