---
title: "Full-Width Slideshow or Image"
canonical: "https://kb.uconn.edu/space/IKB/10785229120/Full-Width%20Slideshow%20or%20Image"
format: markdown
---
This article covers how to setup **MetaSlider **within the [Classic Editor](https://uconn.atlassian.net/wiki/spaces/IKB/pages/10785229120/Full-Width+Slideshow+or+Image#classic-editor) or the [Block Editor](https://uconn.atlassian.net/wiki/spaces/IKB/pages/10785229120/Full-Width+Slideshow+or+Image#block-editor).

## > Macro (anchor)

**Classic Editor**

Follow these instructions for a full-width slideshow or image at the top of your homepage. Examples of this can be found on the [UConn](http://uconn.edu/) website as well as [The Major Experience](http://tme.uconn.edu/) website. Note that your homepage must be using the [Page Builder](https://uconn.atlassian.net/wiki/spaces/IKB/pages/10784506428) and the **Template must be Blank**.

## Slideshow

1. Create the slideshow. See [Meta Slider slideshows](https://uconn.atlassian.net/wiki/spaces/IKB/pages/10782474636) for more information.
2. On the Meta Slider page, set the width for your slideshow to be at least 1800px.
3. On the right side of the Meta Slider page, under **Advanced Settings > Stretch**, select **100% wide output**.
4. Go to your homepage edit screen. Under **Page Attributes**, make sure that the **Template** is set to *Blank*.
5. On your homepage, create the top row with 1 column. In the **Row Styles**, open **Layout**, and underneath **Row Layout**, select *Full Width Stretched*.
6. Insert a Meta Slider widget into the row and select the slideshow. Do not add a title.
7. Add the following code to your Custom CSS to remove the space above the Meta Slider:

##### **SHERMAN THEME**

```
.home .entry-content {
margin-top:0
}
```

##### **HALE 2015 THEME**

```
.home #content {
padding:0
}
```

##### **PRUDENCE 2018 THEME**

```
.home #content .container { 
padding-top:0 
}  
.home .entry-content { 
margin-top:0 
}
```

#### Follow the instructions below if the image is left justified.

*Currently, extra CSS may need to be added for the image to stretch over the full screen. Follow the instructions below if the image is left justified.*

1. Upload the image. We suggest the width around **1900px** and adjust the height as needed.  
:warning: Note: It may be a good idea to crop the image before adding it to your homepage. Normally, the ideal full-width homepage image will be very wide and very short.
2. Go to your homepage edit screen. Under **Page Attributes**, make sure that the **Template** is set to *Blank*.
3. On your homepage, create the top row with 1 column. In the **Row Styles**, open **Layout**, and underneath **Row Layout**, select **Full Width Stretched**.
4. Insert an Image widget into the row and select the image. Do not add a title. Add alternate text.
5. Add the following code to your Custom CSS:
  **SHERMAN THEME**
  **HALE 2015 THEME**
  **PRUDENCE 2018 THEME**
6. If your image is Left Justified and not fully stretched, add the following to your Custom CSS:
  **CSS **

## > Macro (anchor)

**Block Editor**

### Full Width Image

Two parameters need to be set to make an image span the full width of the page, the **Block Width Options** and the **Image Alignment.** 

#### Block Width Options

***Block width options are only available for the following blocks: ****Group****, ****Row****, ****Stack****, ****Grid***

1. Add a *Group*, *Row*, *Stack*, or *Grid* block.
2. On the right side of the screen, in **Block Width Options** choose *Full Width Stretch*.

![image](media://742a884c-e71b-486e-832d-8daeee854938)

#### Image Alignment

1. Add an *Image* block to the block you just created with using the step above.
2. Click on the image and from the contextual menu above it, choose the image alignment icon.
3. When the dropdown appears, choose *Full Width*
4. Save page

![image](media://e074e5d1-eda3-454c-9856-b251c4ce0b12)