How to resize image to thumbnail for table lists? (SOLVED)

Forum
Last Post
Threads / Messages
Kesstryl

Kesstryl

Member
Member
Joined
Feb 22, 2012
Messages
206
Points
28
Mysidian Dollar
11,706
This can't be done with CSS without changing ALL table image sizes. I want to resize pet images to a smaller thumbnail in any list views such as my adopts pagination pages, daycare, trades, etc, but keep the original image size on individual pet pages. I'm pretty sure this has to be done in PHP and I have searched for hours trying to parse this (hahah see what I did there) and can't figure it out.
 
Nevermind, I figured out how to do it! For the owned adopts pet list

Go into model->viewmodel->ownedadoptableviewmodel

on line 42 find
public function getManageLink(){

replace that whole method with this:
public function getManageLink(){ $thumbnail = $this->model->getImage(Model::GUI); $thumbnail->resize(100); return new Link("myadopts/manage/{$this->getID()}", $thumbnail); }
 
Last edited:
This is a lifesaver.



Any luck on resizing for the shop items?

I am adding backgrounds and they show huge on the shop page .. can't find a way to get them down to thumbnail for the display in shop!

Thanks for the information on this! :)
 
They also show huge in inventory ...

I hope when the 1.4 does come it has default thumbnail or small images for shop stuff and inventory.

Tried a few ways to adjust the cell sizes and still working on it, if I get it I will share! :)
 
I'm looking to see what I did with mine. I know you can set the max width in the CSS file for all images so they don't blow up. This will cover every image on site. It can be overridden with image classes, but it's a good base to start with. Here's my img code


Code: 
img {
   max-width: 500px;
   height: auto;
   -webkit-backface-visibility: hidden;
   -ms-transform: translateZ(0); /* IE 9 */
   -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
   transform: translateZ(0);
}

Then for table images I set a max size there too so they would be a lot smaller
Code: 
table img{
   max-width: 200px;
   height: auto;
}

To override the basic max image size, you create an image class. This one is for my banner which is quite larger than 500 px.
Code: 
#image {
   background:url("media/Fabletopia.gif") left no-repeat #100745;
   max-width: 100%;
   height: 200px;
   border-radius:10px 10px 0px 0px;
   background-size: cover;
}

and the class is applied in the template tpl file. Mine looks like this:


Code: 
{include file="{$root}{$temp}{$theme}/header.tpl"}

    <body>
        <div id="wrapper">
            <table cellspacing="0" cellpadding="0">
                <tr><td colspan="2" id="image"><span><a href="{$path}index">{$site_name}</a></span></td></tr>
                <tr><th colspan="2" id="navbar">{$menu}</th></tr>
                <tr>
                    <td id="menu">{$sidebar}</td>
                    <td id="content">
                        <h1>{$document_title}</h1>
                        <p>{$document_content}</p>

                    </td>
                </tr>
                <tr>
                    <td colspan="2" id="footer">{$footer}</td>
                </tr>
            </table>
        </div>
    </body>

</html>

I think that's all I did. Pretty easy fix without any need to mess with the php side
 
Last edited:
Thank you so much!!

I always flail when it comes to resizing, and now with 1.3.6 I flail even harder haha. Thank you again :)
 
Kesstryl said:
I just made some edits, I have a hard time getting my thoughts out without lots of rereading and editing
Click to expand...


I often have the same issue, thank you for all this!

This is going to be a big life saver for me and others :)
 
You can add the image classes in the php code too with the new Division function in your view files. This function basically creates an html div. My background images mod has an example of how to show the backgrounds with pets using this. I have CSS for displaying the pet which is added to the div with this code

$petImage = new Division(NULL,"petimage");

It's basically creating this html

<div id="petimage">...</div>

id="petimage" is referencing the CSS file where I have a class named petimage

Just make sure you have this at the top of the file so it can access the function:

use Resource\GUI\Document\Division;
 
I am learning a lot with this, thank you.

Its very good to have this to reference to!

I love being able to do a lot of this stuff in css, more often than not, when I play around with any of this in php it backfires badly :)
 
You must log in or register to reply here.
Similar threads
Thread starter Title Forum Replies Date
Abronsyth Resize Image for BBCode? Questions and Supports 1
Ittermat Automatically resize images? Questions and Supports 4
AlexC Resize Profile? Questions and Supports 2
dlithehil 1.3.6 Theme Not Showing Image Questions and Supports 1
Constellraetion Alt image trouble Questions and Supports 4

Similar threads

Users who are viewing this thread

Total: 1 (members: 0, guests: 1)
  • Forum Contains New Posts
  • Forum Contains No New Posts

Forum statistics

Threads
4,277
Messages
33,120
Members
1,602
Latest member
BerrieMilk
BETA

Latest Threads

Latest Posts

Share

Top