Course Rep of the Month Winners

Adding new winners

1. Go to page

   Go to the Course Rep of the Month Winners page.

2. Edit the page

   Hit the pencil in the navigation bar and select 'edit page' from the dropdown.

3. Paste in a new dropdown

   Copy and paste the code below into the page. It includes three winners, one per School. The latest month should go at the top of the list.

   <div class="dropdown">
   	<div class="dropdown-title">
   		<h5>Month and year, e.g. January 2025</h5>
   	</div>
   	<div class="dropdown-content">
   		<ul class="winners-grid">
   			<li>
   				<img src="/asset/Organisation/26506/no_pic.jpeg?thumbnail_width=540&thumbnail_height=540&resize_type=CropToFit" alt="Winner silhouette" />
   				<div class="winner-details">
   					<h6>Name</h6>
   					<strong>Faculty of Humanities and Social Sciences</strong>
   					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   				</div>
   			</li>
   			<li>
   				<img src="/asset/Organisation/26506/no_pic.jpeg?thumbnail_width=540&thumbnail_height=540&resize_type=CropToFit" alt="Winner silhouette" />
   				<div class="winner-details">
   					<h6>Name</h6>
   					<strong>Faculty of Science and Engineering</strong>
   					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   				</div>
   			</li>
   			<li>
   				<img src="/asset/Organisation/26506/no_pic.jpeg?thumbnail_width=540&thumbnail_height=540&resize_type=CropToFit" alt="Winner silhouette" />
   				<div class="winner-details">
   					<h6>Name</h6>
   					<strong>School of Medicine and Dentistry</strong>
   					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   				</div>
   			</li>
   		</ul>
   	</div>
   </div>

4. Export, name and upload your images

   Export your images at 540x540px and upload them to the page. Don't forget to add in alt text as well - this can just be the winner's name. If no photo has been provided, leave it as the placeholder image already provided in the code. If you're not able to export the image at a specific size, add this line of code to the image path:

   ?thumbnail_width=540&thumbnail_height=540&resize_type=CropToFit

   This will crop the image automatically. For example, your final image path would look like this:

   <img src="/pageassets/yourvoice/reps/coursereps/rewards/winners/nov24-isabella.jpg?thumbnail_width=540&thumbnail_height=540&resize_type=CropToFit" alt="Isabella Maria Mahmood" />

5. Update the content

   Update the month and year in the dropdown title, and then update the name and bio for each winner.

6. Publish and check it over

   Save your page using the 'publish' option and then check the page over to confirm everything looks correct.