Image Size

default size of the thumbs in the containers is cropped to 200x150, so at least that. You can go larger as long as you maintain the proportion and the system will simply do a "crop/resize" of it. I prefer to use a large image and let the system crop/resize so that the images in the gallery are large.

 

Its pretty easy, but requires customization (editing of templates and CSS)

In a typical Grid or Module (not list) template, you will find towards the top this chunk of javascript

HTML:

<script type="text/javascript">
    $(document).ready(function(){
        $('.showcaseItemThumb .showcaseItemThumbnail').resizecrop({
            width:200,
            height:150,
            vertical:"middle"
        });
    });
</script>

What this does is control the size of the THUMBNAIL. So if you want to change from 200x150 to 300x150, you will need to edit width:200 to width:300

then you will have to change the CSS that controls the containers to work with the new thumbnail size.. the 3 CSS classes you will have to modify are shown below. The width and height values in the CSS MUST match those set in the javascript above. You will notice that they are all width:200 and height:150 and max-width: 200 to match the above 200x150. So in your case, you will want to change all the width:200px to width:300px.

HTML:

    .showcaseItemContainer .showcaseItemThumb {
        border: 1px solid @primaryLighterStill;
        height: 150px;
        width: 200px;       
        overflow: hidden;
        position: relative;
    }
   
        .showcaseItemThumb .showcaseItemThumbnail {
            height: 150px;       
            width: 200px;
        }   

    .showcaseItemContainer .showcaseItemInfo {
        max-width: 200px;
    }

You will need to do this for ALL Grid and Modular templates that you want a different size on. Takes about 10-15 minutes to convert stock showcase to using another size throughout. Easiest way is to toss the CSS into Extra.css, and use !important on the sizes, then just quickly edit all the grid and modular templates changing the js width/heights.

 

yup, might take me a bit to put it together (at work right now, so I only have time for short quick responses). Its super easy tho once you understand it.

 

PART 1....

This is a list of the templates that you will have to edit to change the width and height settings for the Javascript that resizes the thumbnails for the containers (Grid View and Modular View).

nflj_showcase_category_grid
nflj_showcase_find_new_items
nflj_showcase_index_grid
nflj_showcase_index_modular
nflj_showcase_member_grid
nflj_showcase_node_list_items

This is the javascript to look for in those templates (its towards the top in all of them). Some of the JS is slightly different, but the settings you need to change are the same (width and height).

Core Showcase...

HTML:

<script type="text/javascript">
    $(document).ready(function(){
        $('.showcaseItemThumb .showcaseItemThumbnail').resizecrop({
            width:200,
            height:150,
            vertical:"middle"
        });
    });
</script>

Customized to use 350x100 sized thumbs...

HTML:

<script type="text/javascript">
    $(document).ready(function(){
        $('.showcaseItemThumb .showcaseItemThumbnail').resizecrop({
            width:350,
            height:100,
            vertical:"middle"
        });
    });
</script>

DO NOT cut and paste the entire script, just edit the width and height.


PART 2...

Xenforo has a CSS template named EXTRA.css. This template is for you to store custom CSS that will over write any CSS for a given style. So what you need to is add the following to EXTRA.css.

Custom CSS Override....

HTML:

    .showcaseItemContainer .showcaseItemThumb {
        height: 100px !important;
        width: 350px !important;   
    }

        .showcaseItemThumb .showcaseItemThumbnail {
            height: 100px !important;   
            width: 350px !important;
        }

    .showcaseItemContainer .showcaseItemInfo {
        max-width: 350px !important;
    }

 

Let me know how it goes or if you have any problems with it. Its pretty easy once you get the hang of it