As of February 2021 the Journalism front facing websites used in the news day assessments have been updated and moved to a WordPress multisite installation. The old MA News site is being retired and a New News site for 1st year undergrads have been added to the portfolio. The sites are:
- Sheffield Wire – www.sheffieldwire.co.uk (New MA News Site replacing Jusnews)
- ShefNews – www.shefnews.co.uk (Redesigned BA Y2/3 News Site)
- ShefLive – www.sheflive.co.uk (New BA Y1 News Site)
These sites can all be viewed publicly using the wed addresses above. To log into, edit and create posts for these sites students and stall will need to be running the university VPN service. Below detail video tutorials about the Basic operation of the site including:
- Logging in to WP News Site
- Creating a Post
- Using the Media Gallery
- Setting the top stories for ShefNews and ShefLive
- Setting the Top Story for Sheffield Wire
- Setting up and Using Categories
- Embedding Media
- Embedding Carousel / Gallery in Posts
- Setting Featured Images to display on Social Media Feeds
- Image size guide (optimal sizes for images to be uploaded)
The sites use LDAP authentication to log in meaning that you should only need to use your normal university username and password. If you are having problems with logging in it may be that your username has not yet been added to the site, please contact the Learning Technologist to add you. robert.pashley@sheffield.ac.uk
Guide to Image sizes in your WordPress Site
Finding the perfect image sizes for your Divi website depends on three main factors:
- aspect ratio: the height and width of your image.
- column layout: the maximum width of your image.
- responsiveness: the changes made to the dimensions of your image on different screen sizes.
In the sections below I’ll show in detail how an understanding of these three factors can be used throughout Divi, resulting in perfect image sizes for any use case.
Image Optimization Guidelines
Image Aspect Ratio (16:9, 4:3, 3:4)
Aspect ratio expresses the proportional dimensions of the width and height of an image or screen. The number on the left of the colon represents the width (x axis) and the number on the right of the colon is the height (y axis). The two most popular aspect ratios are 4:3 and 16:9. These should look familiar to you if ever adjusted your TV screen or monitor settings before. The 4:3 aspect ration is the standard screen size for older TV’s and monitors and has a more box-like display. The newer high definition televisions and monitors today have the 16:9 aspect ratio which has a wider display. The 3:4 aspect ratio is useful for displaying portraits.
For this post, I will be basing all recommended image dimensions on these aspect ratios. If you haven’t already done so, you can check out Divi’s image templates to see the standard sizes and aspect ratios recommended for your images.
Optimize Images Before You Upload
It is always best to optimize (resize, compress, crop, etc…) your images before uploading them to WordPress. Also try your best to keep all of your image file sizes between 60kb and 200kb. That way you aren’t slowing your page load time down too much. For a complete guide on how to optimize your images, go here.
Don’t Forget SEO
When it comes to reading images, search engines rely on the image’s filename, ‘alt’ text, captions, file type, file size, etc… This info is placed in the img tag which displays your image. Make sure you are adding this info to your images whenever uploading a new image to your media gallery.
File Formats
In general, most images on the web are either in JPEG, PNG, of GIF format. JPEG’s are good for most situations because of its compatibility, use of color, and small file size.
JPEG’s should be used for all of your full color photographs like featured images and background images.
PNG is also a very compatibile format for the web. PNG’s are great for smaller images with a lot of detail. The PNG format also supports transparent background capability which is perfect for logos and graphical elements.
GIF’s are good for small images with limited color. GIF’s are unique because they can be animated, which is sometimes useful.
Image Dimension Guidelines Based on News Site Column Layouts
The following guidelines for image dimensions are based on News Site default layout settings. This includs a content width of 1080px and a gutter width of 3. Changing these settings may require you to adjust the dimensions of your images slightly.
The general rule of thumb is to have your images be at least as wide as the column in which it sits. Here are the dimensions you need to have for your image according to each column layout.
This doesn’t address the height your images need to be. So, here is a list of dimensions according to the 4:3 and 16:9 aspect ratios. This is helpful to keep your images at a width and height that scales appropriately for mobile.
The following image dimensions follow the 16:9 aspect ratio standard
1 column: 1080 x 608
¾ column: 795 x 447
⅔ column: 700 x 394
½ column: 510 x 287
⅓ column: 320 x 181
¼ column: 225 x 128
The following image dimensions follow the 4:3 aspect ratio standard
1 column: 1080 x 810
¾ column: 795 x 597
⅔ column: 700 x 526
½ column: 510 x 384
⅓ column: 320 x 241
¼ column: 225 x 170
Recent Comments