Thêm hình ảnh vào trang profile thành viên dựa trên lựa chọn lĩnh vực hồ sơ người dùng

[PVS]

Thêm hình ảnh vào trang profile thành viên dựa trên lựa chọn lĩnh vực hồ sơ người dùng

Template modification này là một cái gì đó mà tôi đã tìm cách để thực hiện để làm cho hồ sơ thành viên nhìn một chút spiffier và cung cấp cho họ nhiều hơn một chút cảm giác của một loại mạng xã hội.

Hướng dẫn nhanh này giả định rằng bạn đã có một số hình ảnh đã sẵn sàng cho trang web của bạn cũng như kích thước chính xác cho độ rộng của trang web của bạn. Đối với mục đích của tôi, tôi muốn có một bức tranh toàn cảnh trải dài đủ để phù hợp với độc đáo trong giới hạn của trang web cố định chiều rộng của tôi

Dưới đây là các bước cần thiết để thực hiện sửa đổi...

• Thêm custom user profile field (và sự lựa chọn)
• Chỉnh sửa code bao gồm trong template
• Thêm code vào template
• Tận hưởng tính năng mới!

1. THÊM CUSTOM USER PROFILE FIELD(S)
Vào admincp của bạn, bấm vào liên kết "Users" phía trên, sau đó từ thanh điều hướng bên trái bấm vào liên kết "Custom User Fields" dưới "User Customization".

Users >> Custom User Fields

Sau đó, nhấp vào "Create New Field" nhằm tạo ra một lĩnh vực hồ sơ người dùng mới cho các thành viên của bạn để chọn hình ảnh với sự lựa chọn của họ ...

​

Khi vào bạn sẽ phải chọn hoặc điền vào một vài mẩu thông tin ("Field ID", "Title", "Description", "Display Location" and "Field Type") và sau đó nhấn vào nút "save field" ở phía dưới. (Chú ý: Ảnh chụp màn hình dưới đây hiển thị "multi-choice drop down" thay vì thông thường là chọn"drop down". Hãy chắc chắn sử dụng "drop down" để thay thế.)

​

Đặc biệt chú ý đến "Field ID:" không gian như bạn sẽ phải sử dụng văn bản chính xác trong các mã mà bạn sẽ sử dụng trong các template modification.

Bây giờ, trước khi lưu lĩnh vực này, bạn phải chọn một số tùy chọn để lựa chọn. Do đó, bấm vào "Options for Choice Fields" và thêm vào "Possible Choices" như vậy ....

​

Các văn bản bên trái để lựa chọn có thể sẽ là 'name' của những hình ảnh, vì vậy hãy chắc chắn để đặt tên cho phù hợp. Các văn bản phía bên phải với lựa chọn có thể sẽ là những gì được hiển thị cho các thành viên trong các lựa chọn thả xuống của họ. Vì vậy, chắc chắn rằng những nhập vào một cách thích hợp.

Hầu hết các tùy chọn khác là tốt theo cách của chúng, nhưng bạn có thể khám phá nơi để chia sẻ thông tin và như vậy nếu bạn muốn. Đối với mục đích của chúng tôi, đó là tất cả chúng ta cần vào thời điểm này. Vì vậy, click vào nút "Save Field" và sang Bước 2.

2. CHỈNH SỬA CODE BAO GỒM TRONG TEMPLATE
Hình ảnh của bạn nên được tải lên máy chủ của bạn và xin lưu ý các đường dẫn hình ảnh để chỉnh sửa vào mã.

Mã mà chúng tôi sẽ sử dụng là ....

<xen:if is="{$user.customFields.testfield}">
    <img src="path/to/images/{$user.customFields.testfield}.jpg" />
</xen:if>

.... Lưu ý, tên của lĩnh vực hồ sơ người dùng của chúng tôi (testfield) đã được điền vào mã. Vì vậy, chỉ cần chỉnh sửa văn bản "testfield" với những gì bạn đã chọn là lĩnh vực thông tin người dùng của bạn.

Phần thứ hai của mã (nguồn ảnh) là nơi bạn sẽ phải bao gồm đường dẫn đến hình ảnh của bạn và loại hình ảnh (.jpg, .gif, .png, vv) mà bạn đã lưu hình ảnh của bạn.

Chỉnh sửa lại một phần của mã và sau đó giữ mà dễ vận dụng như chúng ta phải nhập đó vào template member profile để xem những hình ảnh.

3. THÊM CODE VÀO TEMPLATE
Có hình ảnh lưu lại, lĩnh vực hồ sơ người dùng và lựa chọn thực hiện và bây giờ chúng ta phải thêm mã vào template member_view để hiển thị hình ảnh.

Vào Appearance >> Templates >> member_view

Đặt đoạn:

<xen:if is="{$user.customFields.testfield}">
    <img src="path/to/images/{$user.customFields.testfield}.jpg" />
</xen:if>

Vào phía sau thẻ: <div class="main">

Lưu lại là xong.

4. THƯỞNG THỨC
Bây giờ, chỉ cần điều hướng đến "Preferences", chọn lựa chọn của bạn của hình ảnh để hiển thị từ menu thả xuống, điều hướng trở lại trang hồ sơ thành viên của bạn và tận hưởng!

​

Chúc các bạn thành công.

Nguồn: xenforo.com​