Magento – How to upload image to “skin” directory (to use it in theme’s CSS)

backendconfigurationcustom-optionsimagemedia

In the admin config section we can upload images to the "media" directory (see example below). But is there any way to upload images to the "skin" directory? For example to:

skin/frontend/my_package/my_theme/images

(So the image would be easily available for CSS files)

This example was copied from app/code/core/Mage/Catalog/etc/system.xml. It loads images to "media":

<config>
    <sections>
        <catalog translate="label" module="catalog">
            <!-- ... -->
            <groups>
                <placeholder translate="label">
                    <label>Product Image Placeholders</label>
                    <clone_fields>1</clone_fields>
                    <clone_model>adminhtml/system_config_clone_media_image</clone_model>
                    <sort_order>300</sort_order>
                    <show_in_default>1</show_in_default>
                    <show_in_website>1</show_in_website>
                    <show_in_store>1</show_in_store>
                    <fields>
                        <placeholder>
                            <label></label>
                            <frontend_type>image</frontend_type>
                            <backend_model>adminhtml/system_config_backend_image</backend_model>
                            <upload_dir config="system/filesystem/media" scope_info="1">catalog/product/placeholder</upload_dir>
                            <base_url type="media" scope_info="1">catalog/product/placeholder</base_url>
                            <sort_order>1</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </placeholder>
                    </fields>
                </placeholder>
<!-- ... -->

I tried to use similar code in my custom module, I replaced paths but seems that it is not correct (I don't even know if it is possible a to upload images this way to the "skin" directory):

                <!-- ... -->
                <fields>
                    <my_field>
                        <label>My Example Field</label>
                        <frontend_type>image</frontend_type>
                        <backend_model>adminhtml/system_config_backend_image</backend_model>

                        <!--
                        <upload_dir config="system/filesystem/media" scope_info="1">catalog/product/placeholder</upload_dir>
                        <base_url type="media" scope_info="1">catalog/product/placeholder</base_url>
                        -->

                        <upload_dir config="system/filesystem/skin" scope_info="1">frontend/my_package/my_theme/images</upload_dir>
                        <base_url type="skin" scope_info="1">frontend/my_package/my_theme/images</base_url>

                        <sort_order>1</sort_order>
                        <show_in_default>1</show_in_default>
                        <show_in_website>1</show_in_website>
                        <show_in_store>1</show_in_store>
                    </my_field>
                </fields>
                <!-- ... -->

Best Answer

Why would you mix the two? I like to think that whatever is under media is admin-controllable while everything that is under skin is only controllable by code. This is the reason for which you'd usually grant write access to the web server only to the media/ and var/ dirs.

The proper way to achieve what you want is to also create a css file under media which would be editable via the admin. Then you can use images in media without any problem. This approach would make more sense, as I don't see how useful would allowing image uploads but not actually changing the css be.

Related Topic