Help with Integration (PictureFill, bower etc.)

[nickdex]

Hey,

First of all, thanks a ton for such an awesome theme. It is my first time doing front-end work and this was perfect for my needs.

1. You suggested that we should use PictureFill plugin for serving responsive images. For now I just included js file in and it is working, but can it be used with native elements in theme?

Entry-Image

Entry-Image-Index

I want .entry-image (feature image for post) to show images like .entry-image-index (feature image of post in index page). It scales image to fit which I would like to avoid (both guys have their head cut off). It would be awesome if I could choose between having fixed height and responsive height, but just having responsive height is also fine.

2. Can I use bower components with theme? If yes, I would be grateful for some pointers (I want to add a carousel in which content cycles on it own, eg Flexslider).

3. It was also suggested to use grunt to manually build scripts, css and images; before pushing to github pages. I followed the steps from the grunt site and on 'grunt' in CLI, it completes with no errors. So thats all I have to do for my images? Any more tips regarding this?

Like I said, I'm just starting out in this field so please forgive my unintended noobness :sweat_smile:

[mmistakes]

Since your questions are geared more towards modern front-end dev tools and topics I'd suggest you seek out tutorials and blog posts about each. They've all been covered in way more detail and authority than I can provide.

But here are a few pointers to get you started.

1. I've covered this one a few times now so take a look through the closed issues for more context #156 #142. Basically what's going on is the feature image is in a div .entry-header that has some CSS to fix the height and hide anything that overflows out of the container. That's why you're seeing the heads cut off. Adjust the CSS on that and you can modify how it looks to match what you want.

As far as making it more responsive. Picturefill is just a polyfill to support the<picture> and srcset for browsers that don't. Unless you're doing art directed images <picture> is overkill as it can be more verbose than using img srcset.

If you're looking for a way to automate resizing and inserting the necessary responsive img markup take a look at my Made Mistakes project. I'm using a Jekyll plugin to do it and feed my feature image through some Liquid. It's using the <picture> element which I don't really care for but it gets the job done.

There are also other plugins that do similar things along with some Grunt and Gulp tasks if you prefer to go that route.

2. Yes. Jekyll sites are for the most part just HTML/CSS/JS which is why I enjoy working with them. It makes using whatever modern tools and workflows you want much easier. I know of Bower but have zero experience setting it up or using it in my projects. If you take the time to configure it and organize components and their assets it shouldn't be a big deal to add. You'll probably have to replumb a few things and were assets are currently stored but that's to be expect.

I'd suggest searching for what others have done to see how they set it up and then apply to your project. NPM is an option too for managing components. It's really a matter of preference.

3. The Grunt task I've configured for the theme just optimizes your images. There's a lot more you if you want. I included the basic of the basic but it really comes down to what you hope to achieve and then configure to match that.

[nickdex]

Thank you for the prompt reply. I want to keep the project as free of dependencies as possible while automating menial tasks and for that the Jekyll plugin looks good enough. The article that you shared is very helpful and I can't thank you enough for that, I imagine anyone who is just diving into Jekyll would feel the same.

One last thing I wanted to ask is that, would you consider making themes in Hugo? Its been marketed as easier to use than Jekyll and load times being off the charts.

[mmistakes]

I won't say never but probably not anytime soon as it would be a diversion. I'm putting most of my energy in maintaining just one theme now and not really interested in other static site generators.

A few of my themes have been ported but I can't remember if Hugo was one of them. Could have been Grav but I honestly don't remember. I get so many oddball requests it's hard to keep everything straight :stuck_out_tongue:.