Answered Change Tile View Container Size to 16:9?

[KensonPlays]

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:

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?

 

[Bob]

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 ).

 

[KensonPlays]

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.

 

[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.