User blog:LostInRiverview/Pagecover template user guide

A couple of years ago, {{Pagecover}} was introduced to The Sims Wiki. For those who are unfamiliar, Pagecover is a template that places a large banner image (usually) at the top of an article. You can see Pagecover in action on nearly all pages about games and expansion packs, neighborhoods/worlds, life states and life stages, and many other articles. Pagecover is also extensively used on user blogs on this wiki.

This is Pagecover

Through the years that Pagecover has been in use on the wiki, there have been several instances of people incorrectly using the template, or not using the template to its full potential. In writing this guide, I hope to aid editors in making the most out of the Pagecover template, and demonstrate some lesser-known or lesser-understood features.

Please note that this guide is written with the assumption that you understand the basics of how to use templates. If you are unfamiliar with templates, or get confused about certain terms that I may use (like "parameter"), please consult this help page for an overview of how Templates work.

The basics of Pagecover

To understand how to best use Pagecover, start with the idea of boxes. Pagecover is really just a large box, on an article page. Through certain parameters, you can adjust the size of the box. Inside this box is the image you're using. The image itself can be modified as well, and can be moved around vertically inside the box. The box defaults in size to 670 pixels wide and 300 pixels tall. The box also, by default, has a banner on top of it, where you can add text to different parameters. The banner can be moved around within the Pagecover box, recolored, or eliminated completely.

The most important element of Pagecover is the image used within it. Care should be taken when choosing images, to ensure that they look good once published. You should also remember that Pagecover only accepts entries to the <image> parameter with a certain format. When adding an image to Pagecover, make sure that the File: prefix and all brackets are removed, or it will not work! The parameter <image> must include only the file name and the file type, and nothing else.

Adjusting images within Pagecover

Pagecover width is image size

In an ideal world, every image that is to be added to Pagecover would be the exact size of Pagecover: 670x300. However, there are very few images on The Sims Wiki that fit this exact standard, so Pagecover is designed to be flexible.

Keep in mind through all this that the size of the image within the Pagecover box is determined by the width you set. Width is 670 by default, but can be modified by the <width> parameter; when using this parameter, include the raw width only and do not use percentage width (i.e. "600" instead of "600px" or "90%"). The width of Pagecover determines the overall size of the image. If an image is too wide to fit within Pagecover, the whole image is shrunk proportionally until it fits the width, and if an image is too narrow to fit within Pagecover, the image is stretched proportionally to fit. All of this shrinking or stretching is dependent on the Pagecover width. Thus, when you set the width of the box, you are automatically setting the image to be the same width.

An image's size is controlled by <width>, so the height of the image cannot be controlled directly. If an image is made narrower to fit the width of Pagecover, it will also be shortened by the same proportion, and the same is true if an image is stretched to fit. The ratio of width to height of the original image is always kept: if there is an image that is 1000 wide by 500 tall, after adding it to Pagecover (which defaults in width to 670px), the image will be resized to 670 wide by 335 tall.

Offset and height adjustment

The adjustment of images to fit Pagecover's width can create two problems: an image may be incorrectly positioned within the box, cutting off the "action" of the image in the frame, or an image may be too short for Pagecover, and will show an empty space at the bottom of the box. There are two parameters that can be adjusted to correct for this.

The <offset> parameter is regularly used to correct an image's position within the box itself. Offset moves the image up within the box, by the number of pixels specified (again, make sure the number doesn't have a label and isn't a percentage). Note the differences between these two examples:

Pagecover example

No offset

Pagecover example

100px offset

In the "no offset" image, we see that the image itself is positioned so that the top of the image sits at the top of the Pagecover box. In many cases, this positioning is fine, and no modifications are needed. However, in the case of this image or others, a better position may be desired. The <offset> parameter is filled in with "100" in the second example, and that subsequently moves the image up 100px within the frame. Often, offset needs to be adjusted up or down to find an ideal positioning. It's also important to keep in mind that the size of the offset is dependent on the current size of the image, not the image's original size. In the 1000x500 example above, if the resulting image (defaulted as 670x335) were given an offset of 50, it would move the image 50px upwards after the image is resized, resulting in a 15px empty space under the image.

Sometimes, an image will be too small to fit within the vertical space in the box. In these cases, there are a couple remedies: either the box width can be increased (setting the <width> parameter to some number above 670), or the box height can be reduced. The first solution is usually not ideal, because expanding Pagecover width much beyond 670px wide can cause issues with the template displaying correctly on certain pages and for certain users with smaller screens (even if you cannot see these problems, they are often evident for others). The height of the box itself, however, can be adjusted independent of any other parameters, using the <height> parameter. The default value for Pagecover height is 300px, so in the case where an image is too small to display without showing empty space, Pagecover height should be reduced. Height can also be increased if so desired, to show more of an image if the image itself is more square-ish. Pagecover height is largely a matter of personal preference, but generally the template is not made taller than it is wide.

Banner adjustments

Banner basics

The "banner" refers to the rectangular box superimposed on the image within the larger Pagecover box. The banner is essentially a box within a box, and this helps us to understand its relationship with the rest of the elements of Pagecover. The banner is always set to float 20px above the bottom of the Pagecover box, and this height cannot be adjusted at the present time. The height of the banner is dependent on the amount of text within it, while the width of the banner is always 20px lower than the width of the Pagecover box.

Text entries

There are three parameters that allow text entry on the banner. The first parameter, <name>, is most important in most cases. If <name> is not filled in, the Pagecover template will use the name of the page that it is included on by default. There is also a <pagetype> parameter; this adds text along the right side of the banner, to the right of the <name> text. The <subtitle> parameter adds smaller text below the <name> and <pagetype> space.

<name>

<pagetype>

<subtitle>

Changing banner design

The banner's appearance, positioning, or visibility can be controlled through specific parameters. The banner can be set in one of three alignments within Pagecover: right-align (default), centered, or left-aligned, by use of the <align> parameter (this parameter has specific keywords; only the word 'left' will make it left-aligned, and only the word 'center' or 'centre' will center-align it).

The color of the banner can be controlled through two different parameters. For use on pages about particular games, the <generation> or <gen> parameter can be filled in with the game generation name: "The Sims" or "TS" for The Sims generation, "The Sims 2" or "TS2" for The Sims 2 generation, "The Sims 3" or "TS3" for The Sims 3 generation, "The Sims 4" or "TS4" for The Sims 4 generation, or "Medieval" or "TSM" for The Sims Medieval games - other "generations" may be added at later dates. Using this parameter will automatically recolor the banner to match The Sims Wiki's preset style for that particular generation. Please note that only one generation can be specified at a time.

The parameter <backgroundcolor> will give the banner a color you specify; this parameter accepts the standard html color names, as well as HEX color codes. This parameter always overrides <gen>/<generation>; if both parameters are specified, <backgroundcolor> takes precedence.

There may be circumstances under which you want the banner to disappear completely. This is possible through the <noname> parameter. The <noname> parameter accepts any text you input; if anything is added, it will remove the banner. This parameter supersedes all text parameters, color and alignment parameters, so if you're adding a banner with <noname> set to yes, filling in the other text parameters or color parameters is pointless.

Era icons

Pagecover has an unnamed parameter, that can be used to include icons from {{Eraicon}}. To use this, simply add a vertical bar, followed by a game abbreviation, as so:

|TS|TS3|TS4GT

This will add the appropriate icons to the right-side of the Pagecover template, and add the text "featured in:" to the right of any entry in the <pagetype> location.

Other points

• Table of contents alignment. When Pagecover was originally introduced to TSW, it automatically aligned the page's table of contents. This behavior was in many cases undesirable, so the feature was disabled by default. It can still be enabled by completing the <toc> parameter. You may come across Pagecover in use on pages on the wiki, where the parameter <toc> is visible but empty: "toc = ". In these cases, the <toc> parameter is not in use and should be deleted from the page.

• Non-static images and video. Pagecover is capable of displaying non-static images (e.g. GIF images), as well as video. Videos will not be resized by Pagecover, so it may often not be ideal to use it to display videos that are different sizes.

The Sims 4 Concept Art Timelapse

• Standards of use. There are no formal rules that govern how or where Pagecover is used within the wiki. However, over time, general guidelines of use have evolved. The most notable guideline is that Pagecover is not used on articles about Sims, pets, or families. Pagecover is generally not used on object pages, either. And, Pagecover is usually not used on short articles, but are instead used on "major" articles, though this determination is not objective. Note that these standards do not apply to user pages, user talk pages, fanon pages, user blogs, or other non-canon spaces within The Sims Wiki.

Conclusion

I hope I've given you plenty of information on how to get the most out of Pagecover. If you have any ideas for how to improve this guide or how to improve Pagecover itself, feel free to leave them in a comment below. If you have any questions about Pagecover, or if something here is unclear, please let me know.

Thanks for reading!

-- LiR ^{talk • blog • contribs} 19:02, December 19, 2015 (UTC)