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 Joyn 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.