• REGISTRATION REQUIREMENTS:

    Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Image Size

The Sandman

Member
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?
 
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.
 
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.
 
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;
    }
 
Last edited:
Back
Top