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?
Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature currently requires accessing the site using the built-in Safari browser.
<script type="text/javascript">
$(document).ready(function(){
$('.showcaseItemThumb .showcaseItemThumbnail').resizecrop({
width:200,
height:150,
vertical:"middle"
});
});
</script>
.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;
}
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.
<script type="text/javascript">
$(document).ready(function(){
$('.showcaseItemThumb .showcaseItemThumbnail').resizecrop({
width:200,
height:150,
vertical:"middle"
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.showcaseItemThumb .showcaseItemThumbnail').resizecrop({
width:350,
height:100,
vertical:"middle"
});
});
</script>
.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![]()