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.

Suggestion: if you dont want to have a profile picture, just avoid the first step.

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:

  1. If you don't have a Google Drive account, then create one. Its free!
  2. 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.

CDN: A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.

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:

https://drive.google.com/uc?export=view&id=XxXxxxXxxxxX

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:

Round corners Author Card for Ghost
Do you want to use a Guest Author card for your guest post ideas? Here i provide you with the code to do 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>
For members: I'll do another post about some different design ideas I have for Guest Author Cards. If you are NOT a member, i suggest you to do it!

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:

Guest Post Example in Ghost
LeBron James I love basketball, and i’m still the King. Lakers player, dad, husband. Just a kid from Akron. #JamesGang
Problem: if you are using a firewall that blocks cloud services such as Google Drive, then the image will not be able to load. Just have that in mind.

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!