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

Discussion in 'Showcase Support' started by The Sandman, Sep 11, 2013.

  1. The Sandman

    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?
     
  2. Bob

    Bob Developer Staff Member

    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.
     
  3. The Sandman

    The Sandman Member

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

    Bob Developer Staff Member

    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.
     
  5. The Sandman

    The Sandman Member

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

    Bob Developer Staff Member

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

    The Sandman Member

    No hurry! I really appreciate the help. :oops:
     
  8. Bob

    Bob Developer Staff Member

    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: Sep 12, 2013
  9. The Sandman

    The Sandman Member

    Thanks! :)
     
  10. Bob

    Bob Developer Staff Member

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

    The Sandman Member

    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.
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.