User:Chlod/Full-width image

This is an easy method to add full-width images to userpages. For an example, see User:Chlod (or User:Chlod/Gallery).


 * 1) Create a page in the TemplateStyles sandbox with the following content.
 * You can use the following box to create the page. Replace with your username.
 * Place the following code in the CSS file, and replace the URL with the image that you want. You may use a downscaled version in order to cut download times on large images for slow connections. If the image is not that large (less than around 4000px in width), you can simply use the original file anyway.
 * 1) Move the newly-created CSS file to your userpage, usuallly Special:MyPage/userpage.css (where   is your userpage, e.g.  ).
 * 2) Add the following wikitext anywhere in your userpage, where   is where you moved the CSS file.
 * 3) IMPORTANT: Since the full-width image is not clickable to show image details, you must provide attribution to the original file if the file requires attribution (such as CC BY-SA-licensed images). This must be in the form of a link to the original image's page on Commons, preferably with the name of the image author. For further instructions, see Commons:Credit line.
 * 4) * If the image does not require attribution or is in the public domain (and you better be sure that it is), then you can skip this part.
 * 5) ✅! You should now have a full-width image on your userpage. If you'd like to add content in front of the full-width image, simply add content between the   tags in Step 3. You may also want to  watchlist this page for updates.
 * 1) IMPORTANT: Since the full-width image is not clickable to show image details, you must provide attribution to the original file if the file requires attribution (such as CC BY-SA-licensed images). This must be in the form of a link to the original image's page on Commons, preferably with the name of the image author. For further instructions, see Commons:Credit line.
 * 2) * If the image does not require attribution or is in the public domain (and you better be sure that it is), then you can skip this part.
 * 3) ✅! You should now have a full-width image on your userpage. If you'd like to add content in front of the full-width image, simply add content between the   tags in Step 3. You may also want to  watchlist this page for updates.

FAQ

 * Q: Why is the page first created in a TemplateStyles sandbox subpage?
 * A: The CSS file needs to be the  content model, which is only available for CSS files created in the Template namespace. CSS files created in userspace take on the   content model, which can't be used in.
 * Q: Can I use images from other websites or locally-uploaded images on this wiki?
 * A: No, this is blocked by TemplateStyles. You can only use images from Wikimedia Commons. This is to avoid possible copyright issues.
 * Q: Does this work for SVGs?
 * A: It should.
 * Q: Can I modify someone else's userpage CSS?
 * A: No, you can only modify your own.
 * Q: What effect does this have on image usage?
 * A: Loading the image like this doesn't list it on the a file's "Global file usage" list. If you want it to show up there (such as when using images that are low-use and could be deleted), you can link it inside of the  div, then use the following additional CSS to prevent it from showing up: