search

y7kim / agency-jekyll-theme

Agency Theme for Jekyll
Apache License 2.0
879 stars 2.05k forks source link

Replace static img: in "Posts" with other content? #7

Closed jjbbllkk closed 8 years ago

jjbbllkk commented 9 years ago

Hi there,

Super new to CSS / Ruby / etc, so sorry if this is a dumb question.

I'm working on a video / audio-centric portfolio site using this template for Jekyll. I would like to be able to use a video or audio embed on the portfolio posts instead of a static image. In the code for the page you have :

img: dreams.png thumbnail: dreams-thumbnail.png

How would one implement, let's say, a Vimeo embed code here instead of the "img: " bit?

Thanks!

-jeremy

y7kim commented 9 years ago

Hey! First off, thanks for using the project. Secondly, it is not a dumb question.

Take a look at:

/_includes/portfolio_grid.html (line 19)

and

/_includes/modals.html (line 17)

These are the template files. As you can guess {{ post.thumbnail }} and {{ post.img }} are pulled from the markdown files inside the _posts folder.

You'll have to replace the entire line in _includes/portfolio_grid.html (line 19): 

<img src="img/portfolio/{{ post.thumbnail }}" class="img-responsive" alt="">

with something like: 

<iframe src="{{ post.video }}" class="img-responsive" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

and replace the thumbnail field in the post markdown file like this:

video: http://player.vimeo.com/video/XXXXXX

instead of

thumbnail: dreams-thumbnail.png

Hopefully that should give you enough to get started. If you have any more questions, feel free to ask. I'm at work right now so I have to be a bit brief with my explanation.

Cheers!

jjbbllkk commented 9 years ago

Thank you so much for the quick response. I'll give this a try. Amazing template, learning so much!

jjbbllkk commented 9 years ago

Rick, thanks again. Your suggestion for the video stuff worked great, and that whole section is now coming together.

If you have time and patience, I have one more question :

I'm adding html pages to this and want to make the Navbar on these pages always be in the "black with orange title and white nav components" state it becomes when you scroll down the main page a bit.

I've made copies of the CSS classes and Javascript for these sections and hacked a bit, but nothing seems to work.

Do you happen to know how to basically disable the scroll-state on the Navbar and have it always be like it is after a small downward scroll on the main page? Or force it to start in this state?

Thanks again!

-jeremy

y7kim commented 9 years ago

Sure thing - this one is pretty straightforward actually.

First you want to go to: _includes/js.html and comment out or delete line 10:

// <script src="{{ "/js/cbpAnimatedHeader.js" | prepend: site.baseurl }}"></script>

This script controls the class change of the navbar after the initial scroll.

Then in _includes/header.html, on line 2, you want to add the class 'navbar-shrink' to the navbar like so:

<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">

That should do the trick!

jjbbllkk commented 9 years ago

I am banging my head against the table in joy and stupidity. Can't believe it was that simple... thought I was going to have to dip into Scrollspy and just flail around for a week.

Thank you!

y7kim commented 9 years ago

No problem. All the best! On Feb 2, 2015 1:21 PM, "jjbbllkk" notifications@github.com wrote:

I am banging my head against the table in joy and stupidity. Can't believe it was that simple... thought I was going to have to dip into Scrollspy and just flail around for a week.

Thank you!

— Reply to this email directly or view it on GitHub https://github.com/y7kim/agency-jekyll-theme/issues/7#issuecomment-72508675 .

jjbbllkk commented 9 years ago

Rick, thanks again for all your help. I was able to push my version of Agency live over the weekend and it looks great, responds fast, and is overall just awesome. Couldn't have done it without you! Thanks!

-j

On Mon, Feb 2, 2015 at 10:25 AM, Rick K. notifications@github.com wrote:

No problem. All the best! On Feb 2, 2015 1:21 PM, "jjbbllkk" notifications@github.com wrote:

I am banging my head against the table in joy and stupidity. Can't believe it was that simple... thought I was going to have to dip into Scrollspy and just flail around for a week.

Thank you!

— Reply to this email directly or view it on GitHub < https://github.com/y7kim/agency-jekyll-theme/issues/7#issuecomment-72508675>

.

— Reply to this email directly or view it on GitHub https://github.com/y7kim/agency-jekyll-theme/issues/7#issuecomment-72509413 .

Jeremy Leaird-Koch - http://about.me/jeremylk

y7kim commented 9 years ago

Hey, no worries. I'm glad it all worked out for you. Thanks for using the project!

Rick

On Mon, Feb 9, 2015 at 11:29 AM, jjbbllkk notifications@github.com wrote:

Rick, thanks again for all your help. I was able to push my version of Agency live over the weekend and it looks great, responds fast, and is overall just awesome. Couldn't have done it without you! Thanks!

-j

On Mon, Feb 2, 2015 at 10:25 AM, Rick K. notifications@github.com wrote:

No problem. All the best! On Feb 2, 2015 1:21 PM, "jjbbllkk" notifications@github.com wrote:

I am banging my head against the table in joy and stupidity. Can't believe it was that simple... thought I was going to have to dip into Scrollspy and just flail around for a week.

Thank you!

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

https://github.com/y7kim/agency-jekyll-theme/issues/7#issuecomment-72508675

.

— Reply to this email directly or view it on GitHub < https://github.com/y7kim/agency-jekyll-theme/issues/7#issuecomment-72509413

.

Jeremy Leaird-Koch - http://about.me/jeremylk

— Reply to this email directly or view it on GitHub https://github.com/y7kim/agency-jekyll-theme/issues/7#issuecomment-73539288 .