Images to represent lessons on table of contents page

[acrymble]

Allison did a really great mockup of what we could do to represent our lessons visually:

https://dl.dropboxusercontent.com/u/58260988/PHDesign.png

We discussed this and really like the idea, but we wanted to ensure the Author names were kept, as were the blurbs about each section. We also thought some good historic images / lithographs would make a better set of images. Allison is going to take this on for next meeting.

[wcaleb]

Nice!

[wcaleb]

I need to mock up the HTML to see if we can represent the new layout that @ahegel designed, including CSS declarations to try to tint the images.

https://dl.dropboxusercontent.com/u/58260988/PHDesign3.png

[ahegel]

I apologize for missing today's call - I added it to my calendar in the wrong time zone! I have all of the images edited to a consistent (300x300 pixel) size and grayscale, and I wanted to ask if we'd decided on a location and organization scheme before I add them all into the images folder? Currently they're all named by the corresponding lesson's URL slug. Also, should I add the original (larger and colored) images somewhere as well? If so, what naming scheme should I use for them?

[wcaleb]

We talked about putting them in a separate directory (in the root directory) just for those images, perhaps gallery. I don't think we need to put the larger, colored images in the repo, though they would be good to hang on to. If you were going to put them in repo, maybe in a subdirectory of gallery called originals?

[ahegel]

I attempted to do what you suggested and create a "gallery" folder with the 300x300 pixel images, as well as the full-size images in a subdirectory called "originals." Since this is my first time doing this in GitHub, I apologize if I messed anything up!

[wcaleb]

Looks good to me! Thanks!

W. Caleb McDaniel Assistant Professor of History Rice University http://wcm1.web.rice.edu

On Wed, Dec 17, 2014 at 07:11:57AM -0800, ahegel wrote:

I attempted to do what you suggested and create a "gallery" folder with the 300x300 pixel images, as well as the full-size images in a subdirectory called "originals." Since this is my first time doing this in GitHub, I apologize if I messed anything up!

---

Reply to this email directly or view it on GitHub: https://github.com/programminghistorian/jekyll/issues/52#issuecomment-67335635

[acrymble]

This seems to have stalled. All we need to go live with this is a redesigned lessons page, no? Is anyone able to help Allison with this?

[wcaleb]

I could use some professional help on this … paging @clioweb.

[ahegel]

I started playing around with the page design on my own site, but I don't know enough about the Github workflow to know how to make a development branch or whatever the correct process is to test out the design before making it go live. Sorry to hold us up!

[wcaleb]

@ahegel If you have Jekyll installed on your machine, and you have cloned this repo to your machine, then you can navigate to the top-level directory of this repo and do the command jekyll build. Jekyll will then build the site and put all the HTML in the _site directory. You can open your new ../lessons/index.html file from there and see how it looks in a browser.

I started playing around with this some, but what I thought would work (which is basically to drop in the HTML and CSS code I used to make my splash page for Digital History Methods didn't work after a few minutes fiddling; the icons stacked on top of each other. If you want to work together on this, you could "fork" this repo to your account, push your new design to that forked version of the repo, and then I can clone it on my machine too and help out if needed.

Happy to Skype or explain any of this further if needed! Thanks for your work on this!

[ahegel]

I have a lesson page that works on my machine! It's currently up on my forked version of the repo. Here are two screenshots of what it looks like. @wcaleb, do you want to check it out and see if everything's working properly?

I had to change the _config.yml file so that the CSS would show up in my browser, so we'll have to change that back at some point (I changed http://programminghistorian.org to http://localhost:4000). I also used HTML for my design of the lessons page, since I'm not familiar enough with Markdown to do anything fancy with it - I'm not sure if that's bad practice, but it seems to work fine. Let me know if that's not okay. Finally, I left the final section ("Introduction to Python") alone for now since it has that entry on Mac/Linux/Windows that I wasn't sure how to deal with design-wise. Any ideas?

I hope this is helpful! I certainly learned a lot in the process.

[wcaleb]

@ahegel This looks great!

You're right that HTML styling was necessary for this; there's not a straightforward way to do it all in Markdown.

One suggestion: instead of creating a separate folder of 200x200 images in gallery, I'd suggest making all your img src lines point to images in gallery. Then, you can add a line in the CSS declaration for these images that controls sizing:

ul.lesson-images li a img {
   box-shadow: 0 0 5px #ddd;
   width: 200px;
}

This is preferable because now, if we ever want to change the sizing, we can change it in one place. And we don't have to host and create multiple sizes of all our images. We can just maintain one folder of originals and one gallery folder.

[ahegel]

Thanks @wcaleb! That makes sense, I'll make those changes today. Just wondering - does it make a noticeable difference in loading time to have users load the larger images and then resize them smaller? Is that one of the things that using a static site helps with?

[wcaleb]

I don't think it will cause a load time issue with images this small. You're right it could if the originals were huge, regardless of whether it's a static site or not.

I think you have edit privileges on this repo, so just drop the new code into the relevant files when you are ready.

Sent from my iPhone

On Mar 12, 2015, at 12:21 PM, Allison Hegel notifications@github.com wrote:

Thanks @wcaleb! That makes sense, I'll make those changes today. Just wondering - does it make a noticeable difference in loading time to have users load the larger images and then resize them smaller? Is that one of the things that using a static site helps with?

— Reply to this email directly or view it on GitHub.

[ahegel]

The changes are up on the site! Remaining issues:

• The font was originally sans-serif for the lesson titles, now it's the serif header font - should we change it back?
• Should we come up with a way to style the last section, Introduction to Python, or should we leave it as a list? It has a difficult-to-deal-with multi-lesson link to Mac/Linux/Windows versions of the lesson.
• Any other concerns?

[wcaleb]

Looks great! We can raise the styling issues on the next Skype meeting; I think it looks fine for now. We may ultimately want to make those titles styled "paragraphs" (using a CSS class) instead of headers (which are usually reserved for page structure elements). Thanks for your work on this!

[fredgibbs]

yes, this is fantastic! what a huge improvement. i agree we need to futz with the styling a bit and perhaps adjust the spacing, but that's something we can work out over time. thanks @ahegel!

[acrymble]

Obviously my page was cached so I didn't notice until now, but these are wicked! thanks for this @ahegel