Card Docs

How to Upload Images on OU Campus

Please see tutorials on the UVU Web Community Resources website. I suggest you look through and bookmark this resource.

How to Edit Existing Cards

1. In the relavent page in OU Campus, click on the green “Edit Region” pencil button above the card you want to edit.
2. Use the rich text editor to change the content.
   • The content hierarchy follows this pattern:
     • Image
     • Heading (event title)
     • Sub heading (time, etc; bolded)
     • Body (Event description)
     • Button(s) (Links to registration, etc.)
   • Edit the card text content as you would any MS Word document.
   • To change Button URL: In the editor, click on the button area. Then, on the toolbar, on the top row, find the chain link button.
     • There are two, click on the one on the left. If you hover over it, it says “Insert/Edit Link”.
   • Replace or add link as needed. Don’t forget to update the “Text to display” field and create a description in the “Title” field. This last part is very important for accessibility.
   • “Target” should always say “New window” and “Class” should always say “Bordered Button”.
   • To add multiple buttons: You will have to edit some code.
     • To access the code, find the “<>” button. It is located between the jigsaw and copyright buttons on the second row of the toolbar.
     • Once you open the Card content’s source code, locate <div class="display-flex flex-row"> This code creates a button “row”. You can add a second button on the same row by duplicating the code beginning with <a class="button-border"... and ending with </a>.
     • Copy and paste that code adjacent to itself to create a second button.
     • If you need a second row of buttons, copy and paste the code beginning with <div class="display-flex flex-row"> and ending with </a></div> adjacent to itself.
     • If something breaks, do not Publish the page. Submit a ticket with WDS and we’ll get it fixed ASAP.
3. Adding or replacing an image.
   • Make sure you uploaded an image into the image directory. (See above.)
   • Click on the old/placeholder image.
   • In the editor toolbar, click on the image icon; it is between a video icon and the text color icon, on the second row.
   • In the Source field, click on the folder icon and find the image you uploaded.
   • Optional: Crop the image into a 3:2 aspect ratio, to match the other image sizes.
   • Make sure your image is Published, otherwise it will not show up on the site. See tutorial link above for more details.

How to Create New Cards

The event pages include a responsive grid of Event Cards. Though the page may display only 3 or 5 cards, there are hidden blank regions ready to be populated with new Cards.

1. To create a new Card, we must first copy the source code of an existing Card.
2. In the relevant page in OU Campus, click on the green “Edit Region” pencil button above the card you will copy.
3. Click on the “<>” button from the second row of the editor toolbar. It is located between the Copyright and Jigsaw buttons.
4. Copy all the code, but do not remove any of it. Click “OK” to close the modal window. Click the Save button on the editor to leave the Region.
5. Once the page reloads, click the green “Edit Region” pencil button above the first blank space after the last Card.
6. Once again, click on the “<>” button and paste the code you copied.
7. Edit the card as you normally would.
8. If something breaks, do not Publish the page. Submit a ticket with WDS and we’ll get it fixed ASAP.

Questions

If you have any questions or concerns not answered by this documentation or the demo, please submit a ticket or look through the Web Community Resources.