Issue: Tile layout for area view

I have been considering tile layouts at least for attachments for a while (giving attachments their own list in each area/category/etc).

With a field to set an icon/image for every article, a tile view could make sense as an option for general page listings as well. Of course the option should be on a per-area basis whether to use a tile view or not. When we start adding settings for regular pages too, we can have the option to tile articles in categories.

We are testing area-level tile views here: https://www.vaultwiki.org/pages/Image?do=list
Feedback would be appreciated.

Nice to see this starting.

It would look better if it contains only image tiles. Take this principle of a tile:

This can be any shape that suits the design. The above example is too wide for my taste. For vaultwiki a vertical rectangle image could be used. More height than width) Or a square.

So make the images just as wide as the yellow tiles and make the image start right at the top. So you will not see any yellow at the top or the sides. The tile start where the image starts.

I would replace the prefix with an icon on order to save a row / space. Less is more in this case. For example replace the image prefix with a FA Image icon and place the icon with the other icons.

Then place the title and the row of icons in a gradient like the black one in the example. The gradient can be any color that suits the webmaster / style.
The bottom of the gradient would be the bottom of the tile. i.e. nothing of the yellow tile that is in the example would be shown. It would be all image and gradient.


It would be nice if the tiles would be made responsive later.

I really like the function that XFMG has to deactivate specific tile icons in style properties. This allows me to make it look how I think is good for my community.

Keep in mind that this is area-level tiling as an alternate way to present wiki page listings (see the OP). Even though a gallery add-on was shown as an example of what tiling is, the feature is not intended to function as an image gallery.

I am trying to get something like what you are describing now, but it seems to be unfeasible below 150px:

This uses the page's "icon" field and needs to be tailored for that. Icons are generally small, square images. Upscaling them beyond a certain point starts not looking great. Other times, the icon will just be an FA character. It may not look great to have 50 200px font-awesome characters tiled on the page, especially when most of them are the same.

So we need to strike a balance of what will look good when there is a mixture of font-based and image-based icons on the same page. We are testing this in our Image area because it has a high number of customized icons and would give a better idea of how it would look if icons were used to their fullest potential. But in many cases, it will not be used for an area full of images, even if that is what the OP hopes.

We have to be careful how we deal with prefixes. In VaultWiki 4, they do not refer to a wiki function or a wiki content type that VaultWiki can figure out. They are a meaningful part of the title. The example only uses "Image" on that page, but this feature could be used in any area, with any mixtures of prefixes. What if we have 5 prefixes "Wolves", "Fish", "Fruit", "Person", etc? An FA "image" icon would not make sense. And with so many prefixes on the same page, removing or hiding the prefix might become confusing to the user.

Since the tile is for page listings, the title is still the most important part of the listing. For a more typical case, I have now enabled it in the Demo area: https://www.vaultwiki.org/demo?do=list

I've made some changes to the default tile properties based on your suggestions. The current/default icon width is 120px. I don't recommend increasing it due to the reasons I discussed above. There are two width properties in case users don't want it to bleed to the edge -- for larger tiles, you could increase the outer tile width to 150 without causing any upscaling issues (but it would reveal the background you didn't like).

If the tile size goes below 120px, then the title and stat info won't overlay anymore (it might cover the whole icon). Below this size, it will appear below the icon like my previous example.

I don't recommend making the icon size larger than the tile size. In my opinion, it looks terrible. The icon size should always be lower or equal to the tile size.

The existing status colors are still maintained for the gradient. They change based on a combination of the read/unread status of the wiki page and the type of the unread update, just like the normal content listings do. If you want to use a separate color set for the tiles vs normal listings, you can override it in the CSS. For now, I don't know if it makes sense to create 20 additional color properties for tiles.

I dont see it as a gallery. just as a more attractive way to browse wiki area's. In fact I try to avoid all use of VW gallery functions.

I would certainly use much larger icons. Mainly because all my wiki articles have main images. Icons just isn't the correct description for this. For example a wiki may be about a plant and therefore the main wiki image is a drawing or picture of the plant. If the tile is too small then no one will recognize the image.
I think its important that we can set tile/image size on area view.
It would also be useful to set a minimum size for the main article image.

I would personally use only sharp corners. But this depends on style.
Can we have a setting to hide prefix?
Can we have a setting to only show wikis that have an image?

I feel there is to much vertical space between the title and the icons. Can you reduce this?

If you want to hide the prefix, you can do it in CSS:
I don't know about only showing pages that have an image. This would make it very difficult for users to find those pages or for moderators to perform tasks on pages that don't have one. Isn't it better to show them? Someone would notice that the image is missing and be more likely to add the image.

As far as requiring an icon or requiring a specific size, that would have to be a separate feature request. Custom icons were added in 4.0.2 and that feature has not been modified at all for the purposes of the tile view.

Marking as implemented in 4.0.10.

How to activate this feature on my site?

In AdminCP > Wiki > Area Manager, edit the area you want to tile. Under List Options, change Style of the list to Tile Layout. This works best in an area for attachments, or for an area that uses a lot of custom page icons.

There is no such an option...