Youtube video list test:

If you view this blog while signed in, you'll have an extra button

If you have an account at 42&Park, and you are currently signed in, then you will have an upgraded experience while you view this blog.  The reason for that is that our code detects that you are signed in, and adds additional functionality.  You will see the "Add to collection" icon, which currently looks like a red heart icon.  This allows you to curate across the web, wherever you see a 42&Park capsule.

Popping a capsule

You can pop a capsule from any link or image on your web site, rather than embed it.  This offers some advantages over embedding:

1. You can use whatever screen real estate you like.  Often a wider space than a typical web column (of about 550-600px) will offer a better user experience.
2. Provide a different look and feel - the background is dimmed out while the capsule is popped
3. Separate clearly between editorial and advertising

To try out popping a capsule, click the link below.

Click Here!

This works by calling a JavaScript function to pop a capsule.  To get this working, you will need to do two things:

1. Add custom JavaScript to your web site
2. Add custom styles to your web site controlling the popup window

The custom JavaScript and styles are available from 42&Park upon request.  (However, the industrious can retrieve those resources from this sample if you are so inclined!)

This is one of my favorite collections... An editor would normally write lots of good content here...

Skimlinks test:

I love this Stella perfume.  Do you?

Side by side comparison of Amazon affiliate widget and 42P store for the same products:

Here is a PopShop widget I created pretty easily: PopShops™ affiliate stores

Embedding in a tall, square, or wide shape

The OmniStore automatically adapts itself to the space it finds itself in, using a Liquid Layout 2.0 design which employs a number of techniques that work together.  For example, we might find ourselves in a very narrow space:

Wide format imagery won't look great in a tall shape.  In this case, the OmniStore has chosen tall brand images that fit the tall shape (aspect ratio) it is in.  Also notice that the store name (Wines) does not appear on the right hand side in this case, to make the layout look cleaner.

On the other hand, we could embed the very same store in a wide shape, in which case the OmniStore will choose a different set of brand images that better match a wide format:




This is the same store but this time the OmniStore is choosing wide format imagery.

If you look at the all the slides in both shows, you will notice that one image is the same - this is a square image which is allowed in both formats, although it will be somewhat distorted.  Note that depending on how wide or tall the space is, you may still get some stretching or distortion, but by choosing more appropriate imagery if available, that makes the store look much better.

To make your slide show most flexible, you may embed a variety of images with varying aspect ratios (both tall and wide, or square) and the system will automatically choose the best images for the show.

What if you have only wide brand images and your'e being asked to display inside a tall shape, or visa versa?  This still works though the store is greatly reduced in size to fit.

Specifying slideshow, product, or video mode

OmniStore's (currently) have up to three different view templates associated with them:

1. Slide show
2. Video
3. Products

You can choose which of these three beds you want to embed as the default view in your web site.  The previous blog posting embedded the slide show view.  Let's embed the same store but choosing the products view this time.

This is the same store opening in products view.  The only difference in the embed code is specifying a different starting page - product-shopping rather than product-info.  So the embed code for the above store is

<iframe frameborder="0" width="100%" height="330px" scrolling="no" seamless="seamless" src="http://dev.42andpark.com/product-shopping.jsp?partnerId=53443"></iframe>

The narrow width of this blog is typical of the space available to us on many web sites, especially those that use fixed width layouts like this blog.  This store might look better if we reduced the size of everything.  You can do this by passing an optional zoom parameter with your store that specifies a zoom factor.  The number 100 means 100%, which is the default and what you see above.  Smaller numbers zoom out, so 50% would be very zoomed out - here's the code for the store below:

<iframe frameborder="0" width="100%" height="330px" scrolling="no" seamless="seamless" src="http://dev.42andpark.com/product-shopping.jsp?partnerId=53443&zoom=50"></iframe>

You can see how the store looks much better in terms of its layout - the text fields aren't running into each other.  Unfortunately, this is just too small to read!  Maybe a larger zoom would look better.  Let's try 80%



That's a little better.  You may have to experiment with different zooms to find the best balance.

You can also embed a store in video mode if it has a video.  You do this by selecting the video view as the initial view.  Here's a different store embedded in it's video mode with this embed code:

<iframe frameborder="0" height="330px" scrolling="no" seamless="seamless" src="http://publisher.42andpark.com/product-video.jsp?partnerId=51785&amp;zoom=100" width="100%"></iframe>

Steakhouses in Toronto

This blog is all about embedding 42&Park widgets in web sites, giving a number of different examples.  Below is a store Christine built for HY's Steakhouse & Cocktail Bar.  This is an example of embedding the store inside a typical web site.  Here is the line of HTML that you can paste into your blog or website right now to get the same thing:

<iframe frameborder="0" width="100%" height="330px" scrolling="no" seamless="seamless" src="http://publishers.42andpark.com/product-info.jsp?partnerId=53443"></iframe>

Let's walk through the various parts of this HTML code:

1. <iframe frameborder="0" - This tells your browser to embed an iFrame
2. width="100%"  - We want the iFrame to take up 100% of the width it's embedded in
3. height="330px" - This is your actual width / 9 x 16.  In this case, our actual width is 653 pixels across.  This gives you a perfect 9x16 aspect ratio optimized for video and wide brand imagery.
4. scrolling="no" seamless="seamless"
5. src="http://publishers.42andpark.com/product-info.jsp?partnerId=53443&amp; - Specifying the partnerId like this tells the system to choose the initial mode (product, slide, video) and which slide to show first.

To get the partnerId of a capsule, you can open it in full screen mode and look at the partnerId parameter in the URL of your browser.  You can also see this in the Embed code screen.