Post Summary and Thumbnail with Javascript

I've known for a long time that my next blog design would have truncated posts. Post truncation was not well welcomed when it started being a bit more common on popular blogs, but I always thought that the reasons for truncated posts was absolutely valid and beneficial, and I still do! When I started looking into this and I realized that the real way to truncate posts was to go back to every single post and insert the jump break. 1) That did not seem like a fun time to me, 2) it did not look the way I wanted it to look. I imagined there would be an other way to do this, to automate it, and make it look like I wanted.

I started looking for how to do it with blogger, but the only thing I found was the jump break method. So I started to look for blogs that had what I wanted. I found the blog Megan Brooke Handmade Blog that had a post on truncated posts and that's when I saw what I wanted:



The hiccup? These post thumbanils and summaries, as they are called, were generated from a wordpress template/ theme/ childtheme: Genesis. So I couldn't exactly see how they were generated. But that gave me a new search term: post summary with thumbnail. At the same time as I figured this out, I was also browsing through XO Misse's blog and found the exact post that was useful for this! But the original Javascript is from here.

I also found this tutorial for an updated and more customizable script version, but I could not make it work properly, and in the end was not more customizable for me so I stuck to the original script. The problem I had with the custom version was that the read more link would not lead to the full post, even if it was the permalink (ie item page) and I had put the script between conditionnal if tags for index type pages only.

I did change a few things from the original script, even if I am very unfamiliar with Javascript, since I recognized some patterns with CSS.
- Changed the float of the image to right
- Adjusted the size of the image
- Adjusted the length of the summary
- Changed the text link to Continue Reading... and removed the title of the posst from this line/link
- Changed the float of the Continue Reading link to left, and adjusted the padding; I also moved the style line in the body section to the CSS section for easier stylability



One thing that I cannot figure out how to do or even if I CAN do it is to have the images generated by the script to be responsive, as in have the width of the image be a percentage of the width of the container. I can only put a fixed width, which will also stretch smaller images to be that size, which is annoying. I don't think that will be an issue with the real blog as I think my images will all be bigger than that anyway.



I did try putting a % in the place of the px value. If I put 100%, then the image would not be resized and appear it's true size. Good for small images as they were now actually small and not stretched(above), but the other images were displaying too big. If I put say 50%, the images were 50% of their original size, but the remainder 50% was just white space, as in the text would not be able to fill up the space not taken up by the image, so this tactic was useless. And I'm back to square one. If anyone know how to go around that I would love to know!!


With image width set to 100%


With image width set to 50%

So for now I'm leaving it like this: fixed image width of 300, height of 250. At least it keeps things proportionnal, I think it uses the width if a landscape image, and the height if a portrait image, but I have yet to test that theory.


I'll probably have to adjust these values once on my the real blog, so that it looks good.

Continue Reading...

Post Date and Title

For a long time I knew I wanted the date to be displayed calendar style, as in month, day and year all one on top of the other. So I found this tutorial to help me achieve that look. Only thing is I had some trouble understanding it and getting it to work, so I tried an other one of her tutorials with a very similar effect (just doesn't look like a calendar) and this one worked better with less tweaking and was easier to understand. Here are the changes I did to that particular code.



- changed the color of the circle and added a radial gradiant (though it doesn't show much because there isn't enough of a color difference between my 2 colors)
- moved the date header less to the left until it looked good. I find it strange that it disappears if it goes beyond the main container though, but at the same time I do like the effect it gives to have it slightly cut off.
- removed the letter-spacing between the letters of the month and year, it just made it look very odd
- made the year slightly smaller than the month, since it's 4 letters compared to 3 for the month
- moved the whole date up a bit with negative margins so it would look right (before it looked like there was too much space above the month, and too little below the year)
- changed the color of the text to white for all
- changed the font to the same as the post font



I really like the effect of the box shadow being wider than the white border and showing beyond it. Would not have thought to do that. Might use that elsewhere in my design now.

I also changed a few things about the post title:

- post body clear both so post text would appear below the date and not next to it; also this will prevent the title text to overlap the body text if ever the post title is really long, some blogs need to add this bit of code as I've noticed they have this problem which is more noticable on a phone
- moved the post h2 (aka title) so it would be almost lined up vertically with the center of the date circle using padding, and so it would clear the circle, too.

I'm not sure how, or where the code is, but if there are 2 posts on the same date, then the older post, or the one lower on the page, does not have the date next to the title. Nonetheless, it looks just fine.



Part of me want to delineate the title a bit more than this. So I tried putting a shadow-line below it, but I'm not quite sure if I like it... Also it might look weird if I add something below it (like labels, author, comment links). I'm keeping this option in my head, but for now I'm removing it.


PS this screencap was taken before I changed the font face of the date.

Now before I get too ahead of myself, I'm going to look into having a thumbnail and post summary of each blog post on the main page/ index pages (I know, you already got a glimpse of it in here, but it was not working correctly). This will change things considerably for how I want the rest to look.

Continue Reading...