{"id":123921,"date":"2018-05-03T13:57:37","date_gmt":"2018-05-03T13:57:37","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=123921"},"modified":"2018-05-07T10:51:29","modified_gmt":"2018-05-07T10:51:29","slug":"how-to-add-image-field-in-akeneo","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/","title":{"rendered":"How to Add Image Field In Akeneo"},"content":{"rendered":"<h2><em>Getting Start with Add Image Field in Akeneo !!<\/em><\/h2>\n<p>In Akeneo PIM, If you want to render the custom image field in product edit form, you need to create a new field. We will go through each step needed to achieve this task.<\/p>\n<p><strong>Supported Extensions: <\/strong>JPG, JPEG,\u00a0 GIF, PNG<\/p>\n<h2><strong>Step1 :\u00a0<\/strong><\/h2>\n<p><em>Before rendering the image field you require to create image field module in public\/js\/product\/form directory. after then you must register it in file requireJs.yml\u00a0which present in your bundle directory Resources\/config.\u00a0<\/em><\/p>\n<p><strong>imageField.js<\/strong><\/p>\n<pre class=\"brush:js\">'use strict';\r\n\/*\r\n * \/src\/Webkul\/ExampleBundle\/Resources\/public\/js\/product\/form\/imageField.js\r\n *\/\r\n\r\ndefine([\r\n        'jquery',\r\n        'pim\/field',\r\n        'underscore',\r\n        'routing',\r\n        'pim\/attribute-manager',\r\n        'webkul\/template\/field\/media',\r\n        'pim\/dialog',\r\n        'oro\/mediator',\r\n        'oro\/messenger',\r\n        'pim\/media-url-generator',\r\n        'jquery.slimbox'\r\n    ],\r\n    function ($, Field, _, Routing, AttributeManager, fieldTemplate, Dialog, mediator, messenger, MediaUrlGenerator) {\r\n        return Field.extend({\r\n            fieldTemplate: _.template(fieldTemplate),\r\n            events: {\r\n                'change .edit .field-input:first input[type=\"file\"]': 'updateModel',\r\n                'click  .clear-field': 'clearField',\r\n                'click  .open-media': 'previewImage'\r\n            },\r\n            uploadContext: {},\r\n            renderInput: function (context) {\r\n                return this.fieldTemplate(context);\r\n            },\r\n            getTemplateContext: function () {\r\n                return Field.prototype.getTemplateContext.apply(this, arguments)\r\n                    .then(function (templateContext) {\r\n                        templateContext.inUpload          = !this.isReady();\r\n                        templateContext.mediaUrlGenerator = MediaUrlGenerator;\r\n\r\n                        return templateContext;\r\n                    }.bind(this));\r\n            },\r\n\r\n            renderCopyInput: function (value) {\r\n                return this.getTemplateContext()\r\n                    .then(function (context) {\r\n                        var copyContext = $.extend(true, {}, context);\r\n                        copyContext.value = value;\r\n                        copyContext.context.locale    = value.locale;\r\n                        copyContext.context.scope     = value.scope;\r\n                        copyContext.editMode          = 'view';\r\n                        copyContext.mediaUrlGenerator = MediaUrlGenerator;\r\n\r\n                        return this.renderInput(copyContext);\r\n                    }.bind(this));\r\n            },\r\n            updateModel: function () {\r\n                if (!this.isReady()) {\r\n                    Dialog.alert(_.__(\r\n                        'pim_enrich.entity.product.info.already_in_upload',\r\n                        {'locale': this.context.locale, 'scope': this.context.scope}\r\n                    ));\r\n                }\r\n\r\n                var input = this.$('.edit .field-input:first input[type=\"file\"]').get(0);\r\n                if (!input || 0 === input.files.length) {\r\n                    return;\r\n                }\r\n\r\n                var formData = new FormData();\r\n                formData.append('file', input.files[0]);\r\n\r\n                this.setReady(false);\r\n                this.uploadContext = {\r\n                    'locale': this.context.locale,\r\n                    'scope':  this.context.scope\r\n                };\r\n\r\n\r\n                $.ajax({\r\n                    url: Routing.generate('pim_enrich_media_rest_post'),\r\n                    type: 'POST',\r\n                    data: formData,\r\n                    contentType: false,\r\n                    cache: false,\r\n                    processData: false,\r\n                    xhr: function () {\r\n                        var myXhr = $.ajaxSettings.xhr();\r\n                        if (myXhr.upload) {\r\n                            myXhr.upload.addEventListener('progress', this.handleProcess.bind(this), false);\r\n                        }\r\n\r\n                        return myXhr;\r\n                    }.bind(this)\r\n                })\r\n                .done(function (data) {\r\n                    this.setUploadContextValue(data);\r\n                    this.render();\r\n                }.bind(this))\r\n                .fail(function (xhr) {\r\n                    var message = xhr.responseJSON &amp;&amp; xhr.responseJSON.message ?\r\n                        xhr.responseJSON.message :\r\n                        _.__('pim_enrich.entity.product.error.upload');\r\n                    messenger.enqueueMessage('error', message);\r\n                })\r\n                .always(function () {\r\n                    this.$('&gt; .akeneo-media-uploader-field .progress').cuploaderandmoverakeneoss({opacity: 0});\r\n                    this.setReady(true);\r\n                    this.uploadContext = {};\r\n                }.bind(this));\r\n            },\r\n            clearField: function () {\r\n                this.setCurrentValue({uploaderandmoverakeneo\r\n                    filePath: null,\r\n                    originalFilename: null\r\n                });\r\n\r\n                this.render();\r\n            },\r\n            handleProcess: function (e) {\r\n                if (this.uploadContext.locale === this.context.locale &amp;&amp;\r\n                    this.uploadContext.scope === this.context.scope\r\n                ) {\r\n                    this.$('&gt; .akeneo-media-uploader-field .progress').css({opacity: 1});\r\n                    this.$('&gt; .akeneo-media-uploader-field .progress .bar').css({\r\n                        width: ((e.loaded \/ e.total) * 100) + '%'\r\n                    });\r\n                }\r\n            },\r\n            previewImage: function () {\r\n                var mediaUrl = MediaUrlGenerator.getMediaShowUrl(this.getCurrentValue().data.filePath, 'preview');\r\n                if (mediaUrl) {\r\n                    $.slimbox(mediaUrl, '', {overlayOpacity: 0.3});\r\n                }\r\n            },\r\n            setUploadContextValue: function (value) {\r\n                var productValue = AttributeManager.getValue(\r\n                    this.model.get('values'),\r\n                    this.attribute,\r\n                    this.uploadContext.locale,\r\n                    this.uploadContext.scope\r\n                );\r\n\r\n                productValue.data = value;\r\n                mediator.trigger('pim_enrich:form:entity:update_state');\r\n            }\r\n        });\r\n    }\r\n);\r\n<\/pre>\n<h2><strong>Step 2:<\/strong><\/h2>\n<p><em>After Creating the js module you must create image field template in public\/templates\/product directory. After then it is also required to register in Requirejs.<\/em>yml\u00a0file<em>.\u00a0<\/em><\/p>\n<h3>imageField.html<\/h3>\n<pre class=\"brush:xml\"> <!-- \/src\/Webkul\/ExampleBundle\/Resources\/public\/templates\/product\/imageField.html -->\r\n&lt;div class=\"AknMediaField &lt;%- value &amp;&amp; value.data &amp;&amp; value.data.filePath ? 'has-file' : '' %&gt;\" &gt;\r\n    &lt;% if (!value || !value.data || value.data.filePath === null) { %&gt;\r\n        &lt;input class=\"AknMediaField-fileUploaderInput\" id=\"&lt;%- fieldId %&gt;\" type=\"file\" data-locale=\"&lt;%- locale %&gt;\" data-scope=\"&lt;%- scope %&gt;\" &lt;%- editMode === 'view' ? 'disabled' : '' %&gt;\/&gt;\r\n        &lt;div class=\"AknMediaField-emptyContainer\"&gt;\r\n            &lt;span title=\"upload icon\" class=\"AknMediaField-uploadIcon\"\/&gt;\r\n            &lt;span&gt;&lt;%- _.__('pim_enrich.entity.product.media.upload')%&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n    &lt;% } else { %&gt;\r\n        &lt;div class=\"AknMediaField-preview preview\"&gt;\r\n            &lt;% mediaThumbnailUrl = mediaUrlGenerator.getMediaShowUrl(value.data.filePath, 'thumbnail_small') %&gt;\r\n            &lt;% mediaPreviewUrl   = mediaUrlGenerator.getMediaShowUrl(value.data.filePath, 'preview') %&gt;\r\n            &lt;% mediaDownloadUrl  = this.getMediaDownloadUrl(value.data.filePath) %&gt;\r\n            &lt;% if ('pim_catalog_image' === attribute.type &amp;&amp; null != mediaThumbnailUrl) { %&gt;\r\n                &lt;div class=\"AknMediaField-thumb file\"&gt;&lt;img src=\"&lt;%- mediaThumbnailUrl %&gt;\" class=\"AknMediaField-image\"\/&gt;&lt;\/div&gt;\r\n            &lt;% } else { %&gt;\r\n                &lt;div class=\"AknMediaField-thumb file\"&gt;\r\n                    &lt;span title=\"upload icon\" class=\"AknMediaField-uploadIcon\"\/&gt;\r\n                &lt;\/div&gt;\r\n            &lt;% } %&gt;\r\n            &lt;div class=\"AknMediaField-info info\"&gt;\r\n                &lt;div class=\"filename\" title=\"&lt;%- value.data.originalFilename %&gt;\"&gt;&lt;%- value.data.originalFilename %&gt;&lt;\/div&gt;\r\n                &lt;div class=\"AknButtonList AknButtonList--centered actions\"&gt;\r\n                    &lt;% if ('pim_catalog_image' === attribute.type &amp;&amp; null != mediaPreviewUrl) { %&gt;\r\n                        &lt;span class=\"AknButtonList-item AknIconButton AknIconButton--grey open-media\"&gt;&lt;i class=\"icon icon-eye-open\"&gt;&lt;\/i&gt;&lt;\/span&gt;\r\n                    &lt;% } %&gt;\r\n                    &lt;a href=\"&lt;%- mediaDownloadUrl %&gt;\" class=\"AknButtonList-item AknIconButton AknIconButton--grey download-file\" download&gt;&lt;i class=\"icon icon-cloud-download\"&gt;&lt;\/i&gt;&lt;\/a&gt;\r\n                    &lt;span class=\"AknButtonList-item AknIconButton AknIconButton--grey clear-field &lt;%- editMode === 'view' ? 'AknIconButton--hide' : '' %&gt;\"&gt;&lt;i class=\"icon icon-trash\"&gt;&lt;\/i&gt;&lt;\/span&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;% } %&gt;\r\n    &lt;div class=\"AknMediaField-progress AknProgress AknProgress--micro progress\"&gt;\r\n        &lt;div class=\"AknProgress-bar bar\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<h2><strong>Step 3:<\/strong><\/h2>\n<p><strong>Now we need to register both above files in the requirejs configuration file:<br \/>\n<\/strong><\/p>\n<pre class=\"brush:xml\"># src\/webkul\/ExampleBundle\/Resources\/config\/requirejs.yml\r\n\r\nconfig:\r\n    paths:\r\n        webkul\/product\/form\/imagefield: webkul\/js\/product\/form\/imageField.js\r\n        webkul\/template\/product\/imagefield: webkul\/templates\/product\/form\/imageField.html\r\n<\/pre>\n<h2><strong>Step 4:<\/strong><\/h2>\n<h3>Now add it to form:<\/h3>\n<p>After creating the js module and image field template now create form extension to add the field. in the directory <em>resources\/config\/form_extensions<\/em><\/p>\n<pre class=\"brush:xml\"># src\/webkul\/ExampleBundle\/Resources\/config\/form_extensions\/product_edit.yml\r\n\r\n\r\nextensions:\r\n    pim-product-edit-form-export-csv:            # The form extension code (can be whatever you want)\r\n        module: webkul\/product\/form\/imagefield   # The requirejs module we just created\r\n        parent: pim-product-edit-form            # The parent extension in the form where we want to be registered\r\n        targetZone: container\r\n        position: 90                             # The extension position (lower will be first)\r\n<\/pre>\n<p>After adding it to the form extension you must clear the cache using following commands in terminal.<\/p>\n<p>1. php bin\/console c:c &#8211;env=prod<br \/>\n2. rm -rf .\/var\/cache\/** &amp;&amp; php bin\/console pim:install:asset &#8211;env=prod &amp;&amp; php bin\/console assets:install web &#8211;symlink &amp;&amp; yarn run webpack<\/p>\n<p>After the refresh your web browser you will found new image field in product edit form.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Getting Start with Add Image Field in Akeneo !! In Akeneo PIM, If you want to render the custom image field in product edit form, you need to create a new field. We will go through each step needed to achieve this task. Supported Extensions: JPG, JPEG,\u00a0 GIF, PNG Step1 :\u00a0 Before rendering the image <a href=\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":189,"featured_media":123923,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5709],"tags":[3649,6658,5829],"class_list":["post-123921","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-akeneo","tag-akeneo","tag-image-field","tag-pim"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Image Field In Akeneo - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Image Field In Akeneo - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Getting Start with Add Image Field in Akeneo !! In Akeneo PIM, If you want to render the custom image field in product edit form, you need to create a new field. We will go through each step needed to achieve this task. Supported Extensions: JPG, JPEG,\u00a0 GIF, PNG Step1 :\u00a0 Before rendering the image [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-03T13:57:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-07T10:51:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/Image-Uploader.png\" \/>\n\t<meta property=\"og:image:width\" content=\"435\" \/>\n\t<meta property=\"og:image:height\" content=\"169\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Navneet Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Navneet Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/\"},\"author\":{\"name\":\"Navneet Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/fba361b1101985561e7a6e0685079a8c\"},\"headline\":\"How to Add Image Field In Akeneo\",\"datePublished\":\"2018-05-03T13:57:37+00:00\",\"dateModified\":\"2018-05-07T10:51:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/\"},\"wordCount\":237,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/Image-Uploader.png\",\"keywords\":[\"Akeneo\",\"Image Field\",\"pim\"],\"articleSection\":[\"Akeneo\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/\",\"name\":\"How to Add Image Field In Akeneo - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/Image-Uploader.png\",\"datePublished\":\"2018-05-03T13:57:37+00:00\",\"dateModified\":\"2018-05-07T10:51:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/Image-Uploader.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/Image-Uploader.png\",\"width\":\"435\",\"height\":\"169\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Image Field In Akeneo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/fba361b1101985561e7a6e0685079a8c\",\"name\":\"Navneet Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d0ebf451d594c29d21e3f35988748bf30377c55a864d36dfe98891688ac796d6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d0ebf451d594c29d21e3f35988748bf30377c55a864d36dfe98891688ac796d6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Navneet Kumar\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/navneetkumar-symfony813\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Image Field In Akeneo - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Image Field In Akeneo - Webkul Blog","og_description":"Getting Start with Add Image Field in Akeneo !! In Akeneo PIM, If you want to render the custom image field in product edit form, you need to create a new field. We will go through each step needed to achieve this task. Supported Extensions: JPG, JPEG,\u00a0 GIF, PNG Step1 :\u00a0 Before rendering the image [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-05-03T13:57:37+00:00","article_modified_time":"2018-05-07T10:51:29+00:00","og_image":[{"width":435,"height":169,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/Image-Uploader.png","type":"image\/png"}],"author":"Navneet Kumar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Navneet Kumar","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/"},"author":{"name":"Navneet Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/fba361b1101985561e7a6e0685079a8c"},"headline":"How to Add Image Field In Akeneo","datePublished":"2018-05-03T13:57:37+00:00","dateModified":"2018-05-07T10:51:29+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/"},"wordCount":237,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/Image-Uploader.png","keywords":["Akeneo","Image Field","pim"],"articleSection":["Akeneo"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/","url":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/","name":"How to Add Image Field In Akeneo - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/Image-Uploader.png","datePublished":"2018-05-03T13:57:37+00:00","dateModified":"2018-05-07T10:51:29+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/Image-Uploader.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/Image-Uploader.png","width":"435","height":"169"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-add-image-field-in-akeneo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add Image Field In Akeneo"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/fba361b1101985561e7a6e0685079a8c","name":"Navneet Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d0ebf451d594c29d21e3f35988748bf30377c55a864d36dfe98891688ac796d6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d0ebf451d594c29d21e3f35988748bf30377c55a864d36dfe98891688ac796d6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Navneet Kumar"},"url":"https:\/\/webkul.com\/blog\/author\/navneetkumar-symfony813\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/123921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/189"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=123921"}],"version-history":[{"count":15,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/123921\/revisions"}],"predecessor-version":[{"id":124221,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/123921\/revisions\/124221"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/123923"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=123921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=123921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=123921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}