Background illustrations

↑ Parent: Advanced tutorials

← Previous: Custom users preferences and settings

If the license offers a set of nice illustrations, you may want to use them to help the website look good.

Example of illustrations that can be used:

Example of illustrations that can be used

On the homepage:

As Backgrounds (no character)
or as Arts (with character)

On profile pages:

As Backgrounds (no character)
or art as Account headers (with character)

Staff can test them out:

Staff tools

Backgrounds

Plain backgrounds (without any character) can be used:

as profile backgrounds
as homepage backgrounds (when foreground is specified)

Set up backgrounds

To set up backgrounds, you can use the following Website settings:

Setting	About	Default value
`BACKGROUNDS`	A static, fixed list of backgrounds	[]
`BACKGROUNDS_MODEL`	The model class where backgrounds are stored	`None`
`BACKGROUNDS_FILTER`	When `BACKGROUNDS_MODEL` is specified, this allows to limit which backgrounds are allowed or not	`lambda q: q`
`ONLY _SET _BACKGROUND _FROM _COLLECTION`	When `BACKGROUNDS_MODEL` is specified, the settings page will show a link to the list view of the backgrounds collection instead of a modal. This is recommended if there are too many backgrounds to load in a modal.	False
`GET_BACKGROUNDS`	Write your own logic entirely to retrieve backgrounds dynamically	None

You can also set up season-specific backgrounds, see Seasons.

ℹ️ Backgrounds are cached, see Use generated settings.

In all cases, backgrounds will be represented as a list of dicts. Each dict corresponds to a background and should include the following settings:

Key	Value	Default
`id`	Unique identifier for this background	Required
`image_url`	URL to the background image	Required
`name`	Name of the background (translated if possible)	Required
`thumbnail_url`	URL to a thumbnail version of the background image	value of `image`
`hd_image`	URL to a higher quality version of the background image, loaded automatically for users with big screens	`None`
`d_names`	Dict of background names in other languages	`{}`
`homepage`	Should the background be displayed on the Homepage?	`True`
`profile`	Should the background be available as an option for users to select from to customize their profile?	`True`

If you're using BACKGROUNDS_MODEL but you're not using GET_BACKGROUNDS, backgrounds will be retrieved like so:

Key	How it's retrieved
`id`	`item.pk`
`image_url`	`item.background_image_url` or `item.image_url`
`name`	`unicode(item)`
`thumbnail_url`	`item.background_image_thumbnail_url` or `item.image_thumbnail_url`
`hd_image`	`item.background_image_2x_url` or `item.image_2x_url`
`d_names`	`item.d_unicodes`
`homepage`	`item.show_background_on_homepage` or `item.show_image_on_homepage`
`profile`	`item.show_background_on_profile`

Homepage

Background

Example of homepage with background

It's recommended to use a simple, light colored patterned background.

Takes a full URL or a path in static/img/.

${PROJECT}/settings.py:

HOMEPAGE_BACKGROUND = 'bg_pattern.png'

Ribbon

Example of homepage with ribbon

If the text is hard to read because the background is too rich, you can add a flat ribbon:

${PROJECT}/settings.py:

HOMEPAGE_RIBBON = True

Art

Examples of homepage with art background, centered

To set up arts, you can use the following Website settings:

Setting	About	Default value
`HOMEPAGE_ARTS`	A static, fixed list of arts	[]
`GET_HOMEPAGE_ARTS`	Write your own logic entirely to retrieve arts dynamically	None

You can also set up season-specific arts, see Seasons.

ℹ️ Arts are cached, see Use generated settings.

In all cases, arts will be represented as a list of dicts. Each dict corresponds to an "art" and should include the following settings:

Key	Value	Default
`url`	URL of the image (full URL or a path in `static/img/`)	Required, unless `foreground_url` specified
`hd_url`	You may provide a small, mobile-optimized image in `url` and the full size image in `hd_url` (full URL or a path in `static/img/`). It will be loaded dynamically with Javascript if the screen is considered big enough.	`None`
`about_url`	If provided, a ℹ️ icon will be displayed on the bottom left corner to allow users to learn more about the background.	`None`
`foreground_url`	URL of a transparent image representing something to show in the foreground, with one of the (backgrounds)(#backgrounds) behind it. See guide below	Required if `url` is not specified, otherwise `None`
`side`	See guide below	Value of `HOMEPAGE_ART_SIDE`
`position`	See guide below	Value of `HOMEPAGE_ART_POSITION`
`gradient`	See guide below	Value of `HOMEPAGE_ART_GRADIENT`
`ribbon`	See Ribbon	Value of `HOMEPAGE_RIBBON`

${PROJECT}/settings.py:

HOMEPAGE_ARTS = [
    {
	'url': u'background_1.png',
    },
    {
        'url': u'background_2.png',
    },
    ...
]

A random value within the list will be used every time the homepage is loaded.

Examples of homepage with all 3 options for sides

By default, the background will show across the whole page and the website's details will be centered.

If your background features character(s), you may want to have it on the side. Choices are: left, right or across.

${PROJECT}/settings.py:

HOMEPAGE_ART_SIDE = 'left'

You can also specify side within each art dict in HOMEPAGE_ARTS.

If your character is centered on your image, you'll need to do some adjustments using position in art in HOMEPAGE_ARTS or globally with HOMEPAGE_ART_POSITION:

Example of homepages with a character centered adjusted with position

Background + Foreground used in example below Example with foreground images

If your art urls don't have characters and you have transparent images of characters, you can specify foreground_url in your art dictionaries in HOMEPAGE_ARTS.

${PROJECT}/settings.py:

HOMEPAGE_ARTS = [
    {
        'url': u'background_1.png',
	'foreground_url': u'honoka.png',
    },
    {
        'url': u'background_1.png',
	'foreground_url': u'kotori.png',
    },
    ...
]

If you have plain backgrounds (no characters) specified in BACKGROUNDS in your settings, url becomes optional and a random background will be picked when url is not specified:

${PROJECT}/settings.py:

BACKGROUND = [
    {
        'id': 1,
        'image': u'background_1.png',
        'name': _('Rainbow'),
    },
    ...
]
HOMEPAGE_ARTS = [
    {
	'foreground_url': u'honoka.png',
    },
    {
	'foreground_url': u'kotori.png',
    },
    ...
]

Staff members are allowed to test foregrounds using the GET parameter foreground_preview which takes the full URL of an image. Both preview and foreground_preview can be combined.

Before/After repositioning homepage art

If your background is not positioned correctly, you can configure HOMEPAGE_ART_POSITION:

${PROJECT}/settings.py:

HOMEPAGE_ART_POSITION = {
    'position': 'center right',
    'size': '150%',
    'y': '40%',
    'x': '100%',
}

Default values for each fields:

DEFAULT_HOMEPAGE_ART_POSITION = {
    'position': 'center center',
    'size': 'cover',
    'y': 'center',
    'x': 'center',
}

You can also specify position within each art dict in HOMEPAGE_ARTS.

Before/After repositioning homepage foreground

If you need to re-position the foreground, there are no settings available for that so you will need to write some LESS/CSS to achieve it:

${PROJECT}/static/less/style.less:

.current-activity_list[class*="shortcut-"], .current-index {
    .home-wrapper {
        .home-foreground img {
            width: 50%;
            top: 55%;
        }
        &.right .home-foreground img {
            left: 45%;
    	}
        &.left .home-foreground img {
            left: -5%;
        }
    }
}

If the text is hard to read because the background is too rich, you can add a white gradient halo:

${PROJECT}/settings.py:

HOMEPAGE_ART_GRADIENT = True

You can also specify gradient within each art dict in HOMEPAGE_ARTS.

If you would like to use illustrations from items in database, you can add the list of arts in your generated settings:

${PROJECT}/management/commands/generate_settings.py:

homepage_arts = [
    {
        'url': card.art_url,
        'hd_url': card.art_2x_url or card.art_original_url,
        'about_url': card.item_url,
    }
    for card in models.Card.objects.filter(show_art_on_homepage=True, art__isnull=False).exclude(art='')
]
...
generateSettings({
    ...
    'HOMEPAGE_ARTS': homepage_arts,
})

${PROJECT}/settings.py:

from django.conf import settings as django_settings

HOMEPAGE_ARTS = getattr(django_settings, 'HOMEPAGE_ARTS', None)

If you have illustrations per character and want to give your users a personalized experience, you can provide RANDOM_ART_FOR_CHARACTER. It will only be called when the user is logged in, has at least one favorite character set up in their settings, with a 20% chance (the remaining 80% of the time, a random choice from the provided HOMEPAGE_ARTS will be returned).

${PROJECT}/utils.py:

def randomArtForCharacter(character_id):
    try:
        card = models.Card.objects.filter(
            show_art_on_homepage=True,
            character_id=character_id,
        ).order_by('?')[0]
    except IndexError:
        return {
            'url': 'default_art.png',
        }
    return {
        'url': card.art_url,
        'hd_url': card.art_2x_url or card.art_original_url,
        'about_url': card.item_url,
    }

${PROJECT}/settings.py:

from .utils import randomArtForCharacter

RANDOM_ART_FOR_CHARACTER = randomArtForCharacter

ℹ︎ See also: Activities tabs

ℹ︎ See also: Disable activities

Profiles

Profile backgrounds

TBD

Account headers

TBD

Staff tools

Staff members with permission list_homepage_arts (default: Manager, Database maintainer, Database maintainer (API) and Developer) are allowed to:

See all the arts

by going to /homepage_arts/ page

They will also see the current seasons arts and current birthday arts.

Test out backgrounds/arts

by manually adding GET parameters to the homepage URL /:

Key	Description
`preview`	URL of the art main image
`hd_url_preview`	URL of the HD version of the main art
`foreground_preview`	URL of foreground image
`position_x_preview`	Change x in art position
`position_y_preview`	Change y in art position
`position_size_preview`	Change size in art position
`side_preview`	Change which side
`ribbon_preview`	Shows/hide ribbon (`true` or `false`)
`gradient_preview`	Shows/hide gradient (`true` or `false`)