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

Easy way to resize thumbnail?

Kim

New Member
Showcase
Hi Bob!

Just wanting to know if there is a quick and easy way to resize the thumbnail displayed on the main view, or category views (in modular mode) - Similar to how you can quickly change the size of the sidebar one on item view?

Thanks in advance :)
 
Thumbnail size on those displays are all controlled via CSS, so you can quickly and easily change that to suit your needs. I made it so that the thumbnails are generated at a pretty large size (300 px) in order to cover most peoples "needs" for just about any size "thumb". Each major area has its own CSS, so you can mess around with one until you get the result(s) you want, and then apply it to the other CSS Templates for any other layouts (I did it that way on purpose so you can have multiple custom layouts).

btw, the one in the item sidebar isn't a "thumbnail". That is done via javascript resizing of the full size image (which is probably going to change). I think you'd be better off just tweaking the display CSS to get the exact look you want vs trying to do it this way.
 
OK thanks Bob, I had done it via CSS before but wondered if there was an easier way, as I found it quite tricky getting it right, and resizing the browser window messed it up etc.

I might be using the wrong terminology... I meant these ones... the actual photo, not the whole box, the image is showing at 134x99 for me, I would like them much bigger.

recipebook.jpg
 
Yup, those are sized down versions of the actual thumbnail and its accomplished via CSS. Its actually the same CSS as core XF uses to resize the attachments thumbs. I believe (can't remember off the top of my head) that there are HTML5 data elements in the template that also come into play. I'm dead tired right now and heading to bed, but will post something tomorrow for you to try out. either that, or take a look at http://backcountrypost.com/forum/trail-guides/ and see the nice larger thumbs that Nick is using...
 
  • Like
Reactions: Kim
Yup, those are sized down versions of the actual thumbnail and its accomplished via CSS. Its actually the same CSS as core XF uses to resize the attachments thumbs. I believe (can't remember off the top of my head) that there are HTML5 data elements in the template that also come into play. I'm dead tired right now and heading to bed, but will post something tomorrow for you to try out. either that, or take a look at http://backcountrypost.com/forum/trail-guides/ and see the nice larger thumbs that Nick is using...


Thanks Bob, I would love some more details when you have the time :)

Nick has done such a great job with his showcase, I love it!

Sleep well :)
 
for example... this is what the new default container looks like. Much larger default image size. I use javascript to do the thumbnail crop/resize which you can now tweak the height/width for the image size and then make ONE CSS change (to the container to fit with the new image size). MUCH easier to customize now ;)

new_css.png
 
  • Like
Reactions: Kim
for example... this is what the new default container looks like. Much larger default image size. I use javascript to do the thumbnail crop/resize which you can now tweak the height/width for the image size and then make ONE CSS change (to the container to fit with the new image size). MUCH easier to customize now ;)

new_css.png


That's awesome Bob :D I am sure that will be a hugely popular new feature!!!

I just love how you adapt the product based on what people want - You're awesome!!!!
 
No, it hasn't been released. As shown in the above image, the description uses the core xenforo Tool Tip to display. That is an OPTION. You can also choose to display the description as text below the title. beyond that, the data is exposed and you can always modify the template to however you want ;)
 
When will this get released? I hope its coming very soon so that i don't have to play around with CSS much.. this is what i have been fiddling with and then i saw this thread..
SC thumbnail.jpg

There are few things i'd like to ask
  1. how to change the font size of the description text.. i suppose it is inherited but could not figure out from where..
  2. I observe that the font size of the Title and the description text are the same.. Isn't it better if we can make the font size of description smaller than that of title... color difference between the two doesn't make it stand out as much.

*** IMO a squared thumbnail image looks a bit weird & stretched as we have been accustomed to seeing pics in landscape or portrait .. i will work on this anyway.. but just letting you know from design perspective ;)
 
You know I can't answer that. It will be released when its ready to be released.

Everything is HTML and CSS. I have added some additional CSS classes for the Modules that allow you to add your own CSS for individual areas. Also, there is absolutely nothing that prevents you from editing the template and adding CSS to a specific div or span. You can also add your own classes if you want/need as well. xf1.2 will make this even easier for you.

The images I posted above are not square, nor are they "stretched" in any way shape or form.
 
Kim, sorry for this taking so long.. I've combined the next update with xf 1.2 which is why this release is taking FOREVER. If you are dieing for the new layout HTML/CSS/JS, just inbox me with Admin access to the site and I can modify the templates for you.
 
  • Like
Reactions: Kim

Similar threads

Back
Top