Just wondering what everyone is using as an add-on blog should a client request one?
1 Like
Medium is the best option
2 Likes
I think we need to make a feature request ha ha!!
4 Likes
Sadly external stand-alone solution (wordpress in my case).
After years with Wordpress I switched to Ghost, Hugo Eleventy and Gatsby is an option also.
Hi @antony_northcutt you could always create a blog using something like Medium and embed the RSS feed on your Readymag project using an RSS to JSON API.
The feed would take you to the blog externally but it would give you the overall blog feed that you can embed on your project and would update automatically. I’ve attached a link to a test project along with the code — I hope this is solution to your question.
I’ve marked up some of the different bits in the script but adjusting the styling. To adjust the number of posts displayed in the feed, see the ‘RETURN K’ at the end of script that controls the number of posts displayed so adjust this to make it fit your project page.
There are ways to show this blog in columns but this is just the basics to get it working!
<section id="blog" class="section blog">
<div class="container">
<div id="blogContent" class="section-content">
<div id="jsonContent" class="row"></div>
</div>
<!-- /#blogContent-->
</div>
<!-- /.container-->
</section>
<!-- Blog-->
<style>
.blog {
padding: 20px;
font-family: courier, monospace;
font-size: 12px;
}
.blog .blog-post {
margin-bottom: 100px;
width: 100%;
}
.blog .blog-post .blog-element {
overflow: hidden;
}
.blog .blog-post .blog-element .img-responsive {
width: 100%;
}
.blog .blog-post .blog-content h3 {
color: black;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.continue {
margin-top: 30px;
}
.continue a {
border: 1px solid black;
padding: 10px;
background: 0;
color: black;
text-decoration: none;
}
.continue a:hover {
text-decoration: underline;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
var $content = $('#jsonContent');
var data = {
rss_url: 'https://medium.com/feed/@readymag'
};
$.get('https://api.rss2json.com/v1/api.json', data, function(response) {
if (response.status == 'ok') {
var output = '';
var posts = $.map(response.items, function(post, i) {
var postCategories = response.items[i].categories
if (postCategories.length !== 0) {
return post;
}
});
$.each(response.items, function(k, item) {
var visibleSm;
if (k < 12) {
visibleSm = '';
} else {
visibleSm = ' visible-sm';
}
output += '<div "' + visibleSm + '">';
output += '<div class="blog-post"><div>';
// output += '<h4 class="date">' + $.format.date(item.pubDate, "dd<br>MMM") + "</h4>";
var tagIndex = item.description.indexOf('<img'); // Find where the img tag starts
var srcIndex = item.description.substring(tagIndex).indexOf('src=') + tagIndex; // Find where the src attribute starts
var srcStart = srcIndex + 5; // Find where the actual image URL starts; 5 for the length of 'src="'
var srcEnd = item.description.substring(srcStart).indexOf('"') + srcStart; // Find where the URL ends
var src = item.description.substring(srcStart, srcEnd); // Extract just the URL
output += '<div class="blog-element"><img class="img-responsive" src="' + src + '"></div></div>'; //IMAGE
output += '<div class="blog-content"><h3>' + item.title + '</h3>'; // TITLE
output += '<div class="post-meta"><span>By ' + item.author + '</span></div>'; // AUTHOR
var yourString = item.description.replace(/<img[^>]*>/g, ""); //replace with your string.
var maxLength = 120 // maximum number of characters to extract
var trimmedString = yourString.substr(0, maxLength); //trim the string to the maximum length
trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" "))) //re-trim if we are in the middle of a word
output += '<p>' + trimmedString + '...</p>';
output += '<p class="continue"><a href="' + item.link + '" target="_blank"> Continue Reading </a></p>'; // CONTINUE READING TEXT
output += '</div></div></div>';
return k < 5; // RETURN NUMBER OF BLOGS CHANGE THIS NUMBER TO MAKE IT FIT YOUR PROJECT PAGE LENGTH
});
$content.html(output);
}
});
});
</script>
6 Likes
Oh wow this is amazing. Thank you so much for taking the time on this. I think I will go down this path where the client is not so much worried about SEO but just providing content for their site users.
I’m thinking that RM + blog for SEO isn’t a good mix right now? Unless one exports the code and manually adds a blog.
Thanks again!!
1 Like
I once set up a blog with the flat-file-cms grav.
Its free, fast and you dont have to deal with sql databasestuff.
I then implemented it into a 100%wide/height centerfixed iframe on the RM project.
This worked quite good but there for sure is some work to do on the gravsite to fit the blog onto the RM styling of your page. But its basic css work, allthough a bit confusing to dig through it and find the right values.
2 Likes
Nice will check this out!
Hi all. I just wanted to see if anybody has found any newer options for blogging since this topic was created?.. Seeing that RM blog migrated from Medium to something else, makes me wonder 1. What is RM using for blogging now? (I can’t figure out) 2. Will RM introduce something for creating blogs anytime soon? I appreciated any feedback. Thanks!
From looking at the code, it sure seems like the blog is hosted by RM. I would love to have the tagging/sorting feature on my RM site. From what I can tell, that’s not an option, but I’m new to RM and hopefully I’m wrong. In any case, +1 for RM blog capability.