Inserting an Image Gallery into a Blog Post

    by Training Blog

    Date

    December 13, 2009 at 2:35 PM

    People have asked to be able to use the Image Gallery inside a HubSpot blog post.  It is a little tricky from a technical standpoint to roll out a module in a module in the CMS but we have worked out a "hack" to accomplish this if you really want to get an image gallery module in a HubSpot blog post.  Another alternative is to include a gallery from Flickr in a blog post so we'll also discuss how to do that as an alternative.

    Inserting HubSpot's Image Gallery into a Blog Post

    It is possible to place an Image Gallery created using HubSpot’s Image Gallery module into a blog post, but it requires a little work.

    1. Create a new page on the CMS and in Page Properties select Show Advanced Options and in the Layout option select Blank (IFrame) from the pulldown.
      image gallery iframe
    2. On this blank page you will want to remove any global modules that might remain.
    3. Select Add Module and choose Image Gallery.
      image gallery add
    4. Go through the steps of creating a new gallery.
    5. Now go to the blog post that you want to embed the image gallery into and Edit Post
    6. In the blog post authoring tool you go can go into the HTML view or more simply click on the Video icon in the edit menu bar.  What you will need to paste into the screen is an iFrame code that calls the page in question.  See sample code below:
      <iframe height="500" src="URL-OF-PAGE-WITH-GALLERY" style="border: medium none ! important;" width="640"></iframe>
    7. Depending on the size and style of the gallery, you might need to adjust the height and width atttributes.  The style attribute allows you to hide the border so that it looks like part of the page.  This example below is for a slideshow.
      image gallery embed
    8. Once you're satisfied with your embedded gallery, click Publish  to publish your blog post.

    Check out this example for what an Image Gallery looks like embeded on your blog.

    Embed a Flickr Gallery in a Blog Post

    Some users prefer to use Flickr to embed image galleries in a blog (I personally use this method quite frequently in my personal blog).  For now, it is actually easier to do this then to embed a Image Gallery module as explained above. 

    This tutorial assumes that you already have pictures uploaded to a Flickr account, and have them saved as a "set." 

    1. Once in the view of your Set on Flickr, find the Slideshow icon on the right hand side of the screen.  Click on this icon to go into a full screen slideshow view of your pictures.
      grab flickr slideshow
    2. In this full screen mode, if you move your mouse across the images, various screen options will pop up across the top and the bottom.  In the top right hand corner you will see a Share option.  If you click on that it will give you a Grab the embed HTML option.  You can copy this directly to your clipboard.
      embed flickr gallery
    3. ADVANCED: I usually like to click on the Customize this HTML option in order to get a custom size that fits my blog. For instance, the default size is 400 x 300, but I prefer to expand this size to 600 x 450.  Depending on the width of your blog display area, you might choose something different. 
    4. Once you have copied this embed code, just follow the steps above, beginning at Step 6.  In other words, in the blog post edit screen, go into the HTML view or click on the Video icon, and paste in your code.
    5. Click Publish to publish your blog post.

    What other tools do you use to make photo galleries on your blog or website?

    HubSpot_Academy-2

    Subscribe to Articles for HubSpot Customers

    Subscribe by RSS

    Follow HubSpot

    Search Inbound Hub

    Jump Right into the Software


    To make it easy for HubSpot customers to follow along in their own software, we regularly link to the product and customer-only training.