Since I created this blog, I've always set my sights in the end goal: have an awesome space for thousands of Ghost fans to learn and improve their own blogs, with many people adding knowledge and resources.
This, of course, means to have the ability to let others "guest post" in the platform. I like the way Ghost treats contributors as some sort of admin, so having random people from around the world going into your dashboard is a major no.
Having this in mind, i wanted to develop and easy and cool way to still do this. My answer is simple: give attribution to the author with a fancy card template :).
If you have this "existing card", is just changing the name and the photo. Today is Karen? No problem, there's a card for you. Every time Karen sends a post to me via mail, I just post her card at the end. Tomorrow is Mario? Another card for you buddy then.
Now, this "card" needs two steps to be prepared: the image source and the code for the design/details.
1. How to load the guest image into the author card
For this, I use Google Drive as a type of CDN, taking the advantage that it's free.
In order to do this, do the following steps:
- If you don't have a Google Drive account, then create one. Its free!
- Go to your Drive account, and create a folder called CDN.
3. After creating it, go and right click on it. Click Share. A Dialog Box will appear. Click on Advance (Another Dialog Box will Appear).
4. Click on Change in front of Private – Only you can access (Another Dialog Box will Appear).
5. Select First Option On-Public on the web and hit Save Button.
Now your new folder is a CDN folder and its accessible without login.
Next: upload the images you want to use to your CDN folder. I like to show the profile picture of my guest authors, so they'll be here.
To truly use the files out of google Drive as CDN, you need the "File ID" of each file and a "special code". To Find that ID just right click on a selected file in your shared folder (in this case, the profile picture) and click on Share (a dialog Box will Appear).
You see that code? That's your File ID. Copy it.
The "special code" you need is this:
Were XxXxxxXxxxx is your File ID.
Now take your File ID and paste it in your "special code", and have it ready to paste it in your "guest post card snippet".
2. Use the author card in Ghost
The author card is a HTML/CSS code snippet that will contain the desired design of your card, and will serve the purpose of showing in a fancy way your guest author.
For the complete code (so you don't need to do a thing), just go to this post I did about it:
Copy the code, and paste it in a HTML card in the Ghost editor. Then go to the body of the code, and in background-image, paste your special code:
<body> <div class="section-guest-post-author guest-post-author flex guest-post-author-iso first"> <div class="author-wrap flex"> <div class="author-profile-image" style="background-image: url(https://drive.google.com/uc?export=view&id=1qGbG9SBOBfg9cqGCzWVGJHTSPgPJ20LY)"></div> <div class="author-content"> <h4 class="is-bio no-cover-image">LeBron James</h4> <p>I love basketball, and i'm still the King. Lakers player, dad, husband. Just a kid from Akron. #JamesGang</p> </div> </div> </div> </body>
3. Create a Guest user
In order to complete the guest post, it would be best to use a generic "Guest User" as the system author. In my case, I just modified the Ghost user as the Guest user, and that's what will show up.
And that's it! You now have a working Guest Author Card! For the example, I used LeBron James as a guest, to show you the possibilities (he's my friend also).
Side note: some people asked about editing the info on the card. Although it seems self explanatory, just see that the info to change is in the body. The name is between the h4 tags, and the "bio" is on the paragraph. Change accordingly!
Look at the live example here:
If your theme already has an author card, then my advice to you will be to remove it in the guest post, using code injection.
I hope this post is helpful to you. Are you planning to do this? What are your thoughts? Let me know in the comments section!