xF2 Đặt ảnh đính kèm trong bài viết làm thẻ og:image cho xenForo 2

  • Bạn không tìm được Add-on hay Style xenForo 1 trên hệ thống xFv2 hiện tại ?
    Đăng bài yêu cầu ngay !
  • Can't find your Add-on or Style on xFv2 ?
    Request now !

datdaik000

A boy learn to be a man
Staff member
7/2/18
64
82
18
Nam Định
dcforo.com
Ở xenForo 1, mình đã có bài viết hướng dẫn vấn đề này ( Xem tại đây ). Tuy nhiên ở xenForo 2 thì chưa có ai viết cả nên mình quyết định làm thêm 1 bài hướng dẫn nữa cho ae.
@tuna đã có hướng dẫn cho bác.

Lưu ý: Đảm bảo chắc chắn bạn đã bật sẵn quyền View Attachments cho Guests ( UnRegistered Group )

note.png

Giờ chúng ta bắt đầu !

Bước 1: Vào template thread_view tìm
Code:
<xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />
Thay bằng đoạn sau
Code:
<xf:if is="{$thread.FirstPost.Attachments.first().thumbnail_url}">
    <xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}"
        arg-imageUrl="https://res.cloudinary.com/jpress/image/fetch/w_300,h_200,c_thumb/{{ link('canonical:attachments', $thread.FirstPost.Attachments.first()) }}" />
<xf:else/>
    <xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />
</xf:if>
Tiếp tục tìm
Code:
"image": "{{ (($thread.User.avatar_highdpi
            ? $thread.User.getAvatarUrl('h', null, true)
            : $thread.User.getAvatarUrl('l', null, true))
            ?: base_url(property('publicMetadataLogoUrl'), true))|escape('json') }}",
Thay bằng
Code:
<xf:if is="{$thread.FirstPost.Attachments.first().thumbnail_url}">
        "image": "https://res.cloudinary.com/jpress/image/fetch/w_300,h_200,c_thumb/{{ link('canonical:attachments', $thread.FirstPost.Attachments.first()) }}",
        <xf:else/>
        <xf:if is="$thread.User">
        "image": "{{ (($thread.User.avatar_highdpi
            ? $thread.User.getAvatarUrl('h', null, true)
            : $thread.User.getAvatarUrl('l', null, true))
            ?: base_url(property('publicMetadataLogoUrl'), true))|escape('json') }}",
        </xf:if>
        </xf:if>
Save lại và kiểm tra

demo.png

Còn đây là kết quả khi share lên Facebook. Các bạn nên chờ 1-2 ngày để Facebook update cache là ok. Ở đây mình dùng Debug Tool cho nhanh.

demo2.png

Demo khi share lên Facebook

demo_share.png

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


Một vài lưu ý nữa
  • Code này sẽ lấy ảnh attachment đầu tiên của bài, chưa hỗ trợ ảnh ngoài.
  • Vì bật quyền View Attachment cho Guests nên những người chưa đăng nhập vẫn có thể tải file đính kèm không phải ảnh ( Cái này chờ add-on khắc phục ).
  • Chưa hỗ trợ Resources hay Media.
 
Reactions: Ái Nhân and tuna

tuna

Active User
12/2/18
31
10
8
Ở xenForo 1, mình đã có bài viết hướng dẫn vấn đề này ( Xem tại đây ). Tuy nhiên ở xenForo 2 thì chưa có ai viết cả nên mình quyết định làm thêm 1 bài hướng dẫn nữa cho ae.
@tuna đã có hướng dẫn cho bác.

Lưu ý: Đảm bảo chắc chắn bạn đã bật sẵn quyền View Attachments cho Guests ( UnRegistered Group )


Giờ chúng ta bắt đầu !

Bước 1: Vào template thread_view tìm
Code:
<xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />
Thay bằng đoạn sau
Code:
<xf:if is="{$thread.FirstPost.Attachments.first().thumbnail_url}">
    <xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}"
        arg-imageUrl="https://res.cloudinary.com/jpress/image/fetch/w_300,h_200,c_thumb/{{ link('canonical:attachments', $thread.FirstPost.Attachments.first()) }}" />
<xf:else/>
    <xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />
</xf:if>
Tiếp tục tìm
Code:
"image": "{{ (($thread.User.avatar_highdpi
            ? $thread.User.getAvatarUrl('h', null, true)
            : $thread.User.getAvatarUrl('l', null, true))
            ?: base_url(property('publicMetadataLogoUrl'), true))|escape('json') }}",
Thay bằng
Code:
<xf:if is="{$thread.FirstPost.Attachments.first().thumbnail_url}">
        "image": "https://res.cloudinary.com/jpress/image/fetch/w_300,h_200,c_thumb/{{ link('canonical:attachments', $thread.FirstPost.Attachments.first()) }}",
        <xf:else/>
        <xf:if is="$thread.User">
        "image": "{{ (($thread.User.avatar_highdpi
            ? $thread.User.getAvatarUrl('h', null, true)
            : $thread.User.getAvatarUrl('l', null, true))
            ?: base_url(property('publicMetadataLogoUrl'), true))|escape('json') }}",
        </xf:if>
        </xf:if>
Save lại và kiểm tra


Còn đây là kết quả khi share lên Facebook. Các bạn nên chờ 1-2 ngày để Facebook update cache là ok. Ở đây mình dùng Debug Tool cho nhanh.


Demo khi share lên Facebook


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


Một vài lưu ý nữa
  • Code này sẽ lấy ảnh attachment đầu tiên của bài, chưa hỗ trợ ảnh ngoài.
  • Vì bật quyền View Attachment cho Guests nên những người chưa đăng nhập vẫn có thể tải file đính kèm không phải ảnh ( Cái này chờ add-on khắc phục ).
  • Chưa hỗ trợ Resources hay Media.
Vẫn like cho bác mặc dù em cần lấy ảnh bên ngoài :):cry:
 
Reactions: datdaik000

GRV-TV

Active User
11/2/18
12
7
3
Mà giữa xen1 với xen2, cái nào sẽ tốt hơn về sau?, thấy mấy ông lớn bên VN mình như vnxf.vn còn xài xen1
 
Reactions: datdaik000

datdaik000

A boy learn to be a man
Staff member
7/2/18
64
82
18
Nam Định
dcforo.com
Mà giữa xen1 với xen2, cái nào sẽ tốt hơn về sau?, thấy mấy ông lớn bên VN mình như vnxf.vn còn xài xen1
Chắc chắn là Xenforo 2. VNXF hay Tinhte chưa lên chắc họ còn đang vướng mắc các vấn đề ví dụ như addon giờ chưa đủ chẳng hạn ;) Mình đoán chắc trong khoảng cuối 2018 sẽ có nhiều diễn đàn lớn chuyển mình đấy.
 
Reactions: GRV-TV and secpol

khucthuydu

Active User
2/3/18
5
1
3
Lấy được hình ngoài thì hay hơn

mà Style này chữ hơi nhỏ nhé
 

Ái Nhân

New member
11/2/18
3
1
3
đã cho chữ to lên, anh em thấy ổn hơn chưa ? :D

À, nếu muốn góp ý cho xFv2 các bạn có thể vào đây nhé:


Mình cảm ơn.
có tut lấy ảnh ngoài cho xen 2 chưa vậy ad
em hóng bữa giờ nè :D
 

caolaogia7

Active User
26/5/18
6
0
1
30
binh duong
không tìm thấy đoạn:
"image": "{{ (($thread.User.avatar_highdpi
? $thread.User.getAvatarUrl('h', null, true)
: $thread.User.getAvatarUrl('l', null, true))
?: base_url(property('publicMetadataLogoUrl'), true))|escape('json') }}",

mình dùng themes Strontium
 

Kingz

New member
3/1/19
1
0
1
25
VietNam
mình cũng không tìm được đoạn
Code:
"image": "{{ (($thread.User.avatar_highdpi
            ? $thread.User.getAvatarUrl('h', null, true)
            : $thread.User.getAvatarUrl('l', null, true))
            ?: base_url(property('publicMetadataLogoUrl'), true))|escape('json') }}",
 

Members online

No members online now.

Latest resources