jekyll-theme-image-grid 0.1.6 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +82 -44
- data/_includes/bootstrap-scripts.html +3 -0
- data/_includes/bootstrap-style.html +1 -0
- data/_includes/head.html +1 -1
- data/_layouts/default.html +1 -3
- data/_layouts/{grid.html → home.html} +0 -0
- metadata +5 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 90e8b3c78a11cc2a2b47df12bb8e08cf62921a970c7eac1fbfe31b11edb3c4b1
|
|
4
|
+
data.tar.gz: fa2439a070f8a5d0facb7ae3c06671f1fa2d49830d4d350ac9e1334cb9749da6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c1d0f1036cdd29d4b1cbc01332d84ec2af91d8648c64360e741b774d3dfbd3ac4dfb44670c6aedc9b2164a3833f8651bafee1373a46007e7faa9448ad939ed89
|
|
7
|
+
data.tar.gz: b598fffcad054ad56f6e9562ef93fe0df7bcabf0c724d4cc60b55c7df77e2cac7bf0c90cde4c5bd2e7e5973e6f2c7ae13931b5b147e1b6d2712aaef02adb7923
|
data/README.md
CHANGED
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
# jekyll-theme-image-grid
|
|
2
2
|
|
|
3
|
-
A simple responsive image grid theme for displaying image-based content with various built-in customization options.
|
|
3
|
+
A simple responsive image grid theme for displaying image-based content with various built-in customization options.
|
|
4
|
+
|
|
5
|
+
- [Live example site](http://www.jzhong.today/image-grid-example/)
|
|
6
|
+
- [Example site repository](https://github.com/jirrian/image-grid-example)
|
|
7
|
+
- [In-depth installation tutorial](https://pages.virtualgoodsdealer.com/articles/2021/01/21/simple-website-tutorial-part-three/)
|
|
4
8
|
|
|
5
9
|
|
|
6
10
|
|
|
11
|
+
## Dependencies
|
|
12
|
+
|
|
13
|
+
This theme uses the jekyll plugin [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag).
|
|
14
|
+
|
|
15
|
+
This theme also uses [Bootstrap 4](https://getbootstrap.com/docs/4.6/getting-started/introduction/). Edit the files `_includes/bootstrap-scripts.html` and `_includes/bootstrap-style.html` to change the Bootstrap version.
|
|
16
|
+
|
|
7
17
|
## Installation
|
|
8
18
|
|
|
9
19
|
[Create a new Jekyll site.](https://jekyllrb.com/docs/#instructions)
|
|
@@ -29,41 +39,22 @@ Then build your site:
|
|
|
29
39
|
|
|
30
40
|
Preview your new site at `http://localhost:4000`. Now you should be able to test your site locally as well as deploy it on Github Pages.
|
|
31
41
|
|
|
32
|
-
##
|
|
42
|
+
## Usage
|
|
43
|
+
### First time setup
|
|
33
44
|
|
|
34
|
-
|
|
45
|
+
Copy the contents of the [sample `_config.yml` file](https://github.com/jirrian/image-grid-example/blob/main/_config.yml) into your `_config.yml` file and edit the values with your information and preferred settings.
|
|
35
46
|
|
|
36
|
-
|
|
37
|
-
All images are stored in folders in the `_images` folder. Post images are stored in folders `_images/yyyy-mm-dd-name-of-post` that correspond to the name of the post `yyyy-mm-dd-name-of-post.md`. For example, if your post markdown file is named `2020-12-26-hello-world.md`, it must be in the `_posts` folder. And, all images that are displayed in that post must be in a folder `2020-12-26-hello-world` that is inside the `_images` folder.
|
|
47
|
+
Delete the contents of the `_posts` folder.
|
|
38
48
|
|
|
39
|
-
|
|
40
|
-
```
|
|
41
|
-
---
|
|
42
|
-
layout: post
|
|
43
|
-
title: Title of Post (optional)
|
|
44
|
-
show_title: true (optional)
|
|
45
|
-
---
|
|
49
|
+
Create a folder named `_images` in the root of your site directory. Make sure the `_images` folder is included in `_config.yml`.
|
|
46
50
|
|
|
47
|
-
|
|
48
|
-
```
|
|
51
|
+
Check out the [example site repo](https://github.com/jirrian/image-grid-example) for reference.
|
|
49
52
|
|
|
50
|
-
|
|
53
|
+
### Display Settings
|
|
51
54
|
|
|
52
|
-
|
|
53
|
-
```
|
|
54
|
-
---
|
|
55
|
-
layout: page
|
|
56
|
-
title: About
|
|
57
|
-
---
|
|
55
|
+
Edit settings in the `_config.yml` file to change display settings for the grid and post pages. See the [sample `_config.yml` file](https://github.com/jirrian/image-grid-example/blob/main/_config.yml) for reference.
|
|
58
56
|
|
|
59
|
-
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## Display Settings
|
|
63
|
-
|
|
64
|
-
Edit settings in the `_config.yml` file to change display settings for the grid and post pages.
|
|
65
|
-
|
|
66
|
-
### Grid Page Display Settings
|
|
57
|
+
#### Grid Page Display Settings
|
|
67
58
|
|
|
68
59
|
Choose whether to show all images from posts on home grid page or only show the first image from posts by editing the following field.
|
|
69
60
|
```yaml
|
|
@@ -82,7 +73,7 @@ square-cropped - Images are displayed in square grid and cropped to a square asp
|
|
|
82
73
|
square-og - Images are displayed in square grid and with original aspect ratios.
|
|
83
74
|
masonry - Images are displayed in original aspect ratios but staggered (like Pinterest). Please note this will display the images in top to bottom (then left to right) order instead of left to right (then top to bottom).
|
|
84
75
|
|
|
85
|
-
|
|
76
|
+
#### Post Page Display Settings
|
|
86
77
|
|
|
87
78
|
Change settings for what information is displayed on post pages.
|
|
88
79
|
|
|
@@ -110,26 +101,73 @@ post_settings:
|
|
|
110
101
|
true - Displays date of post.
|
|
111
102
|
false - Does not show date of post.
|
|
112
103
|
|
|
113
|
-
|
|
104
|
+
### Adding a New Post
|
|
105
|
+
|
|
106
|
+
Posts in this theme are image based. A post must have at least one corresponding image for it to show on the home grid page.
|
|
107
|
+
|
|
108
|
+
All post markdown files are stored in the `_posts` folder.
|
|
109
|
+
All images are stored in folders in the `_images` folder. Post images are stored in folders `_images/yyyy-mm-dd-name-of-post` that correspond to the name of the post `yyyy-mm-dd-name-of-post.md`. For example, if your post markdown file is named `2020-12-26-hello-world.md`, it must be in the `_posts` folder. And, all images that are displayed in that post must be in a folder `2020-12-26-hello-world` that is inside the `_images` folder.
|
|
110
|
+
|
|
111
|
+
Post markdown files can contain the following:
|
|
112
|
+
```
|
|
113
|
+
---
|
|
114
|
+
layout: post
|
|
115
|
+
title: Title of Post (optional)
|
|
116
|
+
show_title: true (optional)
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
Post content here. (optional)
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Adding a Page
|
|
123
|
+
|
|
124
|
+
Pages are linked in the top nav bar. Markdown files for pages are stored in the root of the repository. Page markdown files can contain the following:
|
|
125
|
+
```
|
|
126
|
+
---
|
|
127
|
+
layout: page
|
|
128
|
+
title: About
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
Add your about me here. (optional)
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Customization
|
|
135
|
+
Customize the layout HTML, includes HTML, and sass files, by copying the theme files to your site directory and making edits to it there.
|
|
136
|
+
|
|
137
|
+
### Theme files structure
|
|
138
|
+
- `_layouts` - folder of layouts
|
|
139
|
+
- `default.html` - default layout
|
|
140
|
+
- `home.html` - grid page layout
|
|
141
|
+
- `page.html` - page layout
|
|
142
|
+
- `post.html` - post layout
|
|
143
|
+
- `_includes` - folder of html code used in other layouts
|
|
144
|
+
- `bootstrap-scripts.html` - Bootstrap 4 scripts (edit to change version of Bootstrap)
|
|
145
|
+
- `bootstrap-style.html` - Bootstrap 4 stylesheet (edit to change version of Bootstrap)
|
|
146
|
+
- `footer.html` - footer
|
|
147
|
+
- `head.html` - head tag
|
|
148
|
+
- `header.html` - navigation bar
|
|
149
|
+
- `_sass` - folder of scss files
|
|
150
|
+
- `style.scss` - styles for theme
|
|
151
|
+
|
|
152
|
+
### Built in customization
|
|
114
153
|
|
|
115
154
|
The following variables can be edited in the `_sass/style.scss` file to change colors of the website's design.
|
|
116
155
|
```sass
|
|
117
|
-
$body-bg-color: white;
|
|
118
|
-
$header-title-color: blue;
|
|
119
|
-
$header-bg-color: white;
|
|
120
|
-
$footer-color: silver;
|
|
121
|
-
$post-title-color: gray;
|
|
122
|
-
$post-date-color: darkgray;
|
|
123
|
-
$page-title-color: gray;
|
|
156
|
+
$body-bg-color: white; /* background color */
|
|
157
|
+
$header-title-color: blue; /* color of title of website */
|
|
158
|
+
$header-bg-color: white; /* color of nav bar */
|
|
159
|
+
$footer-color: silver; /* color of footer icons */
|
|
160
|
+
$post-title-color: gray; /* color of post titles */
|
|
161
|
+
$post-date-color: darkgray; /* color of post dates */
|
|
162
|
+
$page-title-color: gray; /* color of page titles */
|
|
124
163
|
```
|
|
125
164
|
|
|
126
|
-
For complete customization, add css to the `_sass/style.scss` file.
|
|
127
|
-
|
|
128
165
|
## License
|
|
129
166
|
|
|
130
167
|
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
|
131
168
|
|
|
132
|
-
##
|
|
133
|
-
|
|
134
|
-
-
|
|
135
|
-
-
|
|
169
|
+
## Future updates
|
|
170
|
+
|
|
171
|
+
- lazy loading
|
|
172
|
+
- video post support
|
|
173
|
+
- text post support
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
|
2
|
+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
|
|
3
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
|
data/_includes/head.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<meta charset='utf-8'>
|
|
3
3
|
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
{% include bootstrap-style.html %}
|
|
6
6
|
|
|
7
7
|
<link rel='stylesheet' href='{{ '/assets/style.css' | relative_url }}'>
|
|
8
8
|
|
data/_layouts/default.html
CHANGED
|
@@ -11,8 +11,6 @@
|
|
|
11
11
|
{% include footer.html %}
|
|
12
12
|
</div>
|
|
13
13
|
</div>
|
|
14
|
-
|
|
15
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
|
16
|
-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
|
14
|
+
{% include bootstrap-scripts.html %}
|
|
17
15
|
</body>
|
|
18
16
|
</html>
|
|
File without changes
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-image-grid
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 1.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- jirrian
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2021-01-
|
|
11
|
+
date: 2021-01-22 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -68,11 +68,13 @@ files:
|
|
|
68
68
|
- LICENSE.txt
|
|
69
69
|
- README.md
|
|
70
70
|
- _config.yml
|
|
71
|
+
- _includes/bootstrap-scripts.html
|
|
72
|
+
- _includes/bootstrap-style.html
|
|
71
73
|
- _includes/footer.html
|
|
72
74
|
- _includes/head.html
|
|
73
75
|
- _includes/header.html
|
|
74
76
|
- _layouts/default.html
|
|
75
|
-
- _layouts/
|
|
77
|
+
- _layouts/home.html
|
|
76
78
|
- _layouts/page.html
|
|
77
79
|
- _layouts/post.html
|
|
78
80
|
- _sass/style.scss
|