Displaying Redbubble Portfolio on Drupal-based Websites

10 Nov 2016

[Update September 14. 2017: The Promote feature is not working for the last few months.]

Redbubble enables artists to showcase their artwork and provides a market place for these artwork. Art enthusiasts can buy products customised with these art work.

You can promote your artwork using various channels. If you have a Drupal-based website, you can display your Redbubble portfolio on it in three simple steps.

Raksin rb redbubble flow 2

  1. Getting the Embed Script from Redbubble
  2. Adding the Script to your Drupal Site
  3. Verifying the images on your site
Note: These steps were last tested on 30 October 2016 on Drupal 7.5.1. Three photographs from Redbubble on the landing page of this site means the Embed code is still working.
Before you begin make sure:
  • You can login to your site as an administrator.
  • You know how to configure blocks and nodes in Drupal.
  • You are familiar with Text Formats on your Drupal site.
  • You are familiar with the regions in the themes you have activated on your site.

1. Getting the Embed Script from Redbubble

  1. Sign In to your Redbubble account.
  2. Click your profile avatar and select the Account Details.Raksin RB b1 1 accdetails
  3. The left side menu of the Account Details page contains the sections Account Settings and Artist Tools.
  4. Click Promote under the Artist Tools.Raksin RB b1 2 artistTools
    The Promote Yourself and Your Work page contains the sections Send a message to your buyers and Show off your work on your website.
  5. Scroll down to the Show off your work on your website section. Raksin RB b1 3 script
  6. Set the number of rows and columns to be displayed. By default values are set to 2 Rows x 2 Columns.
  7. Copy the content from the Embed Script text box and save it on your system.
  8. Log out of Redbubble site.

2. Adding the Script to your Drupal Site

Login to your Drupal site as Administrator.

Adding the script to your site involves two steps:

  1. Creating a new text format
  2. Configuring a Block

2.1. Creating a New Text Format

  1. Browse to Configuration > Content Authoring > Text format.Raksin RB b1 4 Drupal TxtFmt
  2. Add a text format that would run the script with no filtering. For example, “Allow Scripts”.
  3. (Optional) Modify the weight of the Text format to make it work on your Drupal site.
  4. Set the permissions for the filter.
    Note: Having a text filter open to run the script without appropriate permissions is a security risk. You may set the filter based on the Roles.

2.2. Configuring a Block

  1. Navigate to Structure > Blocks.Raksin RB b1 5 Drupal blocks
  2. Add a new Block to display images.
  3. Configure the new block.
  4. Copy the script your saved from the Redbubble site (Step 1-6) and paste it in the Block Body field off the new block.Raksin RB b1 6 Drupal block RBconfig
  5. Select the Text format configured to run scripts (Step 2.1.2)
  6. Set the Region in the theme where the Block has to be displayed.
  7. Configure the required Visibility Settings.
  8. Save the block.

Similarly, you may create nodes to display the content.

3. Verifying the images on your site

  1. Open your home page in a new tab/window to check whether the block (or node) is appearing as you required. If the content is appearing correctly, the script is working fine for the admin user.
  2. Log out of the Admin page.
  3. Browse to the pages with the block (or node) and verify whether your content is appearing correctly for other users.

Troubleshooting

  • Images are not appearing
    1. Check the Reports page to see whether you have any Drupal updates pending. Pending security updates may block your content from appearing.
    2. The script uses iframe. Some versions of Drupal may not display the iframe content.
  • Embed script is appearing instead of images
    Wrong text format. Full HTML and partial HTML text filters will definitely display the Embed script instead of images.
    Verify whether you have created a text format to run the script.

    • If not, create a new text format for the script.
    • If you have created the text format, verify whether you have selected the correct text format for the new block.

References:

1. Redbubble tools and tricks

Note: I am not an employee of Redbubble. The steps are solely based on how I created a block with the photographs from Redbubble portfolio. There could be other easier ways to do the same task. Let me know if you have any inputs or comments. If you expect a reply from me, please include a valid e-mail ID in the comments.

Leave your thought