Content Image Sizes

Content Image Sizes
June 21, 2014 Swift Ideas

Below are a list of the image sizes that the theme uses based on the different assets/locations within the theme:

Portfolio

  • 5 Column (Standard) – 400px x 300px, (Retina) – 800px x 600px
  • 4 Column (Standard) – 400px x 300px, (Retina) – 800px x 600px
  • 3 Column (Standard) – 600px x 450px, (Retina) – 1200px x 900px
  • 2 Column (Standard) – 800px x 600px, (Retina) – 1600px x 1200px
  • 1 Column (Standard) – 1200px x 900px, (Retina) – 2400px x 1800px

Multi-Masonry

  • 4/3 – Wide Tall – 1000px x 750px, (Retina) – 2000px x 1500px
  • 4/3 – Tall – 375px x 750px, (Retina) – 750px x 1500px
  • 4/3 – Wide – 1000px x 375px, (Retina) – 2000px x 750px
  • 4/3 – Standard – 500px x 375px, (Retina) – 1000px x 750px
  • 1/1 – Wide Tall – 900px x 900px, (Retina) – 1800px x 1800px
  • 1/1 Tall – 450px x 900px, (Retina) – 900px x 1800px
  • 1/1 Wide – 900px x 450px, (Retina) – 1800px x 900px
  • 1/1 Standard – 450px x 450px, (Retina) – 900px x 900px

Portfolio Detail

  • Full Width (Standard) – 2000px x ANY, (Retina) – 4000px x ANY
  • Standard Width (Standard) – 850px x ANY, (Retina) – 1700px x ANY

Blog

  • Mini (Standard) – 446px x 335px, (Retina) – 892px x 670px
  • Mini with sidebar (Standard) – 370px x 260px, (Retina) – 740px x 520px
  • Masonry (Standard) – 480px x 360px, (Retina) – 960px x 720px
  • Timeline (Standard) – 970px x 728px, (Retina) – 1940px x 1456px

Blog Post

  • Detail (Standard) – 1170px x ANY, (Retina) – 2340px x ANY
  • Detail with sidebar (Standard) – 770px x ANY, (Retina) – 1540px x ANY

Widget Images

  • Recent Portfolio / Recent Posts (Standard) – 94px x 70px, (Retina) – 188px x 140px

WooCommerce

Shop Index

You can set any size for the shop height, but please note that as Cardinal uses a CSS grid, the width of the product image will be determined by the browser width and how many columns you have to display.

Product Page

The product page image defaults to 50% width as standard, although you can resize this with custom css. The image height/width can be whatever you like, but we’d recommend the width to be at least 50% of your site’s max-width.

 

Recommended

You can see the image sizes that we use on the demo to the right. If you aren’t sure what to set, then we recommend you use our settings.

WooCommerce Image Sizes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin eestaps diam ac mauris molestie hendrerit.

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*