Skimlinks test:
I love this Stella perfume. Do you?
Thursday, March 28, 2013
Thursday, March 7, 2013
Friday, March 1, 2013
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.
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:
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
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:
- Slide show
- Video
- 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.
<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&zoom=100" width="100%"></iframe>
Subscribe to:
Posts (Atom)