Replace static img: in "Posts" with other content?
Closed this issue · 8 comments
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
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!
Thank you so much for the quick response. I'll give this a try. Amazing template, learning so much!
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
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!
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!
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
#7 (comment)
.
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
#7 (comment)
.
Jeremy Leaird-Koch - http://about.me/jeremylk
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
<.
—
Reply to this email directly or view it on GitHub
<
#7 (comment).
Jeremy Leaird-Koch - http://about.me/jeremylk
—
Reply to this email directly or view it on GitHub
#7 (comment)
.