Image Tag and Background Inserter

This VS Code extension simplifies the insertion of an <img> tag or CSS background-image property at your cursor position within the editor. You can select the desired image through a file dialog, making it easy to include images in your HTML, PHP, or CSS files.

Features

• Trigger a file dialog to select any image file using the keyboard shortcut Ctrl+Alt+I.
• For HTML and PHP files: Inserts an appropriate <img> tag into the editor based on the path, width, and height of the selected image.
• For CSS files: Inserts a background-image property with the relative path to the selected image.

Usage

1. Place your cursor in the editor where you'd like to insert the <img> tag or background-image property.
2. Press the Ctrl+Alt+I keyboard shortcut.
3. A file dialog will appear; select the image you wish to insert.
4. An appropriate <img> tag or background-image property will be inserted into the editor.

Behind the Scenes

The code for this extension was primarily developed with the help of OpenAI's chatGPT, and the icon was created using DALL-E 3. I feel very hopeful about the potential of AI in software development and design, thanks to this collaboration of AI tools.

Installation

Search for "Image Tag and Background Inserter" in the VS Code extensions marketplace and install it.

License

MIT