Add background image on Tags page

diaslock

Screenshot:
https://i.hizliresim.com/gWqXl0.png

It is not too hard to make it. Just there is a problem; if u use this. U cant use the tag descriptions.

Go to file: vendor/flarum/flarum-ext-tags/js/forum/dist/extensions.js

Open the "extensions.js" with a editor (notepad++ or your text editor)

Find:

return m(
                        'li',
                        { className: 'TagTile ' + (tag.color() ? 'colored' : ''),
                          style: { backgroundColor: tag.color() } },
                        m(
                          'a',
                          { className: 'TagTile-info', href: app.route.tag(tag), config: m.route },
                          m(
                            'h3',
                            { className: 'TagTile-name' },
                            tag.name()
                          ),
                          m(
                            'p',
                            { className: 'TagTile-description' },
                            tag.description()
                          ),

And change it with this:

return m(
                        'li',
                        { className: 'TagTile ' + (tag.description() ? 'colored' : ''),
                          style: { background: tag.description() } },
                        m(
                          'a',
                          { className: 'TagTile-info', href: app.route.tag(tag), config: m.route },
                          m(
                            'h3',
                            { className: 'TagTile-name' },
                            tag.name()
                          ),

First part is okay. The second part is:

Add the custom css:

.SelectTagListItem-description {
display: none;
}

How to use?
-Add this code to your tag description from your admin panel

url(tag image link here)

additional css (if your texts are look like white-on-white)

.TagTile.colored, .TagTile.colored a { text-shadow: 0px 0px 20px black;}

Have a nice day. Sorry for my bad english ?

0E800

diaslock

Ill throw together a quick/dirty extension for this, thanks for sharing. Cool hack ?

riartem

I think it's possible to make that cool feature with separate extension

diaslock

riartem yes. If any developer make this it will be great.

0E800

diaslock

This hack also only works on Primary Tags FYI.

A few things I need to know first before I try to create a extension for this. Mostly whether or not I need to clone the whole ext-tags repo or If I can just include the flarum/tags in the files I modify that simply overwrite the extension.

Also, the background image should also show in the Hero header when a user clicks on the category.
It doesn't do that, so some more work needs to be done.

Ralkage

It would be most wise to add it as an extension seeing as once Flarum has another release ad you update, all your hard coded edits will be gone.

riartem

0E800 try to make something with descriptions visible, pls

0E800

riartem Ill do my best to try to achieve that.
I am no programmer, but what this hack does it change the tag-description into the image url.
So what really aught to be done is adding a function like tag.background and also including an extra input field in the admin section that includes an area for the background image url.

So Ill try to replace the tag.color with the background url instead.

Update: tried removing the regex that prevents anything but a valid color. I notice there is a backgroundUrl function. Not sure if @Toby could provide a quickie to help us make the color be a background image url instead of a color or if the color just adds the background color to Slug.

xarly1

This works in the actual version??

Im trying but i cant show the image in the tag, just show the url in text.

xarly1

It works after clear the cache, also add:

.Hero-subtitle {display: none;}

SmoulBuchholz

Work perfectly with my forum (in beta7.1), we just must resize images to 356x200 but it's good ?
https://i.gyazo.com/ea3cf5fcebbfc0a68883520447e04e73.gif
Thanks for this tip ?

Metamorphosis

@0E800 can I have a preview of this theming? will just check how responsive the Tag with custom background looks like. Thanks.

Cathas9lives

It works not perfect in mobile