Custom Attribute for Product Image Not Showing Saved Values in Admin Form (Media Gallery Attribute)

Question

Similar to below:

how to save image custom attribute in magento 2

Have followed above question and added a custom text area attribute. So far the field shows for me under "Alt Text" and then verified values saving in DB for media gallery table with below:

select * from catalog_product_entity_media_gallery WHERE value_id = 17571;

Above query returns my custom attribute and the value fine however once saved the admin product detail form does not show a value for that attribute.

My template for the new media form has a field added which looks like below:

            <div class="admin__field field-image-custom_link">
                <label class="admin__field-label" for="custom_image_link-save">
                    <span><?= $block->escapeHtml(__('Custom Image Link')) ?></span>
                </label>
                <div class="admin__field-control">
                    <div class="admin__field admin__field-option">
                        <textarea type="text"
                               rows="2"
                               data-form-part="<?php /* @escapeNotVerified */ echo $formName ?>"
                               data-role="custom_image_link-save"
                               class="admin__control-text"
                               name="<?= $block->escapeHtmlAttr($elementName) ?>[<%- data.file_id %>][custom_image_link]"/><%- data.custom_image_link %></textarea>
                    </div>
                </div>
            </div>

This is a modified version of template in the other question where custom_image_link is my custom text attribute. Therefore I used <%- data.custom_image_link %> to hopefully pull the field into form however nothing shows.

In the question it shows a data.useforvm value however the attribute was vm and useforvm is not referenced anywhere else so feel there may be a step missing?

Answer 1

Here is my example module from mentioned question/answer on GitHub. You can examine a commit https://github.com/SiarheyUchukhlebau/Dcw_Vm/commit/baf4053dc1d9fa625122cddcfb0da05029bda41f to detect, how I have been add another attribute for the media gallery image called custom_iamge_link (having a text type).

I don't know what exactly goes wrong in your case, because you have not add a complete code, but seems like it is plugin\observer issue. Here is two parts of code where data is saving and loading:

app/code/Dcw/Vm/Observer/ProductSaveAfter.php

Here we save our custom value (don't know why it looks so strange but it works :) ):

public function execute(\Magento\Framework\Event\Observer $observer)
{
    $data = $this->request->getPostValue();

    if (isset($data['product']['media_gallery']['images'])) {
        // print_r($images);exit;
        $connection   = $this->resource->getConnection();
        $tableName    = $this->resource->getTableName('catalog_product_entity_media_gallery'); //gives table name with prefix
        $product      = $observer->getProduct();
        $mediaGallery = $product->getMediaGallery();

        if (isset($mediaGallery['images'])) {
            foreach ($mediaGallery['images'] as $image) {
                //Update Data into table
                $vmValue = !empty($image['vm']) ? (int)$image['vm'] : 0;
                $customImageLinkValue = !empty($image['custom_image_link']) ? $image['custom_image_link'] : '';

                $sql     = "UPDATE " . $tableName . " SET vm = ?, custom_image_link = ? WHERE value_id = ?";
                $connection->query($sql, [$vmValue, $customImageLinkValue, $image['value_id']]);
            }
        }
    }
}

And data loading plugin which is responsible for pass values to our "edit product form":

app/code/Dcw/Vm/Plugin/Product/Gallery.php

/**
 * Add new columns to the regular media gallery select
 *
 * @param \Magento\Catalog\Model\ResourceModel\Product\Gallery $subject
 * @param \Magento\Framework\DB\Select $select
 * @return \Magento\Framework\DB\Select
 */
public function afterCreateBatchBaseSelect(
    \Magento\Catalog\Model\ResourceModel\Product\Gallery $subject,
    \Magento\Framework\DB\Select $select
) {
    $select->columns(['vm', 'custom_image_link']);

    return $select;
}

If two of that parts of code works as it should, all must be fine.

Here is my example of custom attribute field in overwritten template, but it looks like similar part of yours template:

<div class="admin__field field-image-custom_link">
    <label class="admin__field-label" for="custom_image_link">
        <span><?= $block->escapeHtml(__('Custom Image Link')) ?></span>
    </label>
    <div class="admin__field-control">
        <div class="admin__field admin__field-option">
                        <textarea type="text"
                                  rows="2"
                                  data-role="custom_image_link"
                                  data-form-part="<?php /* @escapeNotVerified */ echo $formName ?>"
                                  class="admin__control-textarea"
                                  name="<?= /* @noEscape */ $elementName; ?>[<%- data.file_id %>][custom_image_link]"><%- data.custom_image_link %></textarea>
        </div>
    </div>
</div>

Here is how it looking on my staging:

PS: do not forget to remove a slash (/>) from the ending of the opening <textarea> tag, because it has a closing tag.