Knowledgebase: FLEXSITEZ
Flexsitez - Image sizing
Posted by - NA - on 20 June 2012 04:49 PM
Flexsitez - Image sizing 


The image sizing for your Flexsitez professional photo blog template is unlike the sizing for any other Portfoliositez template, in that YOU have complete control over it!

There are several areas of the wp-admin that have an impact on image sizing; the wrapper block settings, header settings, and gallery settings. 

Together, they determine the appropriate sizes for both your header slideshow images, AND your gallery images. 


Wrapper Block

The Wrapper Block Settings can be found within your wp-admin, in the Flexsitez theme editor, under the Content Settings header. 


The wrapper block determines the width of the full content area, including all sidebars and the main content panel. It can be adjusted from just 500 to 1300, with the default set at 1000. 

You can also set a border width for the content panel - this is a border that will outline all content including your slideshow images, content panel, and sidebars. 

It is important to make careful note of the wrapper block width AND the border width, as they will BOTH impact the width of your images. 




Header Settings


The header settings include the slideshow general settings, which determine the sizing for the slideshow image uploads. 

There are two areas to consider within the slideshow general settings area; the first of which is the SLIDESHOW LAYOUT.

There are 9 layouts to select from, depending on your preferences. You can see that SOME add the logo panel to an area separate from the images, such as 1,2, 6, 7, 8, and 9 - and that a few add the logo panel OVER the images, like 3, 4, and 5.


Your selection WILL change the  available settings in the CURRENT LAYOUT OPTIONS area, so, after selecting your layout, make sure you scroll down and SAVE your changes. 

After you have saved your layout options, you can then adjust the settings in the CURRENT LAYOUT OPTIONS area. 

These settings include the header height, and the header logo panel height OR width, depending on your layout selection.




Slideshow Image uploads


Once you have set your wrapper block width, wrapper block border width, and established your header settings, you will want to visit the Slideshow Image Uploads area. 


Right near the top, you will see the EXACT dimensions you should size your images to, PRIOR to uploading them. 


These dimensions are determined by several specific factors: 

1st - your wrapper block width
2nd - the wrapper block border width
3rd - your header height
4th - your logo panel width OR height

Your images should be sized to EXACTLY these dimensions, in order to fit yout header perfectly! 

You can think of this as a mathematical equation:

Your image width equals your wrapper block width MINUS the wrapper border width times TWO (so, for instance, if your wrapper block border is set to 25, this would be wrapper block width - 50), MINUS the logo panel width, if applicable!

And, your image height will be the header height, MINUS the logo panel height, if applicable!



Gallery Settings


And finally, you will want to look at the Galleries Settings, within the content settings area. 


A great benefit of the Flexsitez template is that you can have different sized images display in your galleries than in the header slideshow, and again, you have full control of that!

The gallery image width is always going to be the SAME as your header slideshow image width (which again is the wrapper block width MINUS the wrapper border width, times TWO, MINUS the logo panel width, if applicable)

And, within this area of the wp-admin, you can adjust your gallery height to anywhere between 300 and 700px tall. 


As with the header slideshow images, you want to make sure you are resizing your gallery images PRIOR to uploading them, for best results!

If you have additional questions about your Flexsitez, and the appropriate image sizing, please contact support@portfoliositez.com!





(1172 vote(s))
Helpful
Not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments: