How to Create a Weekly Photo Zine
It’s no secret that AI has revolutionized the tech space, and we’ve already seen some incredible things made with it. ChatGPT was one that immediately proved valuable to everyday people, being capable of answering any kind of question, have an ongoing conversation, and do things you never could before. Beyond that, AI is quickly becoming a tool to democratize the creation of web content.
Typically, if you want a custom web experience you would either need to hire a professional agency, perhaps get half way with a website builder, or learn to code yourself. But, that may not be the case soon. With AI the average person can ask the right questions and create elementary web content for their brand. In this guide, I’ll show you how to create a simple photo zine using ChatGPT and Pinata and how to update it on a weekly basis.
First, you’ll want to sign up for an account with Pinata. I would recommend choosing the Picnic plan for this project as we will utilize its speed and flexibility for hosting our content. Once you have an account, you’ll want to start uploading all your images to be used for the zine. In this demo I’ve selected some of my favorite images from a trip I took a few years ago.
Once you have your content uploaded, you can click on the preview button to see your photo. Copy the URL for that image and paste it somewhere for later and repeat the process for however much content you want to put in your zine.
After you have done this it’s time to visit ChatGPT. I would recommend starting with a prompt that tells ChatGPT who it is and what it will help you with, and ask if it has any questions. This will help set you up to make sure you have all the ground covered. Here is an example of what I said to start:
You are a mobile web developer. You have complete understanding of being able to promptChatGPT. You will guide me through building a webpage. What questions do you have?
It will respond with several questions, so simply provide the answers like you see below.
Below my last answer I went ahead and gave ChatGPT the content of text and image links, and just like that it generated the html content to start with. If it doesn’t finish generating all the code at once, you can click “continue generating” and it will keep going where it left off. Also be sure it includes all your content, make sure it knows you have zero programming knowledge and it needs to write everything on its own. Once it does this there should be a copy button at the top of the code box, so go ahead and click that:
Now to actually paste our code and see what it does, we will be using an online code editor called Replit. Just sign up for a free account, and in the top right corner you will want to click “Create Repl.”
After that you will want to select the HTML, CSS, and Javascript template and give your project a name.
Once you’re in your repl project, delete out the starter HTML and paste in your own code from ChatGPT, then hit CMD/CTR + S to save it. After that you should see on the right side your project:
You can also change the size of your webview by clicking and dragging the pane to shrink it more towards a mobile view if that’s what you’re after.
Now your project will likely not be perfect right out of the gate, and you will want to make some changes. Since ChatGPT keeps that conversation history, you can go back and forth with it for the changes you want.
The key is to make sure you are precise in what changes you want, and that ChatGPT gives you the updated code afterwards. Once you’ve gotten your zine looking the way you want it, click on the little dropdown arrow next to the index.html file and click “Download.”
After you have download the file, go ahead and upload it to Pinata just like you did for your image files. Then just click on that file to see your zine. You can view mine with this link.
Now here’s the bonus info: if you wanted to make this a weekly update, Pinata provides a pretty neat way to do that. First you would of course need to give ChatGPT your code and the update content and it could swap it out for you (or you could even take your hand at changing it in Replit!), and once you have uploaded the new index.html to Pinata, you can click on the “more” button next to the file and select “Set gateway as a root”
What this will do is redirect my base url “https://stevedylanphoto.mypinata.cloud” to the new index.html file that was uploaded. I could keep updating it with each new file every week with a new photo zine, as well as improve it over time. Of course if you don’t like the “mypinata.cloud” domain for your zine, you could very easily use your own domain like “stevephotozine.com” and it would work exactly the same. My personal photography website is stevedylanphoto.com, so I just used “zine.stevedylanphoto.com” as a dedicated domain for this zine. Check it out:
Zine link https://zine.stevedylanphoto.com/
We’re excited to see what you’ll make using these tools.
Pinata Links:
H1 - THE RICH TEXT
EXAMPLE STARTS HERE
H2 - Enabling Widespread Adoption for Music NFTs
paragraph — The first thing the music industry needs is more exposure. For artists, listeners and yeah, the labels. Even with the use cases mentioned above, the majority of the music industry still sees NFTs as a novelty rather than a legitimate way to run a business. We see a future where the experience is built and monetized on the blockchain, with labels taking part of the experience, as well.
Second, there needs to be a big jump in user experience. Listeners know what to expect with Spotify and Apple Music: a smooth, intuitive experience that lets them listen to Lil Nas X with just a few clicks. Web3 platforms aren’t quite there. Music NFTs and related premium content require extra steps that most people don’t yet have an appetite for.
H3 - How Could Music NFTs Save Artists?
paragraph — Musician Daniel Allan spent months building a relationship with the NFT community and raised 50 ETH to fund his new album, Overstimulated. Companies like Audius and artists like Vérité's, who raised $90,000 in an NFT launch, are at the forefront of exploring new ways to get paid. Avenged Sevenfold launched an NFT collection called "Deathbats Club" with 10,000 items that grants holders access to benefits such as meet and greets at shows, lifetime free tickets, limited edition merchandise, and more.
H4 - Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
H5 — How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
LINK — This is how a link looks like. Please provide normal & hover state (if different than this)
- This will be bullet points
- Numbered list is the same but with numbers
- It has a margin-left applied
- Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
- Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
- Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
QUOTE — Everyone is obsessed with making money and seeking alpha, which does a disservice to what [NFTs] can actually do. We have been instructing many bands that NFTs are a ticket for access to an exclusive club.” - M. Shadows, Avenged Sevenfold’s lead singer.
