(+84) 236.3827111 ex. 402

Hướng dẫn chèn Gallery ảnh vàoBLOG WORDPRESS với NEXTGEN GALLERY


Gallery trong bài viết trên Blog WordPress là tập hợp các bức ảnh ở dạng thu nhỏ (thumbnail) và khi bạn click vào 1 hình ảnh thumbnail nào đó thì bức ảnh với kích cỡ đầy đủ sẽ được hiển thị ra. Gallery được dùng với nhiều mục đích,VD đó có thể là tổng hợp hình ảnh sau một chuyến đi du lịch, tập hợp các thiết kế mẫu hoặc một bộ sưu tập nào đó của bạn … Trong bài viết hôm nay tôi sẽ cùng các bạn tạo gallery trong bài viết với plugin NextGEN.

Trước khi chèn gallery vào bài viết trong Blog WordPress, chúng ta cần thực hiện các thao tác sau:

  • Chuẩn bị các ảnh cho gallery, nếu các ảnh có kích thước lớn bạn nên dùng một chương trình miễn phí như Photoscape để xử lý nén các ảnh trước khi upload lên gallery.
  • Tạo gallery trong NextGEN và upload ảnh lên gallery vừa tạo.

Trong bài viết này tôi sẽ dùng các ảnh trong thư mục Sample Pictures của Windows (đặt tạiC:\Users\Public\Pictures\Sample Pictures), có 8 ảnh trong thư mục này và đều có dung lượng dưới 1M nên bạn không cần phải xử lý nén ảnh nữa.

Để tạo mới gallery trong NextGEN bạn truy cập vào phần Dashboard | Gallery | Add Gallery / Images.

Thêm mới Gallery trong NextGEN plugin

Bạn chọn Add new Gallery, sau đó đặt tên cho Gallery trong phần New Gallery tại màn hình tiếp theo, VD tôi đặt tên Gallery mới là Test 2. Sau đó nhấn Add gallery để NextGEN tạo mới 1 gallery tên là Test 2.

Đặt tên cho gallery trong NextGEN plugin

Một thông báo hiện nên báo bạn đã tạo thành công Gallery Test 2 (gallery này có ID là 26).

Thêm mới thành công gallery trong NextGEN

Sau khi tạo xong Gallery Test 2 bạn vào mục Upload Images để thêm hình ảnh vào gallery này.

Lựa chọn upload ảnh lên gallery trong NextGEN

Bạn nhấn Browse và chọn tới thư mục Sample Pictures, sau đó nhấn Ctrl + A để chọn toàn bộ hình ảnh trong thư mục này và nhấn Open.

Lựa chọn upload ảnh lên gallery trong NextGEN

Danh sách các hỉnh ảnh đã sẵn sàng cho việc upload sẽ được hiển thị.

Lựa chọn upload ảnh lên gallery trong NextGEN

Để upload các hình ảnh trên vào đúng gallery Test 2 vựa tạo, bạn hãy chọn Test 2 trong mục in to và nhấnUpload images để bắt đầu tải hình ảnh từ máy tính lên server.

Lựa chọn gallery để upload ảnh trong NextGEN

Trong quá trình tải ảnh lên server sẽ có hộp thoại sau hiện ra thông báo tiến độ upload,

Tiến độ upload ảnh trong NextGEN

Khi công việc upload hoàn tất NextGEN sẽ có thông báo như sau:

Ảnh được upload thành công lên gallery trong NextGEN

Để xem lại các ảnh vừa được upload lên bạn hãy vào mục Manage Gallery của NextGEN.

Quản lý gallery trong NextGEN

Bạn chọn Gallery vừa tạo là Test 2.

Quản lý gallery trong NextGEN

Danh sách các ảnh bạn vừa upload vào gallery Test 2 sẽ được hiển thị.

Danh sách các ảnh trong gallery NextGEN

Tới đây bạn đã hoàn thành việc tạo mới gallerytải các ảnh từ máy tính lên gallery đó, bạn hãy chuyển sang bước tiếp theo là chèn gallery này vào bài viết trong Blog WordPress.

Chèn gellery vào bài viết

Bạn có thể chỉnh sửa một bài viết cũ để chèn thêm gallery vào hoặc tạo mới 1 bài viết và thử nghiệm tính năng này, tôi chọn tạo mới 1 bài viết. Trên thanh công cụ phần soạn thảo bài viết của Blog WordPress sẽ có biểu tượng của NextGEN gallery.

Chèn gallery vào bài viết trong Blog WordPress

Khi click vào biểu tượng này bạn sẽ gọi tới tính năng chèn ảnh, gallery, album vào bài viết của NextGEN. Do chúng ta sẽ chèn gallery Test 2 vào bài viết nên bạn chọn tab Gallery, sau đó chọn tên GalleryTest 2 và chọn Image list trong mục Show as. Sau đó nhấn Insert để chèn gallery Test 2 với kiểu Image list vào bài viết.

Chèn gallery vào bài viết trong Blog WordPress

Một đoạn mã sẽ được chèn vào nội dung bài viết của bạn.

Shortcode để chèn gallery vào bài viết trong Blog WordPress

Bạn chọn update bài viết và quay ra trang chủ kiểm tra, kết quả là 1 gallery với các ảnh từ mục Sample Pictures sẽ được hiện thị.

Gallery được hiển thị trên Blog WordPress

Và khi bạn click vào 1 bức ảnh thu nhỏ (thumbnail) thì kích thước đầy đủ của ảnh được hiển thị với các nút Next | Previous để xem các ảnh trước và sau trong album.

Ảnh với kích thước đầy đủ trong mỗi gallery


Nguồn tin: nguyenhuutrong.comnhuutrong.com