How To Build An Automatic Image Generator💡 Google AI Studio 📝

Hi Friends, my name is Callum aka wanderloots. Today's video is a practical tutorial on how I used Google AI Studio (Gemini 2.5 Pro) to code an Automatic Open Graph Image Generator for my website to improve social sharing of my website links 📝💡 Adding image previews to website links is a powerful way to improve clicks to your website. People like to know what they are clicking into, and this dynamic image generator workflow helps you build those website preview images automatically ✨ This video walks through my full process of understanding how open graph images work, why they're valuable & how you can build an automatic open graph image generator to improve the visuals of sharing your website links on social media or by texting. I use my Obsidian Digital Garden website (https://wanderloots.xyz) as an example, which automatically publishes selected Obsidian notes to my website. Note: this tutorial shows you how to build an Open Graph (OG) image generator for ANY website, illustrating how I use Google AI Studio (Gemini 2.5 Pro) to generate code for me AND teach me how to code along the way. Even if you are not interested in digital gardening, this tutorial will still show you useful tips on how to Code with AI. If you did use the digital garden plugin to create a website (like I did in this video: https://youtu.be/7f8e5IiUkeo), the process will be identical for you. I also share how to modify the code for different hosting providers like Vercel & Netlify. Google AI Studio is an incredible powerful tool that has been helping me turn my ideas into reality. As a non-coder, I have been learning how to code using Gemini 2.5 Pro, while also using it to write code for me & debug it. It's honestly amazing how much I've learned and built in such a short time, leveraging Gemini 2.5 Pro as one of the most powerful LLMs out there, especially for coding (and it's free!) I hope you enjoy! ✨ Here is the written tutorial that accompanies this video; you can use it as context for an LLM to help you build your own image generator: https://wanderloots.xyz/digital-garden/tutorials/how-to-make-a-dynamic-image-generator-for-your-website-obsidian-digital-garden-example/ Note that the code for the automatic image generator is available for my paying YouTube members if you don't want to start from scratch: https://www.youtube.com/channel/UCFiU1vIpPD3lQltke_18m3A/join To learn more about the AI tools I use, check out my AI Learning Playlist: https://www.youtube.com/playlist?list=PLWhMzDKA7vJ7k0CCHAhCNGXH1BKKEo_we P.S. I greatly appreciate any feedback, please let me know what you think 😊 💌 Sign up for my [free newsletter: Recalibrating](https://paragraph.xyz/@wanderloots.eth?referrer=wanderloots.eth) 🧠 Join my [Hypersub Exclusive Membership ] (coming soon) 🏡 Wander my Digital Garden https://wanderloots.xyz 📰 Try Ground News For Research: 40% discount https://check.ground.news/wanderloots Timestamps: 00:00 Intro To Dynamic Images & AI Coding 01:15 What Are Open Graph & Dynamic Images? 02:13 Today's Outline & Goals 04:58 Phase 0: Overview Of Process (Workflows & Phases) 05:21 What Is Open Graph & Why Does It Matter? 08:21 How To Code With AI (Google AI Studio & Prompting) 11:41 Basic Automatic Image Generator Workflow 13:16 Brief Overview Of Phases 2 & 3 (Custom Image & Styling) 16:21 Phase 1: Building Basic Image Generator (Components, Tools, & Workflow) 19:09 Exploring The Code Of Basic Image Generator 24:45 Phase 2: Customizing The Open Graph Image 25:19 Prompt 1: Outline The Plan 26:57 Prompt 2: Execute The Plan 29:26 Push Code To GitHub 29:58 Testing Image Generator (With & Without Background Image) 32:12 Recap Before Phase 3 34:11 Phase 3: Custom Styling (Font, Gradient, Colours) 38:38 Merge GitHub Branch To Main & Push Live 39:02 Concluding Thoughts & Next Steps WATCH NEXT 🌱 Obsidian & Digital Gardens https://www.youtube.com/playlist?list=PLWhMzDKA7vJ7p50vW-oeZgKR2aDReZFW6 LINKS (MY WORLD) 🧭 [Recalibrating Newsletter Home](https://paragraph.xyz/@wanderloots.eth?referrer=wanderloots.eth) 🌍 My [Website](https://wanderloots.com/) 📸 My [Print Shop](https://wanderloots.darkroom.com/) ✨ SOCIALS 🟣 [Farcaster](https://warpcast.com/wanderloots.eth) 📸 [Instagram](https://www.instagram.com/_wanderloots/) 📰 [Flipboard](https://flipboard.com/@_wanderloots) 📍 [Pinterest](https://www.pinterest.ca/wanderloots/) 🤖 [Reddit](https://www.reddit.com/user/_wanderloots) MY FAVOURITE TOOLS 😴 🤯 The [Waking Up App](https://dynamic.wakingup.com/guestpass/SC4914439) (use this link for a 30 day free trial) 📝 [Obsidian](https://obsidian.md/) (decentralized note-taking) 📹 [Adobe Suite](https://prf.hn/l/lQ9DwpA) (general creativity) EQUIPMENT USED 6. Camera [Sony A7iii](https://amzn.to/3seSHv6) 7. Lens [Sony F2 28 mm](https://amzn.to/3TiWCT2) 8. Tripod [K&F Concept](https://amzn.to/3soCKCP) 9. Lighting [Ubeesize Ring Light](https://amzn.to/3GD02Zy) 10. Main Lighting Neewer 660 PRO RGB: https://amzn.to/3CEcU2V