How To Embed Events, Venues, Photos and More Using the WYSIWYG Plus Sign

Creating the best content on your DoSite doesn’t stop at Event listings. The front-end WYSIWYG editor allows you to draft Event descriptions and other editorial Pages that look cool, are useful to your users, and pull in more readers over social media.

In addition to using the WYSIWYG editor to draft and format the text in your Events and Pages, you can also use the new Plus Sign widget to embed rich media -- no HTML required.

The Plus Sign

When actively editing an Event description or a Page, you will see a floating “plus sign” in the left-hand margin. Clicking on the Plus Sign expands a menu that lets you easily embed media right into the body of your text.

In addition to photos and video, you can embed interactive cards -- just like the ones in your Event listings -- that link to Events, Venues, Artists, and Users on your site. The result is content that’s more useful and more visually engaging to readers.

When expanded, the menu of options looks like this:

  1. Upload photo from your computer
  2. Add photo via URL
  3. Embed YouTube video via URL
  4. Embed DoXXX Event card
  5. Embed DoXXX Venue card
  6. Embed DoXXX Artist card
  7. Embed DoXXX User card 
  8. Add Flickr gallery via Flickr ID and Tag

Embedding Photos

When embedding photos and other images, you have three separate options: upload from your computer, insert image using a web URL, or adding a Flickr gallery.

Uploading Image From Computer

To embed an image you have saved to your computer, click on the Plus Sign and select the cloud with the arrow pointing to it (menu option #1 above). Click on the “choose file” button and select the file on your computer that you want to embed. 

Click “Upload” and the image will be embedded into the page.

Adding Photo Using URL

If you are using an image that you found on a webpage, you can embed the image using its URL.

To find the URL, just right-click on the image and select “Copy Image URL” (the exact language may be different depending on your web browser. The URL is now copied to your computer’s clipboard.

To embed it into the page you are editing, click on the Plus Sign and select the image icon (menu option #2 above). In the widget, paste the URL that you copied before and the site or photographer it should be attributed to (if necessary).

Click Enter (Return) on your keyboard and the image will be embedded with the attribution underneath in italics.

NOTE: Remember to always respect the applicable copyright laws when using images that do not belong to you. Here’s a guide From Stanford U. on how to stay out of copyright trouble online, and a guide to what each Creative Commons license means.

Adding Flickr Gallery

If you’d like to display multiple photos from a show or event, you have the option to embed an entire Flickr gallery using only the Flickr user’s ID and the Flickr tag used for that event.

The Flickr ID is the unique ID number given to every Flickr user. If your account doesn’t have a personalized URL (a.k.a. “vanity URL”), it’s simply the ID number at the end of your profile page URL. If you do have a vanity URL set up, it’s a little bit trickier to find your Flickr ID.

The easiest way is through third-party site Simply enter your profile page URL in the search bar (e.g. and hit “Find”. idGettr will return your Flickr ID instantly. For example, Do317’s ID is 73395839@N06.

The tag is simply the label you put on the Flickr photos you want to display. (NOTE: This is different from the set or album where the photos live on You must label photos with a tag to embed them on your DoSite.

To embed the photos into an Event description or other Page using the WYSIWYG Plus Sign, just select the Flickr logo (menu option #8 above) and paste the Flickr ID and tag you’re using into the appropriate fields. Hit Enter (Return) on your keyboard and the gallery will be embedded in the page.

When readers view the page or Event description, they will be able to click on any of the Flickr photos to open a carousel for browsing high-res versions of the gallery photos.

Embedding Video

Embedding a YouTube video into your pages using the WYSIWYG is incredibly easy -- no HTML required.

Just click on the Plus Sign and select the play button icon (menu option #3 above). Paste the URL for the YouTube video you want to embed and press Enter (Return) on your keyboard. The video will be visible immediately in the page.

NOTE: At this time, the WYSIWYG editor only supports YouTube videos. If you’d like to embed a video from another site, like Vimeo, you can still do that with a little HTML magic.

Cards: Embedding Events, Venues, Artists, and Users

One of the most exciting parts of the WYSIWYG Plus Sign is the ability to embed cards that link to Events, Venues, Artists and Users on your site. Before only available in Event listings and search results, these cards are one of the visual trademarks of the DoStuff Network.

Now you can embed these cards in editorial Pages and Event descriptions with just a few clicks.

To embed a card, click on the Plus Sign and select the appropriate icon (Event, Venue, Artist, or User) and begin typing the name of the page you wish to embed. Once you see the right option in the drop-down, click on it and the card will be embedded.

These cards open up an endless number of new options for the editorial and layout on your site.

Have a big multi-day festival coming up? Embed cards for the other days in each Event description so users can easily add them all to their calendars.

Drafting a post on the best cocktails in the city? Build it on a /p/ Page and embed the venue cards inline with each description.

Notes on Card Design

The color and design of the cards you embed with the WYSIWYG Plus Sign are copied exactly from the look of those cards on other parts of your site. So Event cards match those in your Event listings, and Artist cards match those in the search results and on Event pages.

It is possible, however, to customize the way these cards appear on /p/ Pages and/or Event descriptions using CSS. This is especially helpful if your default card design seems to clash with the background of your editorial pages.

For those that aren’t experts in CSS, we’ll post a tutorial for customizing card appearance here in LearnStuff soon.