What are you using for a blog?

General topics
6

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