search

y7kim / agency-jekyll-theme

Agency Theme for Jekyll
Apache License 2.0
886 stars 2.07k forks source link

Allow Different Clients and Services in modals.html #8

Closed shutdown23 closed 8 years ago

shutdown23 commented 9 years ago

Hi,

I am fairly new to web design and jekyll, but I am wondering if I am missing something. It looks like there is only one client with a link to start bootstrap that automatically appears for each project, even if you edit the posts markdown files. How can I customize each modal for different clients?

Thanks!

Dave

y7kim commented 9 years ago

Hey,

Thanks for using the project! I'm not sure that I follow your question but the Clients section and Services section are hardcoded in their respective html files in the _includes folder. Only portfolios items pull content from the markdown files. Let me know if you need any help, but first take a look in the _includes folder.

Rick

On Sat, Jan 31, 2015 at 10:48 PM, shutdown23 notifications@github.com wrote:

Hi,

I am fairly new to web design and jekyll, but I am wondering if I am missing something. It looks like there is only one client with a link to start bootstrap that automatically appears for each project, even if you edit the posts markdown files. How can I customize each modal for different clients?

Thanks!

Dave

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

shutdown23 commented 9 years ago

Hi,

Thanks for responding so quickly! What I am referring to specifically, is the modals.html file in the _includes folder. The data from here is pulled into the portfolio - but it seems to automatically assign the same Client, Date and Service. In your demo, they all say: Client: Start Bootstrap Date: April 2014 Service: Web Development

Does that make more sense? Sorry, I am trying to explain this as best I can.

Thanks!

Dave

y7kim commented 9 years ago

I understand. Are you changing the markdown file inside the _posts folder? It seems to be working on my end.

The markdown file for each post looks like this:

title: Dreams subtitle: Website Design layout: default modal-id: 1 date: 2014-07-18 img: dreams.png thumbnail: dreams-thumbnail.png alt: image-alt project-date: April 2014 client: Start Bootstrap category: Web Development description: Lorem ipsum dolor sit amet, usu cu alterum nominavi lobortis. At duo novum diceret. Tantas apeirian vix et, usu sanctus postulant inciderint ut, populo diceret necessitatibus in vim. Cu eum dicam feugiat noluisse.

On Sun, Feb 1, 2015 at 10:45 PM, shutdown23 notifications@github.com wrote:

Hi,

Thanks for responding so quickly! What I am referring to specifically, is the modals.html file in the _includes folder. The data from here is pulled into the portfolio - but it seems to automatically assign the same Client, Date and Service. In your demo, they all say: Client: Start Bootstrap Date: April 2014 Service: Web Development

  • and I dont see how to change the client, date, and service, to match each individual project. I look at the posts, and I can edit the client, date, and service, but it still links to the one coded in modals.html.

Does that make more sense? Sorry, I am trying to explain this as best I can.

Thanks!

Dave

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

shutdown23 commented 9 years ago

Yes, but when I change the markdown file, it doesnt change the hyperlink to start bootstrap website which is coded in modals.html

Date: Sun, 1 Feb 2015 20:45:52 -0800 From: notifications@github.com To: agency-jekyll-theme@noreply.github.com CC: grant.david@live.com Subject: Re: [agency-jekyll-theme] Allow Different Clients and Services in modals.html (#8)

I understand. Are you changing the markdown file inside the _posts

folder? It seems to be working on my end.

The markdown file for each post looks like this:

title: Dreams

subtitle: Website Design

layout: default

modal-id: 1

date: 2014-07-18

img: dreams.png

thumbnail: dreams-thumbnail.png

alt: image-alt

project-date: April 2014

client: Start Bootstrap

category: Web Development

description: Lorem ipsum dolor sit amet, usu cu alterum nominavi

lobortis. At duo novum diceret. Tantas apeirian vix et, usu sanctus

postulant inciderint ut, populo diceret necessitatibus in vim. Cu eum

dicam feugiat noluisse.

On Sun, Feb 1, 2015 at 10:45 PM, shutdown23 notifications@github.com

wrote:

Hi,

Thanks for responding so quickly! What I am referring to specifically, is

the modals.html file in the _includes folder. The data from here is pulled

into the portfolio - but it seems to automatically assign the same Client,

Date and Service. In your demo, they all say:

Client: Start Bootstrap Date: April 2014 Service: Web Development

  • and I dont see how to change the client, date, and service, to match

    each individual project. I look at the posts, and I can edit the client,

    date, and service, but it still links to the one coded in modals.html.

Does that make more sense? Sorry, I am trying to explain this as best I

can.

Thanks!

Dave

—

Reply to this email directly or view it on GitHub

https://github.com/y7kim/agency-jekyll-theme/issues/8#issuecomment-72402891

.

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

                  =
y7kim commented 9 years ago

Okay, now I understand. I see that the links are all hard-coded inside modals.html. So what you want to do is add some new fields to each markdown file - I've added the fields 'projecturl' and 'clienturl' as below:

title: Dreams
subtitle: Website Design
layout: default
modal-id: 1
date: 2014-07-18
img: dreams.png
thumbnail: dreams-thumbnail.png
alt: image-alt
project-date: April 2014
client: Start Bootstrap

clienturl: http://y7kim.github.io
projecturl: http://y7kim.github.io/cool-project

category: Web Development
description: Lorem ipsum dolor sit amet, usu cu alterum nominavi lobortis. At duo novum diceret. Tantas apeirian vix et, usu sanctus postulant inciderint ut, populo diceret necessitatibus in vim. Cu eum dicam feugiat noluisse.

Then you want to edit _includes/_modals.html like this:

 <!-- Portfolio Modals -->
 {% for post in site.posts %}
    <div class="portfolio-modal modal fade" id="portfolioModal{{ post.modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <h2>{{ post.title }}</h2>
                            <hr class="star-primary">
                            <a href="{{ post.projecturl }}" target="_blank"><img src="img/portfolio/{{ post.img }}" class="img-responsive img-centered" alt="{{ post.alt }}"></a>
                            <p>{{ post.description }}</p>
                            <ul class="list-inline item-details">
                                <li>Client:
                                    <strong><a href="{{ post.clienturl }}" target="_blank">{{ post.client }}</a>
                                    </strong>
                                </li>
                                <li>Date:
                                    <strong><a>{{ post.project-date }}</a>
                                    </strong>
                                </li>
                                <li>Service:
                                    <strong><a>{{ post.category }}</a>
                                    </strong>
                                </li>
                            </ul>
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

That will use projecturl and clienturl from the posts in your modals. As you can see, you can specify any arbitrary values like that in your markdown file, and use them using the curly braces.