Add gallery function to Hexo framework by using CSS and markdown

Posted on | In | Comments: | Views:
Symbols count in article: 7.2k | Reading time ≈ 7 mins.

My Hexo example link: https://yuan901202.github.io/gallery/

Function list

  • Main interface

    • Category album
    • Custom album name
    • Custom cover
    • Automatically cut the cover to the same size

  • Classified album interface

    • Third-order
    • Tiled by image original aspect ratio
    • Local picture source / picture bed outer chain
    • Uniform with the article illustration format
    • Click for larger image

  • Other

    • Custom album description
    • Local browsing
    • Page load speed optimization

Preparation

  • The contents of this section are based on the notes on the premise of the local save image function. If you use the outer link of the map, you can skip all the steps involving the img folder and the img/s folder.

  • All functions of this album are only tested under the effect of hexo-theme-next. When using other themes, some layout size data may be biased, and you need to modify it according to the theme settings.

▶ Create a directory

  1. Enter the command hexo new page gallery in git bash;

  2. Create the classified album folder you need in the hexo/sourse/gallery` directory;

  3. Go to the hexo/sourse/gallery directory and create a new img folder to store the album cover.

  4. Create an img folder in each album folder to store large images, and an img/s folder to store thumbnails.

Note: img/s folder can be omitted, and the thumbnail can be renamed in the format of the file name-s.jpg.

▶ Image processing

  1. Original image processing:

    • Put the image you want to upload into the gallery/album_name/img folder. In order to load the speed, it is recommended to compress it to less than 1mb and save it in jpg format.

    • There are no requirements other than file size, but to facilitate subsequent page editing, it is recommended to rename the file in an easily identifiable way, such as date-picture_name.jpg.

  2. Thumbnail processing:

    • Copy all the images under gallery/album_name/img to the gallery/album_name/img/s folder and compress the image size using other processing tools such as PS;

    • The recommended width is 300px, and the final output file size is around 30kb, and the height is not required.

  3. Cover photo processing:

    • Select the desired cover from the thumbnail of each album and copy it to the gallery/img folder.

    • It is recommended to rename it to the album_name.jpg.

▶ Album main interface

  1. Open gallery/index.md and set the title to the name of the album page you need;

  2. (Option) Turn comments on by including comments: false below the date;

  3. Copy the following code into the body and modify the album description, album name, album folder name, and cover image file name as needed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<center>！相册描述【此行可删除】</center>
<center>自定义分隔符【此行可删除】</center>
<div class="gallery-page">
	<div class="gallery-list">
		<div class="gallery-column">
			<div class="gallery-item">
				<a href="【！相册文件夹名】"><img src="img/【！封面图文件名】.jpg">
				</a>
				<p>- ！相册1 -</p>
			</div>
			<div class="gallery-item">
				<a href="【！相册文件夹名】"><img src="img/【！封面图文件名】.jpg">
				</a>
				<p>- ！相册2 -</p>
			</div>
		</div>
		<div class="gallery-column">
			<div class="gallery-item">
				<a href="sample"><img src="img/sample.jpg">
				</a>
				<p>- 相册名 -</p>
			</div>
		</div>
		<div class="gallery-column">
			<div class="gallery-item">
				<a href="sample"><img src="img/sample.jpg">
				</a>
				<p>- 相册名 -</p>
			</div>
			</div>
		</div>
	</div>
</div>
<center>自定义分割线【此行可删除】</center>

Note:

  1. When you need to use the outer chain, replace the contents of <img src="img/[cover image file name].jpg"> with the outer address of the map bed;

  2. The <div class="gallery-column"> element in the code displays the number of columns in the album in separate columns, which can be increased or decreased as needed;

  3. When adding a new album, please make sure the code is added inside the <div class="gallery-column"> element, otherwise it will cause a display error.

▶ Classified album interface

  1. Open gallery/album_name/index.md and set title to the name of the album page you need;

  2. (Option) Turn comments on by including comments: false below the date;

  3. Copy the following code into the body and modify the album description, image name, and thumbnail file name as needed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<center>！相册描述【此行可删除】</center>
<center>自定义分隔符【此行可删除】</center>
<div class="gallery-page">
	<div class="img-list">
		<div class="img-column">
			<a href="img/【！图片名1】.jpg" target="_Blank"><img src="img/s/【！缩略图文件名1】.jpg"></a>
			<a href="img/【！图片名2】.jpg" target="_Blank"><img src="img/s/【！缩略图文件名2】.jpg"></a>
		</div>
		<div class="img-column">
			<a href="img/sample.jpg" target="_Blank"><img src="img/s/sample.jpg"></a>
		</div>
		<div class="img-column">
			<a href="img/sample.jpg" target="_Blank"><img src="img/s/sample.jpg"></a>
	</div>
</div>
<center>自定义分割线【此行可删除】</center>

Note:

  1. If you need to use the outer chain, replace the content in <img src="img/[picture name].jpg"> with the outer address of the map bed. If the map is loaded fast enough, you can use the same link. Fill in the thumbnail portion;

  2. The <div class="img-column"> element in the code displays the number of columns in the column, which can be increased or decreased as needed;

  3. When adding a picture, please make sure the code is added inside the <div class="img-column"> element, otherwise it will cause a display error.

▶ CSS stylesheet

Add the following code to custom.styl:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*gallery*/

.gallery-page {
	margin-top: -50px;
}
.img-list,
.gallery-list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
}
.img-column {
	display: flex;
	flex-direction: column-reverse;
}
.img-column a,
.gallery-column a {
	border-bottom: 0px;
}
.gallery-item {
	margin-bottom: -50px
}
.gallery-item p {
	margin: -25px auto -10px;
	max-width: 50%;
	text-align: center;
	font-size: 15px;
	color: $black-deep;
	background: rgba(255,255,255,.3);
	border-radius: 7px;
	border: 1px solid $black-deep;
	box-shadow: 0 8px 20px -8px rgba(0,0,0,.3);
}
.posts-expand .post-body .gallery-column a img {
	height: 250px;
	width: 300px;
	object-fit: cover;
}
@media (max-width: 767px){
	.gallery-item p {
		min-width: 75px;
		font-size: 13px;
	}
}

Note:

  1. The style in the @media tag is to prevent the album name from being forced to wrap when browsing on the mobile terminal. It is recommended to keep it;

  2. The rest of the styles can be changed as needed, except for the flex related lines and the object-fit style, and will not be described here.

Would you mind buy me a cup of coffee?