Image Size

[The Sandman]

My showcase is for displaying people's forum sites. What size image of their logo should they upload for it to be properly displayed as the cover image?

 

[Bob]

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.

 

[The Sandman]

Most forum logos are wider than that. How can I change the size to 250X150, or 300X150 for example?

 

[Bob]

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

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

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

 

[The Sandman]

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.

Can you be a bit more explicit about this part of the instructions. This is my first real foray into modifying XenForo templates.

 

[Bob]

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.

 

[The Sandman]

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.

No hurry! I really appreciate the help.

 

[Bob]

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

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

Customized to use 350x100 sized thumbs...

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

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

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

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

 

[The Sandman]

Thanks!

 

[Bob]

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

 

[The Sandman]

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

Thanks - I'll let you know. I just want to talk with my designer first regarding the usual aspect ratio for forum logos before I go ahead and make the changes.