diff options
-rw-r--r-- | README.md | 2 | ||||
-rw-r--r-- | exampleSite/config.toml | 3 | ||||
-rw-r--r-- | layouts/partials/projects.html | 24 |
3 files changed, 17 insertions, 12 deletions
@@ -89,6 +89,8 @@ Projects are ordered on the main page by `weight` first, then by `date`. The `image` will show up on the main page and in the project's details view. If you don't specify an image, the `placeholderimg` from your site's `config.toml` file will be used. +If you don't specify a `title`, only the photo will show. You can still add content to the file to "caption" the image, and this will show in the popup. (Great way to create a simple gallery!) + If you leave `external_link` empty, clicking on a project on your main page will pop up a window with the project's details. If you specify a url instead, clicking on the project on your main page will take you to that url. ## License diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 0b7826f..a7762dc 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -20,7 +20,7 @@ canonifyurls = true # Turns relative urls into a timezone = "America/Los_Angeles" # Your timezone as in the TZ* column of this list: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones dateform = "Jan 2, 2006" dateformfull = "Mon Jan 2 2006 15:04:05 EST" - cachebuster = true # Add the current unix timestamp in query string for cache busting css assets + cachebuster = false # Add the current unix timestamp in query string for cache busting css assets (relevant in development mode) description = "Website Description" # Max 160 characters show in search results faviconfile = "img/fav.ico" highlightjs = true # Syntax highlighting @@ -29,6 +29,7 @@ canonifyurls = true # Turns relative urls into a showblog = true # Show Blog section on home page showprojects = true # Show Projects section on home page + projectcolumns = "3" # Choose "2" or "3" columns for projects section placeholderimg = "/img/workday.jpg" # For Projects without image showallposts = false # Set 'true' to list all posts on home page, or set 'false' to link to separate blog list page showlatest = true # Show latest blog post summary diff --git a/layouts/partials/projects.html b/layouts/partials/projects.html index 55f9f0f..69e2857 100644 --- a/layouts/partials/projects.html +++ b/layouts/partials/projects.html @@ -5,7 +5,9 @@ <div class="section is-small"> <div class="columns is-multiline"> {{ range sort .Pages }} {{ if eq .Section "projects" }} - <div class="column is-one-third"> + {{ if eq .Site.Params.projectcolumns "2" }} + <div class="column is-half"> {{ else if eq .Site.Params.projectcolumns "3" }} + <div class="column is-one-third"> {{ end }} <!-- Hey Vicky, show half column if number is even. --> <div class="card"> <div class="card-image"> @@ -13,9 +15,9 @@ <a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ else }} - id="project{{.Title}}" + id="project{{.Title | urlize}}" {{ end }}> - <img src="{{ .Params.image | default "{{ .Params.placeholderimg }}" }}"/> + <img src="{{ if .Params.image }}{{ .Params.image }}{{ else }}{{ .Site.Params.placeholderimg }}{{ end }}"> </a> </figure> </div> @@ -23,7 +25,7 @@ <a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ else }} - id="project{{.Title}}" + id="project{{.Title | urlize}}" {{ end }}> {{ .Title }} </a> @@ -31,14 +33,14 @@ </div> </div> {{ end }} {{ end }} - </div> </div> </div> +</div> <!-- End Projects container --> <!-- Projects modals --> {{ range sort .Pages }} {{ if eq .Section "projects" }} -<div class="modal" id="modal{{.Title}}"> +<div class="modal" id="modal{{.Title | urlize}}"> <div class="modal-background"></div> <div class="modal-card"> {{ with .Title }} @@ -55,14 +57,14 @@ </section> {{ end }} </div> - <button class="modal-close is-large" aria-label="close" id="close{{.Title}}"></button> + <button class="modal-close is-large" aria-label="close" id="close{{.Title | urlize}}"></button> </div> <script> - $('#project{{.Title}}').click(function() { - $('#modal{{.Title}}').addClass('is-active'); + $('#project{{.Title | urlize}}').click(function() { + $('#modal{{.Title | urlize}}').addClass('is-active'); }); - $('#close{{.Title}}').click(function() { - $('#modal{{.Title}}').removeClass('is-active'); + $('#close{{.Title | urlize}}').click(function() { + $('#modal{{.Title | urlize}}').removeClass('is-active'); }); </script> {{ end }} {{ end }} |