In the Spotlight: Block Editor Workflow, Pt. 2 of 3

back alley
Photo by Timothy Vollmer on Flickr.

This week, we spotlight how to create reusable blocks in your block editor. What is a reusable block, you ask? Great question! A reusable block is a way to easily access content that repeats on your site. For example, do your assignments frequently end with the same set of instructions (e.g. Please post by Sunday at midnight. Make sure to include relevant citations and end your post with a discussion question to the class)? Does your club frequently post reminders about when and where to meet? This is content that you can save as a reusable block. This will save you from having to create the content anew or copying and pasting it.

To create a reusable block:

  1. Select a block.
  2. Click on the three dots that appear in the toolbar.
  3. Click Add to Reusable blocks.
  4. Give the block a name.
  5. Click Save.

When you want to add your reusable block to a page or post, you can retrieve it by:

  1. Typing a forward slash in your editor, followed by the block’s name (e.g. /assignment block).
  2. Finding it in your block toolbar.

You can learn more about reusable blocks here

Ready to try your hand at this? Feel free to reply to this post if you have any trouble!

In the Spotlight: Block Editor Workflow, Pt. 1 of 3

Over the next two months, we will be sharing tips and tricks to using the new(ish) block editor. These posts will be short and focus on just one best practice at a time, giving you space to experiment. 

If you’ve tried your hand at the block editor already, you know there are multiple ways to add new blocks to a page or post. We find, however, that one of the best ways to add a new type of block is to type a forward slash followed by the block name. For example, as pictured below, “/image” or “/heading”.

Then, choose the type of block you want to use. That’s it! This is an easy way to avoid the “pointing and clicking” options, which can interrupt your writing process. Please note though that this only works if you have no other text in the block! 

We hope this was helpful. Please reach back out to us here if you run into trouble! 

In the Spotlight: Embedding Images with the Block Editor

Many of you are probably getting used to the new(ish) Block Editor this semester. The Classic editor will be supported by WordPress through at least 2022, but we encourage you to gain some familiarity with the Block editor now before the alternative becomes obsolete. One of the advantages of the Block editor is that it makes it easier to integrate text with visual page elements, without any coding needed. It can be especially useful if you have an image-rich site, as it allows you to embed media hosted on external sites (e.g. Dropbox, Google Drive, your own personal site) and therefore can help you save some of that precious OpenLab storage space! In the remainder of this post, I spotlight how to 1) upload and embed an image to your post; 2) embed externally-hosted image. 

Upload and Embed Images

To upload and embed an image to your page/ post follow these steps:

1. To upload images or other media (e.g. pdfs, Word docs, txt files) to a post or a page, go to your Dashboard > Posts > Add New or Pages > Add New.  Click the Add block button. A block library will appear: click Image to add an image to your page or post.

2. You can select files saved to your computer or flash drive by clicking Upload. Then, either drag-and-drop files from saved to your computer or select a file.  You also have the option to select an image or other files from your media library by clicking the Media Library tab, or inserting an image from a URL by clicking the Insert from URL tab.

3. Once you have uploaded or inserted your image, you can make adjustments to the file using the options in the block toolbar.  You can add a caption to appear underneath the image, change the “Alignment” of the image, and choose between the default rectangular style and a rounded image style. You can change the “Size” of the image by dragging its edges.

Embed Externally-Hosted Images

Please note that each site has a size limit and unnecessarily large images can take up more of your space than you’d like. If you are sharing many large images, we suggest hosting them with an external storage solution, such as Google Drive, Dropbox, or Flickr, among others. Instructions for embedding externally hosted images are as follows:

  1. On the “Add New Post” or “Add New Page” screen, click the Add block button. A block library will appear: click Image to add an image to your page or post.

2. Click Insert from URL.  Paste or type the URL for the image.

3. Click enter or the black arrow to Insert into Post.

4. Once you have inserted your image, you can make adjustments to the file using the options in the block toolbar.  You can add a caption to appear underneath the image and change the “Alignment” of the image. 

Want to try your hand at the Block editor? Please visit our Help documentation to learn more!

Sources:

This page is a derivative of “OpenLab Help” used under CC-BY-NC-SA 3.0.

In the Spotlight: Advanced Accordions

This week we spotlight Accordions, which can now be easily added to your site with the PublishPress Blocks plugin. Those of you who have worked on the OpenLab a while know that we advocate keeping content on a single page brief. It is always easier for the reader to digest information in smaller chunks, and pages or posts that are text heavy can be visually overwhelming. Accordions are a great way to keep a page/ post short, while still making available additional information that might be useful to your reader. 

But, first, you might be wondering: what are accordions? And how can I create them?

Accordions are collapsible lists: the header for each item on the list is always displayed, but the text and multimedia below the header can be opened and closed. For example, in the image below, the Experiential Art & Design club features an FAQ accordion at the bottom of their home page. Each accordion item takes the form of one FAQ, such as “Do I need to bring a laptop?” When you click the question, the accordion expands, and the answer becomes visible. This is a great way for the club to save space; it also invites the reader to interact with their site!

To create an accordion of this kind, first activate the  PublishPress Blocks plugin in your Dashboard. Then, in your page/ post editor, select the Advanced Accordion block. You now have a fully customizable accordion! The block settings that appear on your right allow you to do things like change the icon of the accordion, the color of the header, the size of the font, etc. Note that beneath each header you can include images as well as text.

We encourage you to play around with Advanced Accordions. While you probably won’t want to hide crucial information in an accordion (e.g. an assignment prompt), they can be a great space-saving design tool for information that might be thought of as “additional” or “further reading.” 

Do you already use accordions on your site? What are some of your use-cases?

In the Spotlight: The Spring 2021 Semester, In Review

Photo by Federico Respini on Unsplash

Summer greetings from the OpenLab and congratulations to all on the closing of another semester! A special congratulations to the class of 2021!

While our weekly “Spotlight” blog series will go on hiatus for the summer, we wanted to remind you of the sites we featured this past semester, and encourage you to check them out if you haven’t already done so.

Spring 2021 Spotlight Posts

This past year, we released a series of OpenLab screencasts, providing audiovisual guidance to using different features of the OpenLab.

In addition to reviewing these posts from this past spring, you can find a full curated list of all sites that have been spotlighted in our  Spotlight Archive. This archive offers visitors 3 curated lists to help them sort through the posts:

  1. For everyone (By type of site – course, project, club, portfolio)
  2. For faculty/staff
  3. For students

As always, we also encourage you to check out our in-house sites:

The OpenLab Community Team will continue to offer email support over the summer– please contact us with questions or concerns.

We will also soon announce our summer programming, including one-on-one office hours. We will be in touch as we get more events and workshops on our calendar!

Wishing you all a very happy summer!

The OpenLab Community Team

New OpenLab Screencast: Pages and Posts

We are pleased to offer a new set of support materials for OpenLab users: screencasts! With video, audio, and captions, these screencasts provide step-by-step instructions for how to use different OpenLab features in a multimodal format.

Today, we’re introducing a new video in our series on the basic building blocks of OpenLab sites. In this one, we’ll focus on how to create pages and posts. This series could be particularly useful for students creating eportfolios in the second half of the semester, for staff beginning new projects, or for faculty designing course sites for the winter term.

To see our other screencasts, click here or visit our YouTube channel.

In the Spotlight: OpenLab Mobile Shortcuts

This week, we spotlight a feature built into most smartphones that can facilitate mobile work on the OpenLab! 

At our workshops, people sometimes ask if we can develop an OpenLab app, similar to the Blackboard app. They say they are pleased with the OpenLab’s mobile functionality, but it’s a pain to have to pull up your phone browser, then navigate to the OpenLab, then navigate to where you want to go. An app on the home screen would provide a handy shortcut. Luckily, you can do that already! 

While app development is not currently in the works, there’s a very easy way to create your own shortcut to the OpenLab on your phone’s home screen. In this post, we will outline how to do it on both iOS and Android. 

Creating an OpenLab Mobile Shortcut on iPhones

  1. Navigate in your phone browser (usually Safari, unless you use another browser) to the OpenLab page you want to create the shortcut to. This might be the OpenLab home page, or your own profile, or the profile or site of a particular course.
  2. Scroll up so that the bottom menu appears, revealing the forward/back buttons, the bookmark button, the share button, and the “view all tabs” button. (See Screenshot 1) 

    Illustration of Steps 1 and 2
    Screenshot 1: OpenLab on mobile with Safari navigation menu visible
  3. Click on the “Share” button. It looks like a square with an arrow pointing upwards out of it. (See Screenshot 2)

    Illustration of where the Share button is on iOS Safari
    Screenshot 2: Share Button circled in yellow.
  4. Scroll down until you see the option “Add to Home Screen.” Click on it! (See Screenshot 3)

    Screenshot of menu that appears when the Share button is clicked, with "Add to Home Screen" circled
    Screenshot 3: “Add to Home Screen” option in Sharing menu
  5. Adjust the name of the shortcut if you wish.
  6. Click “Add.” Now the shortcut to the page will appear as an icon along with your apps! You can delete it or move it around like you can with any of your apps. (See Screenshot 4) 

    iPhone app screen with shortcut to the OpenLab circled in orange
    Screenshot 4: Your new shortcut to the OpenLab

    Creating an OpenLab Mobile Shortcut on Android

    1. Navigate in your phone browser to the OpenLab page you want to create the shortcut to. This might be the OpenLab home page, or your own profile, or the profile or site of a particular course.
    2. Tap the “menu” button on your phone. (The Square button of the three white shapes pictured in Screenshot 1)

      Image of navigation buttons on an Android phone
      Screenshot 1: Android navigation buttons
    3. Then click “Add to homescreen.”

      Image of the menu that appears after Step 2 is completed
      Screenshot 2: Menu for webpage with “Add to Home screen” option
    4. Change the name of the shortcut if you wish, and then click “Add.”
       

      Screenshot of dialog box that allows user to change the name of the shortcut
      Screenshot 3: Name change dialog box

      5. Now you will see a shortcut to your OpenLab page!

Screenshot of Android home screen with OpenLab shortcut visible

We hope this helps you use the OpenLab even more easily on mobile platforms. Many CUNY students, as well as faculty and staff, use their phones for academic work, and creating a shortcut (or more than one!) to the OpenLab can make that work even more streamlined.

In the Spotlight: Inviting Students to your Course!

Happy second week of school to all City Tech faculty, students, and staff! At the start of every semester, faculty ask us how they can get their students set up on the OpenLab for the very first time.  The process can feel intimidating! But below, I spotlight three easy ways that you, as an instructor, can invite your students to join your course.

Have your students join your course in class!

If your course and profile are public, then students should be able to search for your course on the OpenLab. Once they’ve found it, they can join simply by clicking “Join Now.”

A screenshot of an OpenLab course profile page, which includes a course avatar and a button that reads "Join Now." Students can join the course by clicking this button.

 

You can walk your students through these steps in class, using a classroom computer to demonstrate. I recommend having students join on the spot in the classroom from their phones, tablets or laptops. Note that you can have them search for the course from the top toolbar or go into the Courses tab and use the right-hand search function with filters. 

 

 It helps here to give your course an intuitive name that includes the course number and semester!  

 

 

 

Invite your students to your course via e-mail!

This method, too, works only if you keep your course site and profile public. (Note that you can always change your privacy settings later, if you’d like). An easy way to have students join your course is to e-mail them the URL to your course profile. The link will take them to your profile page where, once again, they can simply click “Join Now.” 

A screenshot of an OpenLab course profile page, which includes a course avatar and a button that reads "Join Now." Students can join the course by clicking this button.

 

Invite your students to your course via the OpenLab!

You can invite your students to your course from your course profile page.  Click Membership in the right-hand menu, and then click Invite New Members on the following screen. If your course is on the smaller side, you can search individually for each of your students and invite them to your site in this way. Note that you can search for new members to invite either by typing in their e-mails or Display Names.

 

Screenshot of an OpenLab Site's Membership Setting Page. On this page, users can search form members to invite.

 

Your students will receive an automated confirmation e-mail.  Once the e-mail address is confirmed by the user, they will be added to your site.

I hope this helps explain how you can invite students to your course. Please visit our Help documentation on managing users on the OpenLab for a fuller overview. 

Part 5 of 5: Get to Know the OpenLab

Greetings,

This summer we have spent time introducing you to the OpenLab. You have explored the OpenLab, joined others’ sites, and begun creating a site of your own.

 This week, learn what opportunities exist to learn more about the OpenLab and get assistance when you have questions in the future.

 This concludes this 5-part series. Thank you for following along!

If you want to review this or previous week’s tasks, visit the archive on The Open Road.

Cheers,

The OpenLab Community Team

Part 4 of 5: Get to Know the OpenLab

Greetings,

This week, create on the OpenLab! In this case, ‘create’ can refer to creating sites, but also to creating communities, collaborations, and dialogue by joining other sites, connecting with friends, participating in discussion forums and more.

  • Task 1: Create Connections. 
    • Join our 3 in-house sites to stay connected and updated about what’s happening on the OpenLab:

      • The Open Road: Our one-stop-shop for all things OpenLab: news, workshops, events, community, and support!
      • The Buzz: Our student blogging team’s site; they post about life at City Tech and beyond!
      • Open Pedagogy on the OpenLab: A site for sharing and discussing resources about open digital pedagogy!

  • Connect with your friends and join other groups related to your interests:

      • You can search through people, courses, projects, clubs and portfolios using the menu at the top and the magnifying glass in the top-right
      • You can also search courses, projects, clubs and portfolios using the links titled by type of site (courses, projects, clubs, portfolios) under the slider. From the search page, use the filters (top-right) to tailor your search
      • more here.
  • Task 2: Create Sites of Your Own by referring to the section of our help content titled Sites on the OpenLab.

We’ll be in touch next week to help you answer: How can I get help and support with using the OpenLab?

Cheers,

The OpenLab Community Team

See the full 5-part series, on The Open Road.