Images: Difference between revisions

Latest revision as of 14:21, 10 July 2026

This section covers adding images to your website. Swarthmore webpages are set up to allow editors to quickly and easily add an image at the top of any webpage. This location is called the Primary Image and is the most common method for adding images to a webpage.

Editors can also choose to add an image within the body copy of a page. This option involves a few more steps, but it allows editors to place images anywhere within the body content.

Images can also be added through many of the available components. This is covered in the Components section.

Website homepages also provide additional layout options, including the ability to display two images or a large full-span image.

Alt Text is Required

All images added to the website must include alt text.

Alt text is a written description of an image. It is displayed when an image cannot be loaded and is essential for visitors using assistive technologies such as screen readers, those browsing with images disabled, or those with limited bandwidth.

The WCAG Alt Decision Tree is a useful resource for deciding whether an image requires alt text and what that description should include. Think about how the image relates to the surrounding content. If it adds meaning or improves understanding, it should include meaningful alt text.

Writing effective alt text is a skill. One helpful approach is to imagine describing the image to someone over the phone so they understand both what it shows and why it is included. For additional guidance and examples, see Alt Text as Poetry.

Image Editing

Drupal does not include built-in image editing tools. Any cropping, resizing, color correction, or file format conversion should be completed before uploading the image. You can use software such as Adobe Photoshop or free online editors like Canva or Pixlr.

6.1 Adding a Primary Image

1. The Primary Image field is located below the Title and Subtitle fields and above the Body field. This is where editors add an image that appears at the top of the webpage.

2. Click the Insert an Image button. A window titled Insert an Image will appear.

Screenshot showing the Primary Image field and the Insert an Image button.

Figure: The Primary Image field is located above the Body field.

3. In the Insert an Image window, select Upload Image to upload a new image or Select Image to choose an image that has already been uploaded to the site's image library.

4. Select the appropriate image using the radio button to its left.

5. Click the Select Image button in the lower-left corner.

Screenshot of the Insert an Image dialog showing the Upload Image and Select Image options.

Figure: Select an existing image or upload a new one.

6. A thumbnail preview will now appear. Whenever you add an image to a webpage, you must include alternative text.

7. Under Image Alignment, choose one of the following options:

Centered Above Content — Best for large landscape images. The image is displayed above the body content.
Floating Right — Best for portrait or smaller images. The image is displayed to the right of the body content and the text wraps around it. If a large landscape image is used, Drupal automatically scales it down before wrapping the text.

Centered Above Content

Example of a centered primary image displayed above the page content.

Figure: Centered Above Content image alignment.

Floating Right

Figure: Floating Right image alignment.

8. Optionally, add an image caption to provide additional context for readers.

Screenshot showing the image caption field for a primary image.

Figure: An optional caption can be added beneath the primary image.

6.2 Adding an Image in the Body Copy

You can also choose to add images directly within the body copy rather than using the primary image at the top of the page. This process involves a few additional steps, but allows you to position images closer to the content they reference.

1. Place your cursor where you want the image to appear.

2. Click the Add Image using Image Browser button.

Screenshot showing the Add Image using Image Browser button in the editor toolbar.

Figure: Select the Add Image using Image Browser button to insert an image into the body copy.

3. In the Insert an Image window, choose Upload Image to upload a new image or Select Image to use an image that has already been uploaded to the website.

4. Select the desired image using the radio button.

5. Click the Select Image button in the lower-left corner.

Screenshot of the Insert an Image dialog used for body copy images.

Figure: Select an existing image or upload a new one.

6. The image will now appear in the body copy.

7. Use the image toolbar to manage the image's properties.

Screenshot showing an inserted image and its editing toolbar.

Figure: After inserting an image, use the toolbar to manage its properties.

The Insert Image in Body Copy toolbar provides several options:

Screenshot identifying the controls available for images inserted into the body copy.

Figure: The image toolbar provides controls for accessibility, captions, links, and image styles.

Manage Alt Text / Decorative Image — Allows you to add alternative text or mark the image as decorative. All meaningful images require alt text to meet Swarthmore's accessibility standards. Decorative images should only be used when an image conveys no additional information beyond the surrounding content.

Figure: Use this dialog to add alt text or mark an image as decorative.

Figure: Images that are purely decorative can be marked as decorative instead of providing alt text.

Toggle Caption On/Off — Shows or hides the image caption field.

Screenshot showing how to enable or disable an image caption.

Figure: Toggle the caption field on or off.

Image Link — Allows you to make the image a link. See Links for more information.

Screenshot showing the Image Link option.

Figure: Images can be configured to link to another page or resource.

Standard Image Alignment / Caption Styles — Controls image alignment and caption placement.
1. Caption Below — The image remains full width and centered. The caption appears beneath the image.
2. Caption Right — The image remains full width and floats left. The caption appears to the right.
3. Image Floated Left Caption Below — The image is reduced to approximately 50% width and floated left. The caption appears below, and body text wraps around both.
4. Image Floated Right Caption Below — The image is reduced to approximately 50% width and floated right. The caption appears below, and body text wraps around both.

Screenshot showing the available caption and alignment styles.

Figure: Choose an image alignment and caption style appropriate for your content.

Gray Image Background Captions — Applies a gray background behind the image and caption.
1. Gray Image Background / Image Centered — The image remains full width and centered. The caption appears below.
2. Gray Image Background / Image Floated Left Caption Below — The image is reduced to approximately 50% width and floated left. The caption appears below, and body text wraps around both.
3. Gray Image Background / Image Floated Right Caption Below — The image is reduced to approximately 50% width and floated right. The caption appears below, and body text wraps around both.

Recommendation

The gray background caption styles are an older design that is no longer in active use. It is recommended that you use one of the standard caption styles listed above.

Screenshot showing the legacy gray background caption styles.

Figure: Legacy gray background caption styles.

Clear Styles — Removes any applied caption or alignment styles and returns the image to its default centered display with no caption.

Figure: Use Clear Styles to remove all image styling and captions.

6.3 Homepage Images

The homepage is unique in that it offers additional header image layout options. These include:

One or Two Images Aligned Left — Display either one image or two stacked images to the left of the website title.
One or Two Images Aligned Right — Display either one image or two stacked images to the right of the website title.
Full-Span Image — Display a single image that spans the full width of the page. The page title is overlaid on the lower-left corner of the image.

Full-Span Images

The Full-Span Image layout requires images with specific dimensions in order to display correctly. See Recommended Image Sizes for more information.

Examples:

One Image Aligned Left

Example of a homepage using a single image aligned to the left of the page title.

Figure: Homepage layout with one image aligned left.

Two Images Aligned Right

Example of a homepage using two stacked images aligned to the right of the page title.

Figure: Homepage layout with two images aligned right.

Full-Span Image

Example of a homepage using a full-span header image with the page title overlaid.

Figure: Homepage layout using a full-span image.

The homepage header layout is managed by editing the homepage.

Select the desired header layout from the dropdown menu.
Optionally enable the overlay toggle to apply a subtle opaque filter to the Full-Span Image. This improves the readability of the page title displayed over the image.
Add a new image (or a second image, depending on the selected layout).
View the current image and alt text. You can also replace or remove the image.
Save the homepage as either Draft or Published.
Click Save to commit your changes or Cancel to discard them.

Screenshot showing the homepage header image settings, including layout selection and image management options.

Figure: Homepage header image configuration options.

6.4 Recommended Image Sizes

The following image style guide shows the recommended image dimensions for pages, components, profiles, news, and events.

Image Size Guidelines

All dimensions are listed in pixels (width × height). For photographs, save images as JPEG (.jpg) files using approximately 70% compression to achieve a good balance between image quality and file size.

6.4.1 Recommended Sizes for Header Images

Image Type	Retina (WxH)	Standard (WxH)	Preferred Ratio	Preferred Orientation
Homepage - Single Image	1756 x 1170	878 x 585	3:2, 16:9	landscape
Homepage - Double Image (Front)	1056 x 704	528 x 352	3:2, 16:9	landscape
Homepage - Double Image (Rear)	880 x 662	440 x 331	3:2, 16:9	landscape
Homepage - Full Width	3500 x 1360	1750 x 680	custom	landscape
Standard Page	1524 x 940	762 x 470	3:2, 16:9	landscape

6.4.2 Recommended Sizes for Components

Image Type	Retina (WxH)	Standard (WxH)	Preferred Ratio	Preferred Orientation
Feature	1530 x 1046	765 x 523		landscape
Feature Link List	1300 x 858	650 x 429		landscape
Image Slider (Slideshow)	1600 x 1000	800 x 500	8:5	landscape
Image Slider (Gallery Thumbnails)	720 x 476	360 x 238	16:9	landscape
Media Object List	960 x 600	480 x 300	8:5	landscape
Multi-Column Callout	600 x 600	300 x 300	1:1	landscape
Image Callout	1560 x 1040	780 x 520		landscape
Full Width Callout	3500 x 1240	1750 x 620	custom	landscape
Callout on Image	1300 x 900	650 x 450	3:2, 16:9	landscape
Feature Story Callout (Left)	1530 x 1046	765 x 523	3:2	landscape
Feature Story Callout (Right)	1070 x 698	535 x 349	3:2	landscape
Audio (Thumbnail)	298 x 298	149 x 149	1:1	square
Ambient Video (Fallback Image)	3500 x 1464	1750 x 732	custom	landscape

6.4.3 Recommended Sizes for Profiles

Image Type	Retina (WxH)	Standard (WxH)	Preferred Ratio	Preferred Orientation
Profile Headshot	372 x 466	186 x 233	4:5	portrait

6.4.4 Recommended Sizes for News and Events Pages & Thumbnails

Image Type	Retina (WxH)	Standard (WxH)	Preferred Ratio	Preferred Orientation
News Page (Standard)	-	-	-	-
News Page (Featured)	2880 x 1266	1440 x 633	16:9, 3:2	landscape
News Feed Pane (Standard Thumbnail)	560 x 320	280 x 160	16:9, 3:2	landscape
News Feed Pane (Featured Thumbnail)	1760 x 960	880 x 480	16:9, 3:2	landscape
News Feed Pane (Full Page Listing)	840 x 480	420 x 240	16:9, 3:2	landscape
Events Feed Pane (Thumbnail)	840 x 532	420 x 335	16:9, 3:2	landscape
Events Feed Pane (Full Page Listing)	840 x 670	420 x 335	16:9, 3:1	landscape

@@ Line 22: / Line 22: @@
 == 6.1 Adding a Primary Image ==
-# The '''Primary Image''' field is located below the '''Title''' and '''Subtitle''' fields and above the '''Body''' field. This is where editors add an image that appears at the top of the webpage.
+. The '''Primary Image''' field is located below the '''Title''' and '''Subtitle''' fields and above the '''Body''' field. This is where editors add an image that appears at the top of the webpage.
-# Click the '''Insert an Image''' button. A window titled '''Insert an Image''' will appear.
+. Click the '''Insert an Image''' button. A window titled '''Insert an Image''' will appear.
 {{Screenshot|image1.png|647px|Screenshot showing the Primary Image field and the Insert an Image button.|The Primary Image field is located above the Body field.}}
-# In the '''Insert an Image''' window, select '''Upload Image''' to upload a new image or '''Select Image''' to choose an image that has already been uploaded to the site's image library.
+. In the '''Insert an Image''' window, select '''Upload Image''' to upload a new image or '''Select Image''' to choose an image that has already been uploaded to the site's image library.
-# Select the appropriate image using the radio button to its left.
-# Click the '''Select Image''' button in the lower-left corner.
+. Select the appropriate image using the radio button to its left.
+. Click the '''Select Image''' button in the lower-left corner.
 {{Screenshot|image2.png|647px|Screenshot of the Insert an Image dialog showing the Upload Image and Select Image options.|Select an existing image or upload a new one.}}
-# A thumbnail preview will now appear. Whenever you add an image to a webpage, you '''must include alternative text'''.
+. A thumbnail preview will now appear. Whenever you add an image to a webpage, you '''must include alternative text'''.
-# Under '''Image Alignment''', choose one of the following options:
-## '''Centered Above Content''' — Best for large landscape images. The image is displayed above the body content.
+. Under '''Image Alignment''', choose one of the following options:
-## '''Floating Right''' — Best for portrait or smaller images. The image is displayed to the right of the body content and the text wraps around it. If a large landscape image is used, Drupal automatically scales it down before wrapping the text.
+* '''Centered Above Content''' — Best for large landscape images. The image is displayed above the body content.
+* '''Floating Right''' — Best for portrait or smaller images. The image is displayed to the right of the body content and the text wraps around it. If a large landscape image is used, Drupal automatically scales it down before wrapping the text.
 '''Centered Above Content'''
@@ Line 46: / Line 50: @@
 {{Screenshot|Screenshot 2024-07-09 at 6.32.08 PM.png|536px|Example of a primary image using the Floating Right alignment.|Floating Right image alignment.}}
-# Optionally, add an image caption to provide additional context for readers.
+. Optionally, add an image caption to provide additional context for readers.
 {{Screenshot|image3.png|743px|Screenshot showing the image caption field for a primary image.|An optional caption can be added beneath the primary image.}}
-== 6.2) Adding an Image in the Body Copy ==
+== 6.2 Adding an Image in the Body Copy ==
+You can also choose to add images directly within the body copy rather than using the primary image at the top of the page. This process involves a few additional steps, but allows you to position images closer to the content they reference.
+. Place your cursor where you want the image to appear.
+. Click the '''Add Image using Image Browser''' button.
+{{Screenshot|image_body1.png|1069px|Screenshot showing the Add Image using Image Browser button in the editor toolbar.|Select the Add Image using Image Browser button to insert an image into the body copy.}}
+. In the '''Insert an Image''' window, choose '''Upload Image''' to upload a new image or '''Select Image''' to use an image that has already been uploaded to the website.
+. Select the desired image using the radio button.
+. Click the '''Select Image''' button in the lower-left corner.
+{{Screenshot|f71d702b-60d2-4865-91e9-41f58da0e6a3.png|640px|Screenshot of the Insert an Image dialog used for body copy images.|Select an existing image or upload a new one.}}
+. The image will now appear in the body copy.
+. Use the image toolbar to manage the image's properties.
+{{Screenshot|image_insert1.png|1000px|Screenshot showing an inserted image and its editing toolbar.|After inserting an image, use the toolbar to manage its properties.}}
+The '''Insert Image in Body Copy''' toolbar provides several options:
-You can also choose to add images directly in the body copy rather than using the primary image located at the top of the page template. This process involves more steps, but allows you to position images closer next to the content that references it.
+{{Screenshot|control1.png|409px|Screenshot identifying the controls available for images inserted into the body copy.|The image toolbar provides controls for accessibility, captions, links, and image styles.}}
-# Put your cursor where you want the image to appear in the body copy
+# '''Manage Alt Text / Decorative Image''' — Allows you to add alternative text or mark the image as decorative. All meaningful images require alt text to meet Swarthmore's accessibility standards. Decorative images should only be used when an image conveys no additional information beyond the surrounding content.
-# Click the '''Add Image using image browser''' button
-[[File:image_body1.png|1069px|alt=image_body1.png]]
+{{Screenshot|Screenshot 2024-08-06 at 3.33.53 PM.png|398px|Screenshot of the Alt Text dialog.|Use this dialog to add alt text or mark an image as decorative.}}
-# In the '''Insert an Image''' window (see below), you can select '''Upload Image''' to upload a new image into Drupal or choose '''Select Image''' if you wish to use an image that has been previously uploaded into the website’s image folder.
-# Select the appropriate image from the list using the radio button to the left.
-# Then click the '''Select Image''' button located in the lower left corner.
-[[File:f71d702b-60d2-4865-91e9-41f58da0e6a3.png|640px|alt=f71d702b-60d2-4865-91e9-41f58da0e6a3.png]]
+{{Screenshot|Screenshot 2024-08-06 at 3.35.03 PM.png|212px|Screenshot showing the Decorative Image option.|Images that are purely decorative can be marked as decorative instead of providing alt text.}}
-# The image will now appear in the body copy
-# Use the function bar at the top to manage the image properties (see more below)
-[[File:image_insert1.png|1000px|alt=image_insert1.png]]
+# '''Toggle Caption On/Off''' — Shows or hides the image caption field.
-The '''Insert image in body copy''' function bar has several abilities:
-[[File:control1.png|409px|alt=control1.png]]
+{{Screenshot|caption_toggle.png|776px|Screenshot showing how to enable or disable an image caption.|Toggle the caption field on or off.}}
-# '''Manage Alt Text / Decorative Image''' - This menu item allows you to add alternate text to the image. All images require alt text in order meet Swarthmore’s accessibility standards. Alt text is a description of what is happening in the image. You can also indicate if the image is purely decorative. Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.
-[[File:Screenshot 2024-08-06 at 3.33.53 PM.png|398px]][[File:Screenshot 2024-08-06 at 3.35.03 PM.png|212px]]
+# '''Image Link''' — Allows you to make the image a link. See [[The Editor#2.8_Links|Links]] for more information.
-# '''Toggle Caption On/Off''' - Toggles the image caption field to appear or disappear so that you can include a caption to provide context of the image to the reader.
-[[File:caption_toggle.png|776px|alt=caption_toggle.png]]
-# '''Image Link''' - allows you make the image a link. Learn more about [https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/172949560/The+Editor#2.8)-Links how links work].
-[[File:image_link.png|819px|alt=image_link.png]]
+{{Screenshot|image_link.png|819px|Screenshot showing the Image Link option.|Images can be configured to link to another page or resource.}}
-# Standard Image Alignment Caption - allows you to manage the standard alignment options for captions. These include:
-* '''Caption Below''' - the image will remain full size and centered. The caption will appear below.
+# '''Standard Image Alignment / Caption Styles''' — Controls image alignment and caption placement.
-* '''Caption Right''' - the image will remain full size and floated left. The caption will appear to the right.
+## '''Caption Below''' — The image remains full width and centered. The caption appears beneath the image.
-* '''Image Floated Left Caption Below''' - the image will be reduced 50% and floated left. The caption will appear below. The body copy will wrap around both image and caption.
+## '''Caption Right''' — The image remains full width and floats left. The caption appears to the right.
-* '''Image Floated Right Caption Below''' - the image will be reduced 50% and floated right. The caption will appear below. The body copy will wrap around both image and caption.
+## '''Image Floated Left Caption Below''' — The image is reduced to approximately 50% width and floated left. The caption appears below, and body text wraps around both.
+## '''Image Floated Right Caption Below''' — The image is reduced to approximately 50% width and floated right. The caption appears below, and body text wraps around both.
-[[File:caption_options1.png|969px|alt=caption_options1.png]]
+{{Screenshot|caption_options1.png|969px|Screenshot showing the available caption and alignment styles.|Choose an image alignment and caption style appropriate for your content.}}
-# '''Gray Image Background Captions''' - creates a gray background around the image and caption.
-{{Card|variant=info|title=Info|content=Note: the gray image background captions is an older style no longer in active use. It is recommended that you use the standard caption styles listed above.}}
+# '''Gray Image Background Captions''' — Applies a gray background behind the image and caption.
+## '''Gray Image Background / Image Centered''' — The image remains full width and centered. The caption appears below.
+## '''Gray Image Background / Image Floated Left Caption Below''' — The image is reduced to approximately 50% width and floated left. The caption appears below, and body text wraps around both.
+## '''Gray Image Background / Image Floated Right Caption Below''' — The image is reduced to approximately 50% width and floated right. The caption appears below, and body text wraps around both.
-* '''Gray image background / Image Centered''' - the image will remain full size and centered. The caption will appear below.
+{{Callout|type=tip|title=Recommendation|content=The gray background caption styles are an older design that is no longer in active use. It is recommended that you use one of the standard caption styles listed above.}}
-* '''Gray image background''' / '''Image Floated Left Caption Below - '''the image will be reduced 50% and floated left. The caption will appear below. The body copy will wrap around both image and caption.
-* '''Gray image background''' / '''Image Floated Right Caption Below - '''the image will be reduced 50% and floated right. The caption will appear below. The body copy will wrap around both image and caption.
-[[File:grey_image1.png|966px|alt=grey_image1.png]]
+{{Screenshot|grey_image1.png|966px|Screenshot showing the legacy gray background caption styles.|Legacy gray background caption styles.}}
-# '''Clear Styles''' - this will clear any caption styles and return it to image centered, no caption.
-[[File:clear.png|967px|alt=clear.png]]
+# '''Clear Styles''' — Removes any applied caption or alignment styles and returns the image to its default centered display with no caption.
-== 6.3) Homepage Images ==
+{{Screenshot|clear.png|967px|Screenshot showing the Clear Styles option.|Use Clear Styles to remove all image styling and captions.}}
-The homepage is unique in that it allows editors some additional header image layout options. These include:
+== 6.3 Homepage Images ==
-# One or Two Images aligned left - you can include either a single image or two images (one stacked on top of the other) aligned left of the website title
+The homepage is unique in that it offers additional header image layout options. These include:
-# One or Two Images aligned right - you can include either a single image or two images (one stacked on top of the other) aligned right of the website title
-# Full-Span Image - a single full image that spans the full width of the page. The page title is overlaid on top of the image in the lower left corner.
-{{Card|variant=info|title=Info|content='''The Full-Span Image requires that you use an image with specific dimensions in order for it work properly. See '''[https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/edit-v2/182419458#6.4)-Recommended-Image-Sizes '''recommended images sizes''']''' for more information.'''}}
+# '''One or Two Images Aligned Left''' — Display either one image or two stacked images to the left of the website title.
+# '''One or Two Images Aligned Right''' — Display either one image or two stacked images to the right of the website title.
+# '''Full-Span Image''' — Display a single image that spans the full width of the page. The page title is overlaid on the lower-left corner of the image.
+{{Callout|type=important|title=Full-Span Images|content=The '''Full-Span Image''' layout requires images with specific dimensions in order to display correctly. See [[#6.4_Recommended_Image_Sizes|Recommended Image Sizes]] for more information.}}
 Examples:
-'''One Images Aligned Left'''
+'''One Image Aligned Left'''
-[[File:single_image_left.png|331px|alt=single_image_left.png]]
+{{Screenshot|single_image_left.png|331px|Example of a homepage using a single image aligned to the left of the page title.|Homepage layout with one image aligned left.}}
-'''Two Images Aligned Right '''
+'''Two Images Aligned Right'''
+{{Screenshot|double_image_right2.png|331px|Example of a homepage using two stacked images aligned to the right of the page title.|Homepage layout with two images aligned right.}}
-[[File:double_image_right2.png|331px|alt=double_image_right2.png]]
 '''Full-Span Image'''
-[[File:full_span_image1.png|331px|alt=full_span_image1.png]]
+{{Screenshot|full_span_image1.png|331px|Example of a homepage using a full-span header image with the page title overlaid.|Homepage layout using a full-span image.}}
-The homepage header layout of the homepage managed by editing the homepage.
+The homepage header layout is managed by editing the homepage.
-# A drop down that lets you select layout
+# Select the desired header layout from the dropdown menu.
-# This toggle will add a slightly opaque filter on top of the Full Span Image (only) that improves legibility of the Page title which is overlaid on top of the image in the lower left corner.
+# Optionally enable the overlay toggle to apply a subtle opaque filter to the '''Full-Span Image'''. This improves the readability of the page title displayed over the image.
-# Allows you add a new (or second) image to the header area
+# Add a new image (or a second image, depending on the selected layout).
-# Displays the current image, alt text. Allows you to replace the existing image or remove it
+# View the current image and alt text. You can also replace or remove the image.
-# When updating the image, you can save the page in DRAFT or PUBLISHED mode
+# Save the homepage as either '''Draft''' or '''Published'''.
-# Click Save to commit your changes or Cancel to stop.<br>
+# Click '''Save''' to commit your changes or '''Cancel''' to discard them.
-[[File:header_image_menu1.png|1064px|alt=header_image_menu1.png]]
+{{Screenshot|header_image_menu1.png|1064px|Screenshot showing the homepage header image settings, including layout selection and image management options.|Homepage header image configuration options.}}
-== 6.4) Recommended Image Sizes ==
+== 6.4 Recommended Image Sizes ==
-The following image style guide shows you the recommended image sizes that should be used for all pages and components.
+The following image style guide shows the recommended image dimensions for pages, components, profiles, news, and events.
-{{Card|variant=info|title=Info|content='''Important Tip: '''All dimensions are in pixels (width x height). Photos should be saved in .jpg format using 70% compression.}}
+{{Callout|type=tip|title=Image Size Guidelines|content=All dimensions are listed in '''pixels (width × height)'''. For photographs, save images as '''JPEG (.jpg)''' files using approximately '''70% compression''' to achieve a good balance between image quality and file size.}}
-== Recommended Sizes for Header Images ==
+=== 6.4.1 Recommended Sizes for Header Images ===
 {| class="wikitable"
@@ Line 178: / Line 199: @@
 |}
-== Recommended Sizes for Components ==
+=== 6.4.2 Recommended Sizes for Components ===
 {| class="wikitable"
@@ Line 267: / Line 288: @@
 |}
-== Recommended Sizes for Profiles ==
+=== 6.4.3 Recommended Sizes for Profiles ===
 {| class="wikitable"
@@ Line 284: / Line 305: @@
 |}
-== Recommended Sizes for News and Events Pages & Thumbnails ==
+=== 6.4.4 Recommended Sizes for News and Events Pages & Thumbnails ===
 {| class="wikitable"