Category: How To…

Using Clemson Custom Embed Blocks

To help support commonly requested embeds that are not allowed directly in blogs.clemson.edu sites due to network blog security settings, we’ve created three custom blocks for you to use. These restrictions are related to WordPress roles and capabilities (such as unfiltered_html), which limit iframe usage in standard editors. You can read a bit more about unfiltered_html permissions here: https://wordpress.org/documentation/article/roles-and-capabilities/#unfiltered_html

Let’s get to it!

You can find these blocks in the “Clemson Blocks” category within the block editor.

Kaltura Video Embed

Step 1: Click the Kaltura Embed block.

Step 2: Enter the Kaltura Video ID.

• Go to your Kaltura media library
• Select your video
• Click the Share tab
• Copy the string at the end of the media page URL

Step 3: Enter the Kaltura Video Title (required for accessibility).

Tableau Dashboard Embed

Step 1: Enter the Tableau Dashboard URL.

• Open a public Tableau dashboard
• Click the Share button
• Click Copy Link

Step 2: Fill out the remaining fields:

• Dashboard Title (required for accessibility)
• Width
• Height

Note: Tableau dashboards will not display inside the WordPress editor due to browser security restrictions:

Refused to display 'https://public.tableau.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

This is expected behavior. The dashboard will display correctly in preview and after publishing.

ArcGIS Experience Dashboard Embed

Step 1: Enter the ArcGIS Experience Dashboard URL.

• Open a public ArcGIS Experience dashboard
• Copy the URL from your browser’s address bar

Step 2: Fill out the remaining fields:

• Dashboard Title (required for accessibility)
• Width
• Height

Summary

These custom blocks make it easy to safely embed external content while staying within WordPress security guidelines. Always include descriptive titles for accessibility and preview your post to confirm everything displays correctly.

We have added the “Blog Feed” feature to cascade. It can be added as a module in a new row, or added as a column widget in columns 6 cells or wider. Please follow the steps below to add to your page.

1. Select Blog Feed from the module selector or Widget Display list.
2. Fill in the name of the blog. This is the exact name in your url. For Example: “ows” in https://blogs.clemson.edu/ows/
3. Enter a numerical count of the amount of stories you wish to be displayed. Example: 1, 2, 5, 10, etc
4. Choose the blog format type. Default is “Basic Blog (No Images)”. This will not display any images. Posts with featured images will display a thumbnail image next to the listing if “Basic Blog (Display Images)” is chosen. The third option is a a standard list structure only showing and linking the titles of each post.
5. If applicable, fill in any categories. If multiple, separate by a comma.
6. If applicable, fill in any tags. If multiple, separate by a comma.

 

The new contact module is ready to implement on your pages.

**Remember, if you have used the module previously, you will have to update your pages to this new setup.

1. Navigate to your widgets folder, then click “Add Content” in the top nav
2. Navigate to Components > Widget.
3. Select “Contact Module” from the widget type.
4. Enter your desired data into the provided fields.
   1. These are the same fields in the previous set up, but your data will not be preserved from the previous setup.
   2. Recent updates to these fields were the abilities to toggle having either a custom link or a website contact and toggling on or off the social links.
5. Save and Publish your new widget
6. Next, navigate to your page and click “Edit”
7. Scroll down towards the bottom of the editor window, and you will see a new group labeled “Widget Module Area”. See attached screenshot.
8. Select Yes to display the area.
9. Choose the recently made widget from the widget chooser.
10. Repeat steps 6-9 per page as necessary.
11. Publish your page/s.
    1. Once your page has this setup published once, publishing all your pages will not be required for each update. you will only need to edit and publish the widget for it to reflect updates across all the pages!

Only the Contact module widget will work here, the other widget types will not display here and only will display in the left column. And vise versa.  The contact module widget will not display in the left column. Warning messages will display on your page if you accidentally assign the wrong widget type to an area.

We hope you guys find this new addition helpful, useful, and easy to implement. Please reach out with any questions, concerns, or issues.

It is important to use headings to structuring a page into sections and provide the user with an idea of what content will follow.

They are even more important for blind and vision impaired users as they allow content to be easily navigated – this means using heading levels rather than styling text with large or bold fonts. Headings are also good for search engine ranking.

• Organise your content into sections.
• Ensure that each section of content is identified by a heading.
• Ensure that each heading describes and identifies its section of content.
• Keep headings short and succinct.
• Ensure headings are properly nested within each section of the document. For example, a Heading 2 must follow a Heading 1; a Heading 3 must following a Heading 2 and so on within each section.
• Mark headings using HTML heading elements <h1> … <h6>. Increasing text size or using styles (e.g. emphasis or strong emphasis) is not the same as using heading elements.
• Avoid use of abbreviations and jargon in headings.

“Click here” and “read more” links should be updated immediately! Link text should be meaningful and make sense out of context. It should describe the purpose of a link and if linking to a download, also include the file type and file size, especially when it’s a large file that will require time to download.

• The best approach is to write link text that describes the purpose of the link without the help of surrounding text wherever possible (level AAA requirement).  Otherwise, write link text that describes the purposes of the link with surrounding elements and including the information needed to clarify the link before the link.
• Ensure link text is as short and concise as possible.
• Avoid using “click here” or “read more” or any other phrases that are ambiguous or unclear. Also avoid using URLs for link text.
• For links to email addresses, use the email address as the link text.
• For links to documents and files, include the file type (e.g. PDF, Word) and the file size within the link text.
• Meaningful links improves search engine ranking.
• Ensure that links to the same location have are referred to consistently, or use the same link text.
• Ensure that links to different locations do not use the same link text.

Have you ever wanted to add some colorful elements to your web page text? Sure, you can just change the text color but what if you want to take it up a notch and really make your text stand out? Panels and borders can be used to draw attention to special or important content. Simply add the class panel or border to your element, or to a div wrapped around many elements. Customize by also adding a brand color.

HTML with Orange Outline

<p class="border orange"><!--Your content goes here--></p>
<p class="panel orange"><!--Your content goes here--></p>

HTML with Sky Blue Panel

<h4 class="panel sky">Header</h4>

HTML with Regalia Header

<div class="panel regalia">
    <h4 class="last">Header</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

For examples and more information, see Web Style Guide/Panels and Borders.

 

Adding a caption to an image is a variant of a spotlight. See below for an example.

HTML

<div class="spotlight gray"> 
    <img src="" alt="image alt text">
    <div class="headline">
        <strong>A Caption</strong>
        <br>For Your Photos
    </div>
</div>

Browsershots is a free service that tests your Web design in different Web browsers. The resulting screen shots will allow Web designers to make changes and correct any problems with their site.

How Browsershots Works
Browsershots takes screenshots of your Web site the way it looks when viewed in a variety of Web browsers. When you submit your Web address, it will be added to the job queue. A number of distributed computers will open your Web site in their browser. Then they will make screenshots and upload them to Browsershots.

http://browsershots.org/