gallery.phtml

Go to the documentation of this file.

<?php
// @codingStandardsIgnoreFile

?>
<tr>
<td colspan="2">
<label for="gallery"><?= /* @escapeNotVerified */ __('Images') ?></label>
<table id="gallery" class="gallery" border="0" cellspacing="3" cellpadding="0">
<thead id="gallery_thead" class="gallery">
    <tr class="gallery">
        <td class="gallery" valign="middle" align="center"><?= /* @escapeNotVerified */ __('Big Image') ?></td>
        <td class="gallery" valign="middle" align="center"><?= /* @escapeNotVerified */ __('Thumbnail') ?></td>
        <td class="gallery" valign="middle" align="center"><?= /* @escapeNotVerified */ __('Sort Order') ?></td>
        <td class="gallery" valign="middle" align="center"><?= /* @escapeNotVerified */ __('Delete') ?></td>
    </tr>
</thead>

<tfoot class="gallery">
<tr class="gallery">
<td class="gallery v-middle a-left"colspan="5"><?= $block->getAddButtonHtml() ?></td>
</tr>
</tfoot>

<tbody class="gallery">

<?php $i = 0; if (!is_null($block->getValues())): ?>
    <?php foreach ($block->getValues() as $image): $i++; ?>
        <tr id="<?= $block->getElement()->getHtmlId() ?>_tr_<?= /* @escapeNotVerified */ $image->getValueId() ?>" class="gallery">
        <?php foreach ($block->getValues()->getAttributeBackend()->getImageTypes() as $type): ?>
            <td class="gallery" align="center" style="vertical-align:bottom;">
            <a href="<?= /* @escapeNotVerified */ $image->setType($type)->getSourceUrl() ?>" target="_blank" onclick="imagePreview('<?= $block->getElement()->getHtmlId() ?>_image_<?= /* @escapeNotVerified */ $type ?>_<?= /* @escapeNotVerified */ $image->getValueId() ?>');return false;">
            <img id="<?= $block->getElement()->getHtmlId() ?>_image_<?= /* @escapeNotVerified */ $type ?>_<?= /* @escapeNotVerified */ $image->getValueId() ?>" src="<?= /* @escapeNotVerified */ $image->setType($type)->getSourceUrl() ?>?<?= /* @escapeNotVerified */ time() ?>" alt="<?= /* @escapeNotVerified */ $image->getValue() ?>" title="<?= /* @escapeNotVerified */ $image->getValue() ?>" height="25" class="small-image-preview v-middle"/></a><br/>
            <input type="file" name="<?= /* @escapeNotVerified */ $block->getElement()->getName() ?>_<?= /* @escapeNotVerified */ $type ?>[<?= /* @escapeNotVerified */ $image->getValueId() ?>]" size="1"></td>
        <?php endforeach; ?>
        <td class="gallery" align="center" style="vertical-align:bottom;"><input type="input" name="<?= /* @escapeNotVerified */ $block->getElement()->getParentName() ?>[position][<?= /* @escapeNotVerified */ $image->getValueId() ?>]" value="<?= /* @escapeNotVerified */ $image->getPosition() ?>" id="<?= $block->getElement()->getHtmlId() ?>_position_<?= /* @escapeNotVerified */ $image->getValueId() ?>" size="3"/></td>
        <td class="gallery" align="center" style="vertical-align:bottom;"><?= $block->getDeleteButtonHtml($image->getValueId()) ?><input type="hidden" name="<?= /* @escapeNotVerified */ $block->getElement()->getParentName() ?>[delete][<?= /* @escapeNotVerified */ $image->getValueId() ?>]" id="<?= $block->getElement()->getHtmlId() ?>_delete_<?= /* @escapeNotVerified */ $image->getValueId() ?>"/></td>
        </tr>
    <?php endforeach; ?>
<?php endif; ?>

<?php if ($i == 0): ?>
    <script>
document.getElementById("gallery_thead").style.visibility="hidden";
</script>
<?php endif; ?>

</tbody></table>

<script>
require([
    'prototype'
], function () {
id = 0;
num_of_images = <?= /* @escapeNotVerified */ $i ?>;

window.addNewImage = function()
{

    document.getElementById("gallery_thead").style.visibility="visible";

    id--;
    num_of_images++;
    new_file_input = '<input type="file" name="<?= /* @escapeNotVerified */ $block->getElement()->getName() ?>_%j%[%id%]" size="1">';

    // Sort order input
    var new_row_input = document.createElement( 'input' );
    new_row_input.type = 'text';
    new_row_input.name = '<?= /* @escapeNotVerified */ $block->getElement()->getParentName() ?>[position]['+id+']';
    new_row_input.size = '3';
    new_row_input.value = '0';

    // Delete button
    new_row_button = <?= /* @escapeNotVerified */ $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($block->getDeleteButtonHtml("this")) ?>;

    table = document.getElementById( "gallery" );

    // no of rows in the table:
    noOfRows = table.rows.length;

    // no of columns in the pre-last row:
    noOfCols = table.rows[noOfRows-2].cells.length;

    // insert row at pre-last:
    var x=table.insertRow(noOfRows-1);

    // insert cells in row.
    for (var j = 0; j < noOfCols; j++) {

        newCell = x.insertCell(j);
        newCell.align = "center";
        newCell.valign = "middle";

        if (j==2) {
            newCell.appendChild( new_row_input );
        } else if (j==3) {
            newCell.innerHTML = new_row_button;
        } else {
            newCell.innerHTML = new_file_input.replace(/%j%/g, j).replace(/%id%/g, id);
        }

    }

}

window.deleteImage = function(image)
{
    num_of_images--;
    if (num_of_images<=0) {
        document.getElementById("gallery_thead").style.visibility="hidden";
    }
    if (image>0) {
        document.getElementById('<?= /* @escapeNotVerified */ $block->getElement()->getName() ?>_delete_'+image).value=image;
        document.getElementById('<?= /* @escapeNotVerified */ $block->getElement()->getName() ?>_tr_'+image).style.display='none';
    } else {
        image.parentNode.parentNode.parentNode.removeChild( image.parentNode.parentNode );
    }
}
});
</script>
    </td>
</tr>