Compressing a blog into a preview using tumblr_api_read

Posted on

Problem

Here is what I have currently working. I would like to make it look more aesthetically pleasing, so not finish words in mid word. Also not have the two previews be so much larger than the other.

Ideally there would be a preview of two on the right (shorter) and then the one on the left (most recent) would show as much needed to make it equivalent height / length as the two on the right.

<script type="text/javascript" src="http://blog.awesomeinc.org/api/read/json/"></script>
        <!-- FUNCTION FOR BLOG POSTS -->
            <script type="text/javascript">
            function compressBlog(post, length) {
                    var count = length-100;
                    var blogContent = tumblr_api_read["posts"][post]["regular-body"].substring(0, length);
                    for (var i = length - 100; i <= length; i++) {
                        if (blogContent[i] == "<") {
                            break;
                        }
                        count++;
                    };
                    var blogPreview = tumblr_api_read["posts"][post]["regular-body"].substring(0, count);
                    return blogPreview;
                }

                function blogTitle(post) {
                    var title = tumblr_api_read["posts"][post]["regular-title"];
                    return title;
                }

                function blogLink(post) {
                    var link = 'http://blog.awesomeinc.org/post/' + tumblr_api_read["posts"][post]["id"]+ "'";
                    return link;
                }

            </script> 
    <div class="col-xs-6">
        <div id="blog-post"> <!-- BLOG POST 1 -->
            <h2 id="blog-title"><a href="#" target="_blank" id="blogLinkTitle"></a> </h2>
            <p id="blogContent"></p> 
            <a href="#" target="_blank" id="blogLink">...Read More</a>
            <script type="text/javascript">
                var blogLength = 750;
                var postIndex = 0;

                // blog title
                document.getElementById("blogLinkTitle").innerHTML = blogTitle(postIndex);
                document.getElementById("blogLinkTitle").href = blogLink(postIndex);
                // blog body
                document.getElementById("blogContent").innerHTML = compressBlog(postIndex, blogLength);
                // read more link
                document.getElementById("blogLink").href = blogLink(postIndex);
            </script>
        </div>

        <h3> <!-- SIGN UP BUTTON -->
            <a type="button" class="smoothScroll btn btn-danger btn-large view-blog" href="http://blog.awesomeinc.org" target="_blank">View blog</a>    
        </h3>
    </div>

    <div class="col-xs-6">
        <div id="blog-post"> <!-- BLOG POST 2 -->
            <h2 id="blogTitle2"><a href="#" target="_blank" id="blogLinkTitle2"></a> </h2>
            <p id="blogContent2"></p> 
            <a href="#" target="_blank" id="blogLink2">...Read More</a>
            <script type="text/javascript">
                var blogLength = 500;
                var postIndex = 1;

                // blog title
                document.getElementById("blogLinkTitle2").innerHTML = blogTitle(postIndex);
                document.getElementById("blogLinkTitle2").href = blogLink(postIndex);
                // blog body
                document.getElementById("blogContent2").innerHTML = compressBlog(postIndex, blogLength);
                // read more link
                document.getElementById("blogLink2").href = blogLink(postIndex);
            </script>
        </div>

        <div id="blog-post"> <!-- BLOG POST 3 -->
            <h2 id="blogTitle3"><a href="#" target="_blank" id="blogLinkTitle3"></a> </h2>
            <p id="blogContent3"></p> 
            <a href="#" target="_blank" id="blogLink3">...Read More</a>
            <script type="text/javascript">
                var blogLength = 500;
                var postIndex = 2;

                // blog title
                document.getElementById("blogLinkTitle3").innerHTML = blogTitle(postIndex);
                document.getElementById("blogLinkTitle3").href = blogLink(postIndex);
                // blog body
                document.getElementById("blogContent3").innerHTML = compressBlog(postIndex, blogLength);
                // read more link
                document.getElementById("blogLink3").href = blogLink(postIndex);
            </script>

Solution

Leave a Reply

Your email address will not be published. Required fields are marked *