{"id":28229,"date":"2015-07-01T08:04:07","date_gmt":"2015-07-01T08:04:07","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=28229"},"modified":"2024-02-22T04:56:19","modified_gmt":"2024-02-22T04:56:19","slug":"magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/","title":{"rendered":"Magento2 &#8211; How To Add Drop Down And Image Upload Fields In Configuration Section"},"content":{"rendered":"\n<p>Here we learn in Magento2 &#8211; How To Add Drop Down And Image Upload Fields In Configuration Section<\/p>\n\n\n\n<p>In previous post we learned <a href=\"https:\/\/webkul.com\/blog\/magento2-how-to-add-custom-module-configuration-in-configuration-section-using-system-xml\/\">How to add custom module configuration in configuration section using system.xml<\/a><strong> in Magento2.<\/strong><\/p>\n\n\n\n<p>Now here we add Drop down with option and&nbsp; image upload field in configuration.<\/p>\n\n\n\n<p><strong>=&gt;For Drop down field<\/strong><\/p>\n\n\n\n<p><strong>1#First we need to create source model for drop down options<\/strong><\/p>\n\n\n\n<p>then we create a file named Sleektheme.php in directory app\\code\\Namespace\\Modulename\\Model\\Config\\Source<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\n\/**\n * My own options\n *\n *\/\nnamespace Namespace\\Modulename\\Model\\Config\\Source;\nclass Sleektheme implements \\Magento\\Framework\\Option\\ArrayInterface\n{\n    \/**\n     * @return array\n     *\/\n    public function toOptionArray()\n    {\n        return &#091;\n            &#091;&#039;value&#039; =&gt; &#039;light&#039;, &#039;label&#039; =&gt; __(&#039;Light&#039;)],\n            &#091;&#039;value&#039; =&gt; &#039;dark&#039;, &#039;label&#039; =&gt; __(&#039;Dark&#039;)],\n            &#091;&#039;value&#039; =&gt; &#039;stitch&#039;, &#039;label&#039; =&gt; __(&#039;Stitch&#039;)]\n        ];\n    }\n}\n\n?&gt;<\/pre>\n\n\n\n<p><strong>2# Now we add Drop down field by adding following xml code in system.xml that is in app\/code\/Namespace\/Modulename\/etc\/adminhtml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">       &lt;field id=&quot;theme&quot; translate=&quot;label comment&quot; sortOrder=&quot;6&quot; type=&quot;select&quot; showInDefault=&quot;1&quot; showInWebsite=&quot;1&quot; showInStore=&quot;1&quot;&gt;\n             &lt;label&gt;Theme&lt;\/label&gt;\n             &lt;comment&gt;eg.can use stitch,light,dark theme.&lt;\/comment&gt;\n             &lt;!-- source model which we created for drop down options --&gt;\n             &lt;source_model&gt;Namespace\\Modulename\\Model\\Config\\Source\\Sleektheme&lt;\/source_model&gt;\n       &lt;\/field&gt;\n\n&nbsp;<\/pre>\n\n\n\n<p><strong>=&gt;For Image field<\/strong><\/p>\n\n\n\n<p><strong>1#First we need to create backend model for image field in which we upload image file to defined location<br><\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\n\nnamespace Namespace\\Modulename\\Model;\n\nclass Saveimage extends \\Magento\\Config\\Model\\Config\\Backend\\Image\n{\n    \/**\n     * The tail part of directory path for uploading\n     *\/\n   \n    const UPLOAD_DIR = &#039;webkul\/banner&#039;;\n\n    \/**\n     * Upload max file size in kilobytes\n     *\n     * @var int\n     *\/\n    protected $_maxFileSize = 2048;\n\n    \/**\n     * Return path to directory for upload file\n     *\n     * @return string\n     *\/\n    protected function _getUploadDir()\n    {\n        return $this-&gt;_mediaDirectory-&gt;getAbsolutePath($this-&gt;_appendScopeInfo(self::UPLOAD_DIR));\n    }\n\n    \/**\n     * Makes a decision about whether to add info about the scope\n     *\n     * @return boolean\n     *\/\n    protected function _addWhetherScopeInfo()\n    {\n        return true;\n    }\n\n    \/**\n     * Save uploaded file before saving config value\n     *\n     * Save changes and delete file if &quot;delete&quot; option passed\n     *\n     * @return $this\n     *\/\n    public function beforeSave()\n    {\n        $value = $this-&gt;getValue();\n        $deleteFlag = is_array($value) &amp;&amp; !empty($value&#091;&#039;delete&#039;]);\n        $fileTmpName = $_FILES&#091;&#039;groups&#039;]&#091;&#039;tmp_name&#039;]&#091;$this-&gt;getGroupId()]&#091;&#039;fields&#039;]&#091;$this-&gt;getField()]&#091;&#039;value&#039;];\n\n        if ($this-&gt;getOldValue() &amp;&amp; ($fileTmpName || $deleteFlag)) {\n            $this-&gt;_mediaDirectory-&gt;delete(self::UPLOAD_DIR . &#039;\/&#039; . $this-&gt;getOldValue());\n        }\n        return parent::beforeSave();\n    }\n}<\/pre>\n\n\n\n<p>Then we create backend model file named Saveimage.php in <strong>app\/code\/Namespace\/Modulename\/Model<\/strong><\/p>\n\n\n\n<p><strong>2# Now we add Image field by adding following xml code in system.xml that is in app\/code\/Namespace\/Modulename\/etc\/adminhtml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">  &lt;field id=&quot;slider_image_1&quot; translate=&quot;label&quot; type=&quot;image&quot; sortOrder=&quot;12&quot; showInDefault=&quot;1&quot; showInWebsite=&quot;1&quot; showInStore=&quot;1&quot;&gt;\n        &lt;label&gt;Slider Image 1&lt;\/label&gt;\n        &lt;comment&gt;Allowed file types: jpg, jpeg, gif, png&lt;\/comment&gt;\n        &lt;!-- backend model which save uploaded  file on define location --&gt;\n        &lt;backend_model&gt;Namespace\\Modulename\\Model\\Saveimage&lt;\/backend_model&gt;\n        &lt;base_url type=&quot;media&quot; scope_info=&quot;1&quot;&gt;webkul\/banner&lt;\/base_url&gt;\n  &lt;\/field&gt;\n&nbsp;<\/pre>\n\n\n\n<p><strong>Finally after adding above both xml code to system.xml it&#8217;s look like following<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?xml version=&quot;1.0&quot;?&gt;\n&lt;config xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;..\/..\/..\/Config\/etc\/system_file.xsd&quot;&gt;\n    &lt;system&gt;\n        &lt;!-- for add new tab in Magento2 system configuration section --&gt;\n        &lt;tab id=&quot;webkul&quot; translate=&quot;label&quot; sortOrder=&quot;10&quot;&gt;\n             &lt;label&gt;Webkul&lt;\/label&gt;\n        &lt;\/tab&gt;\n        &lt;!-- for create section --&gt;\n        &lt;section id=&quot;sleekaccordian&quot; translate=&quot;label&quot; type=&quot;text&quot; sortOrder=&quot;320&quot; showInDefault=&quot;1&quot; showInWebsite=&quot;1&quot; showInStore=&quot;1&quot;&gt;\n            &lt;label&gt;Sleek Accordian&lt;\/label&gt;\n            &lt;!-- Assign section to tab --&gt;\n            &lt;tab&gt;webkul&lt;\/tab&gt;\n            &lt;resource&gt;Namespace_Modulename::configuration&lt;\/resource&gt;\n            &lt;!-- create group for fields in section --&gt;\n            &lt;group id=&quot;parameters&quot; translate=&quot;label&quot; type=&quot;text&quot; delault=&quot;1&quot; sortOrder=&quot;5&quot; showInDefault=&quot;1&quot; showInWebsite=&quot;1&quot; showInStore=&quot;1&quot;&gt;\n                &lt;label&gt;Parameters&lt;\/label&gt;\n                &lt;!-- create dropdown select type field --&gt;\n                &lt;field id=&quot;theme&quot; translate=&quot;label comment&quot; sortOrder=&quot;6&quot; type=&quot;select&quot; showInDefault=&quot;1&quot; showInWebsite=&quot;1&quot; showInStore=&quot;1&quot;&gt;\n                    &lt;label&gt;Theme&lt;\/label&gt;\n                    &lt;comment&gt;eg.can use stitch,light,dark theme.&lt;\/comment&gt;\n                    &lt;!-- source model which we created for drop down options --&gt;\n                    &lt;source_model&gt;Namespace\\Modulename\\Model\\Config\\Source\\Sleektheme&lt;\/source_model&gt;\n                &lt;\/field&gt;\n                &lt;!-- create image upload type field --&gt;\n                &lt;field id=&quot;slider_image_1&quot; translate=&quot;label&quot; type=&quot;image&quot; sortOrder=&quot;12&quot; showInDefault=&quot;1&quot; showInWebsite=&quot;1&quot; showInStore=&quot;1&quot;&gt;\n                    &lt;label&gt;Slider Image 1&lt;\/label&gt;\n                    &lt;comment&gt;Allowed file types: jpg, jpeg, gif, png&lt;\/comment&gt;\n                    &lt;!-- backend model which save uploaded  file on define location --&gt;\n                    &lt;backend_model&gt;Namespace\\Modulename\\Model\\Saveimage&lt;\/backend_model&gt;\n                    &lt;base_url type=&quot;media&quot; scope_info=&quot;1&quot;&gt;webkul\/banner&lt;\/base_url&gt;\n                &lt;\/field&gt;\n            &lt;\/group&gt;\n        &lt;\/section&gt;\n    &lt;\/system&gt;\n&lt;\/config&gt;\n&nbsp;<\/pre>\n\n\n\n<p><strong>And in configuration this drop down and image field add as following \ud83d\ude42<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png\"><img decoding=\"async\" width=\"1298\" height=\"561\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png\" alt=\"Selection_025\" class=\"wp-image-28276\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png 1298w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025-250x108.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025-300x130.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025-1200x519.png 1200w\" sizes=\"(max-width: 1298px) 100vw, 1298px\" loading=\"lazy\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Here we learn in Magento2 &#8211; How To Add Drop Down And Image Upload Fields In Configuration Section In previous post we learned How to add custom module configuration in configuration section using system.xml in Magento2. Now here we add Drop down with option and&nbsp; image upload field in configuration. =&gt;For Drop down field 1#First <a href=\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,302],"tags":[1906,1908,584,2070,1909,1907,317],"class_list":["post-28229","post","type-post","status-publish","format-standard","hentry","category-magento","category-magento2","tag-configuration","tag-dropdown","tag-image","tag-magento2","tag-select","tag-system-xml","tag-upload"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section<\/title>\n<meta name=\"description\" content=\"Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section\" \/>\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\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section\" \/>\n<meta property=\"og:description\" content=\"Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/\" \/>\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=\"2015-07-01T08:04:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-22T04:56:19+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png\" \/>\n<meta name=\"author\" content=\"Abhishek Singh\" \/>\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=\"Abhishek Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/\"},\"author\":{\"name\":\"Abhishek Singh\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/573e459f54796eb4195511990de4bfd0\"},\"headline\":\"Magento2 &#8211; How To Add Drop Down And Image Upload Fields In Configuration Section\",\"datePublished\":\"2015-07-01T08:04:07+00:00\",\"dateModified\":\"2024-02-22T04:56:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/\"},\"wordCount\":208,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png\",\"keywords\":[\"Configuration\",\"dropdown\",\"image\",\"Magento2\",\"select\",\"system.xml\",\"upload\"],\"articleSection\":[\"magento\",\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/\",\"url\":\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/\",\"name\":\"Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png\",\"datePublished\":\"2015-07-01T08:04:07+00:00\",\"dateModified\":\"2024-02-22T04:56:19+00:00\",\"description\":\"Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#primaryimage\",\"url\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png\",\"contentUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Magento2 &#8211; How To Add Drop Down And Image Upload Fields In Configuration Section\"}]},{\"@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\/573e459f54796eb4195511990de4bfd0\",\"name\":\"Abhishek Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d4ac7e0e671bf743359d7e3f140c262d1b16d71106f0a1aeaecca327a2805ae4?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\/d4ac7e0e671bf743359d7e3f140c262d1b16d71106f0a1aeaecca327a2805ae4?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Abhishek Singh\"},\"description\":\"Adobe Commerce certified Magento developer with over 12 years of experience at Webkul. Passionate about scalable Magento 2-based webshops, AI, and multi-channel integrations, Abhishek consistently delivers innovative and efficient e-commerce solutions that propel businesses forward.\",\"sameAs\":[\"http:\/\/webkul.com\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/abhishek\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section","description":"Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section","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\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/","og_locale":"en_US","og_type":"article","og_title":"Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section","og_description":"Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section","og_url":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2015-07-01T08:04:07+00:00","article_modified_time":"2024-02-22T04:56:19+00:00","og_image":[{"url":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png","type":"","width":"","height":""}],"author":"Abhishek Singh","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Abhishek Singh","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/"},"author":{"name":"Abhishek Singh","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/573e459f54796eb4195511990de4bfd0"},"headline":"Magento2 &#8211; How To Add Drop Down And Image Upload Fields In Configuration Section","datePublished":"2015-07-01T08:04:07+00:00","dateModified":"2024-02-22T04:56:19+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/"},"wordCount":208,"commentCount":3,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#primaryimage"},"thumbnailUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png","keywords":["Configuration","dropdown","image","Magento2","select","system.xml","upload"],"articleSection":["magento","Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/","url":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/","name":"Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#primaryimage"},"thumbnailUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png","datePublished":"2015-07-01T08:04:07+00:00","dateModified":"2024-02-22T04:56:19+00:00","description":"Magento2 - How To Add Drop Down And Image Upload Fields In Configuration Section","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#primaryimage","url":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png","contentUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2015\/07\/Selection_025.png"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/magento2-how-to-add-drop-down-and-image-upload-fields-in-configuration-section\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Magento2 &#8211; How To Add Drop Down And Image Upload Fields In Configuration Section"}]},{"@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\/573e459f54796eb4195511990de4bfd0","name":"Abhishek Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d4ac7e0e671bf743359d7e3f140c262d1b16d71106f0a1aeaecca327a2805ae4?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\/d4ac7e0e671bf743359d7e3f140c262d1b16d71106f0a1aeaecca327a2805ae4?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Abhishek Singh"},"description":"Adobe Commerce certified Magento developer with over 12 years of experience at Webkul. Passionate about scalable Magento 2-based webshops, AI, and multi-channel integrations, Abhishek consistently delivers innovative and efficient e-commerce solutions that propel businesses forward.","sameAs":["http:\/\/webkul.com"],"url":"https:\/\/webkul.com\/blog\/author\/abhishek\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/28229","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=28229"}],"version-history":[{"count":15,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/28229\/revisions"}],"predecessor-version":[{"id":423592,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/28229\/revisions\/423592"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=28229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=28229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=28229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}