The WYSIWYG styles will only appear in the Cascade editor and not on the live site or in the Cascade preview.
<h2 class="h5">PNG Image with filename as alt text</h2>
<p><img src="../../college-dls/college/images/card-image.png" alt="card-image.png" /></p>
<h2 class="h5">JPG Image with filename as alt text</h2>
<p><img src="../../college-dls/college/images/utsa-housing-reasons-featured-timesaving.jpg" alt="utsa-housing-reasons-featured-academics.jpg" /></p>
<h2 class="h5">Image with "Placeholder" alt text</h2>
<div><img src="../../college-dls/college/images/utsa-housing-reasons-featured-timesaving.jpg" alt="Placeholder" /></div>
<h2 class="h5">Image with no alt text</h2>
<div><img src="../../college-dls/college/images/utsa-housing-reasons-featured-timesaving.jpg" alt="" /></div>
/* components/06-WYSIWYG/01-style-rules/style-rules.scss */
/* BEGIN style-rules.scss */
div:has(img[alt $= ".jpg"])::after,div:has(img[alt $= ".png"])::after,div:has(img[alt $= "Placeholder"])::after,p:has(img[alt $= ".jpg"])::after,p:has(img[alt $= ".png"])::after,p:has(img[alt $= "Placeholder"])::after,div:has(img[alt = ""])::after,p:has(img[alt = ""])::after{
content: "Please update alt text to a describe the image";
background-color: $red;
color: $white;
padding: 3px;
margin-left: 5px;
border: 1px solid black;
}
a[href*="//sciences.utsa.edu"]::after,a[href*="//colfa.utsa.edu"]::after,a[href*="//uc.utsa.edu"]::after,a[href*="//honors.utsa.edu"]::after,a[href*="//housing.utsa.edu"]::after,a[href*="//hcap.utsa.edu"]::after,a[href*="//klesse.utsa.edu"]::after,a[href*="//business.utsa.edu"]::after,a[href*="//education.utsa.edu"]::after,a[href*="//graduateschool.utsa.edu"]::after,a[href*="//sds.utsa.edu"]::after{
content: "This external link might be internal instead";
background-color: $red;
color: $white;
padding: 3px;
margin-left: 5px;
border: 1px solid black;
}
a[href*="safelinks.protection.outlook.com"]::after{
content: "Link is an Outlook safelink";
background-color: $red;
color: $white;
padding: 3px;
margin-left: 5px;
border: 1px solid black;
}
a[href^="https://http"]::after{
content: "Remove starting https";
background-color: $red;
color: $white;
padding: 3px;
margin-left: 5px;
border: 1px solid black;
}
a[href^="https://walledev.it.utsa.edu/entity/open.act"]::after,a[href^="https://walle.it.utsa.edu/entity/open.act"]::after{
content: "Cascade link needs to be changed";
background-color: $red;
color: $white;
padding: 3px;
margin-left: 5px;
border: 1px solid black;
}
/* END style-rules.scss */
<h2 class="h5">PNG Image with filename as alt text</h2>
<p><img
src="{{path image1}}"
alt="card-image.png"
/></p>
<h2 class="h5">JPG Image with filename as alt text</h2>
<p><img
src="{{path image2}}"
alt="utsa-housing-reasons-featured-academics.jpg"
/></p>
<h2 class="h5">Image with "Placeholder" alt text</h2>
<div><img
src="{{path image2}}"
alt="Placeholder"
/></div>
<h2 class="h5">Image with no alt text</h2>
<div><img
src="{{path image2}}"
alt=""
/></div>