Pinned Entity Image en

This plugin allows you to pin an entity’s image to its sidebar by simply creating an additional pinned attribute containing predetermined keywords. The image uses the full width of the sidebar and your specified height. The attribute’s value is optional and can be displayed above or below the image.

If the entity does not have an image, a placeholder is shown instead to remind you to add one or remove/unpin the attribute.

Instructions

1. Make sure your entity has an image uploaded in the Entry tab (or set from the Gallery in the Boost tab). This plugin does not interact with banner images set in the Boost tab.
2. In the Attributes tab, create an attribute named "pinned portrait 300". The name must appear as is, without capital letters or extra characters.
3. Optionally, change the number to another available preset (listed below).
4. Optionally, give the attribute a value that will display above the image.
   
5. Click the star icon next to the attribute to pin it.
6. Optionally, move the attribute to control its position in the list.

You can streamline the process by adding the attribute to an attribute template, especially if you normally use the same aspect ratio on all entities of the same type.

You can also add the "caption" keyword to make the attribute’s value appear under the image rather than above. This keyword must come at the end of the attribute’s name. For example, pinned portrait caption will use the default height, and pinned portrait 300 caption will set the height to 300px.

Presets

Out of the box, you can specify the following numbers to control the image’s height: 200, 250, 300, 350, 400, 450, 500. Any value other than these will default to 182 pixels (making it square), as will omitting the number altogether, but you can add more presets to your campaign CSS using the instructions below.

Customization

More height presets can easily be added to your campaign CSS (under Campaign > Theming) by copying the following code as many times as desired and simply changing the numbers on each line:

 /* Custom pinned portrait heights */
.pinned-attribute[data-attribute^="pinned portrait 200"] {
  	--pinned-portrait-height: 200px;
}

Likewise, if you’ve customized the entity sidebar’s width, or if you prefer to keep some empty space around your images, you can adjust the image’s width accordingly by adapting the following rule’s value:

 /* Custom pinned portrait width */
.pinned-attribute[data-attribute^="pinned portrait"] {
  	--pinned-portrait-width: 182px;
}

If your custom width is less than the sidebar’s width, you will also want to center the image using the following rule:

/* Center pinned portrait */
.pinned-attribute[data-attribute^="pinned portrait"]:not([data-attribute*="caption"])::after,
.pinned-attribute[data-attribute^="pinned portrait"][data-attribute*="caption"]::before {
	margin: 0 auto;
}

You can use the same selector to decorate the image further, for example with a quick and dirty picture frame effect and dramatic shadows (as in the sample image):

.pinned-attribute[data-attribute^="pinned portrait"]:not([data-attribute*="caption"])::after,
.pinned-attribute[data-attribute^="pinned portrait"][data-attribute*="caption"]::before {
    border: 5px outset wheat;
    box-shadow: -2px -2px 5px black, inset 15px 15px 30px rgba(0,0,0,0.8), inset -15px -15px 30px rgba(0,0,0,0.8);
}

Lastly, you can style the attribute’s value if you would like to use it as a subheading above the image:

.pinned-attribute[data-attribute^="pinned portrait"]:not([data-attribute*="caption"]) > .pull-right {
    text-decoration: underline;
}

...or as a caption under the image:

.pinned-attribute[data-attribute^="pinned portrait"][data-attribute*="caption"] > .pull-right {
    text-decoration: underline;
}

But I don’t want my entity’s image in two places at once!

Fair point! We don’t need to keep it in the page header too. Just add the following rule to your CSS if you want to use pinned images exclusively (this will not interfere with banner images):

.entity-grid .entity-header {
	grid-template-columns: 0 auto;
}

Alternatively, you can use tags, types or specific entity IDs to hide header images from more specific entries (click here to learn about designing your own entity selectors).

.kanka-tag-noheaderimage .entity-grid .entity-header { ...
.kanka-type-guild .entity-grid .entity-header { ...
.kanka-entity-123567 .entity-grid .entity-header { ...

Note: pinned relations and order of pins

Since pinned relations are listed before pinned attributes, you could end up with a few relations, then your pinned portrait, then your other pinned attributes, when you wanted the portrait at the top. This plugin has rules in place to prevent that and keep the image at the top, followed by relations then attributes. However, if your image is not the first pinned attribute, the plugin will not mess with your ordering nor move it above pinned relations =)

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):