• REGISTRATION REQUIREMENTS:

    Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Answered Change Tile View Container Size to 16:9?

KensonPlays

New Member
AMS Premium
LD Premium
UBS Premium
Note: I am using the default XenForo style, only color & background changes.

I'd like to change this to a 16:9 aspect ratio to match the thumbnail dimensions, if possible:
1704488677233.png
As of right now, it cuts off on the far right thumbnail, which is a custom 640x360 (16:9) image. Which template would I need to tweak, or what should I add to extra.less to make these thumbnails have a 16:9 aspect ratio for my (and others) thumbs?
 
Last edited:
I updated the TITLE of this as what you want to do is change the size of the title view container.

The attach screenshot is of an AMS Article listing page (AMS Index, AMS Category page) that is configured to use Tile View Layout type to display content.

Tile View Layout type does NOT use the XF Attachment Thumbnail as those are two small to be used for larger responsive containers like Grid View, Tile View, Grid block etc Also, Containers are all the same size, so the container size is not determined by the background image. The container size is determined by the LESS for that specific layout type.

Only List View Layout type and Carousel uses Thumbnails (which retain their dimensional sizes which is core XF default).

Tile View, Grid View and Grid Block use the full size image as a container background (just like XF does for Thread Type Article).

If you want to modify the Tile View Layout, you will have to make modifications to the xa_ams_tile_view_layout.less template.

Not Tile View is a RESPONSIVE GRID, which is standardized LESS that determines the container width based on percentages at each responsive breakpoint... so for example, 33% = 3 containers at 33% width of the view port... so if the view port is 1000px wide, that means 3 containers that are 330px wide.

Anyway, Tile View Layout type uses standard flex-grid less, which is not really that complicated, but it does have its limitations. Maybe contact a designer if you have problems customizing it (I'd recommend @Russ ).
 
I updated the TITLE of this as what you want to do is change the size of the title view container.

The attach screenshot is of an AMS Article listing page (AMS Index, AMS Category page) that is configured to use Tile View Layout type to display content.

Tile View Layout type does NOT use the XF Attachment Thumbnail as those are two small to be used for larger responsive containers like Grid View, Tile View, Grid block etc Also, Containers are all the same size, so the container size is not determined by the background image. The container size is determined by the LESS for that specific layout type.

Only List View Layout type and Carousel uses Thumbnails (which retain their dimensional sizes which is core XF default).

Tile View, Grid View and Grid Block use the full size image as a container background (just like XF does for Thread Type Article).

If you want to modify the Tile View Layout, you will have to make modifications to the xa_ams_tile_view_layout.less template.

Not Tile View is a RESPONSIVE GRID, which is standardized LESS that determines the container width based on percentages at each responsive breakpoint... so for example, 33% = 3 containers at 33% width of the view port... so if the view port is 1000px wide, that means 3 containers that are 330px wide.

Anyway, Tile View Layout type uses standard flex-grid less, which is not really that complicated, but it does have its limitations. Maybe contact a designer if you have problems customizing it (I'd recommend @Russ ).
Assuming its a similar file for UBS? Like xa_ubs_tile_view_layout.less, with a similar change?

Edit: Setting max width to 1750px works on a 1440p monitor, and a 1080p with chrome devtools. Though I will have to adjust the page backgrounds, possibly so less is cut off.

Edit 2: When we figure this out (between a coder friend and I) I will still post the resolution for others.
 
Last edited:
  • Like
Reactions: Bob
Assuming its a similar file for UBS? Like xa_ubs_tile_view_layout.less, with a similar change?
Yes :)

AMS, CAS, EMS, IMS, LD, RMS, SC and UBS all have Tile View Layout which is standardized across all of my addons. They each have their own LESS template and the classnames are addon specific so that if you have AMS installed, making changes to AMS Tile View does not affect Tile View in UBS.
 
Back
Top