Post by dengine » Tue Aug 02, 2011 4:16 am

Ik vindt de manier waarop OC met afbeeldingen omgaat geweldig. Het bewaren van het orgineel en dynamisch resizen en cashen van afbeeldingen is geweldig. Een groot nadeel ervan vind ik echter dat ik vaak wordt getrakteerd met witruimte omdat elke afbeelding in zijn geheel wordt getoond. Omdat ik zelf een CMS gemaakt heb waarin ik altijd probeer zoveel mogelijk met het ontwerp van websites rekening te houden heb ik een tweetal functies van mijn CMS toegevoegd aan OC zodat als je een afbeelding wilt van 200x300 deze ook volledig gevuld wordt met de foto. Ik heb hiervoor de system>library>image uitgebreid en de catalog>model>tool>image met de functies "cropsize" en "onesize".

Cropsize:
Deze functie genereerd een uitsnede van de foto met de afmetingen zoals je deze opgeeft in het beheer. In de controller van categories staat bijv:

'thumb' => $this->model_tool_image->resize($image, $this->config->get('config_image_category_width'), $this->config->get('config_image_category_height'))
);

Als je deze nu vervangt door

'thumb' => $this->model_tool_image->cropsize($image, $this->config->get('config_image_category_width'), $this->config->get('config_image_category_height'))
);
Danwordt een uitsnede gemaakt vanuit het midden naar de zijkanten. De afbeelding wordt verschaald zodat de breedte of de hoogte past binnen het gebeid wat je opgeeft.

Onesize:
Deze functie gebruik ik zelf voor de grote weergave bij productdetails. Ik vindt het zelf onnodig om bij een popup witruimte rond de afbeelding te zien. Deze functie heeft maar 1 waarde nodig en verschaald de grootste waarde van het orgineel naar de opgegeven waarde.
In de product controller heb ik dus dit:

'popup' => $this->model_tool_image->resize($result['image'] , $this->config->get('config_image_popup_width')),
'thumb' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'))

vervangen door:

'popup' => $this->model_tool_image->onesize($result['image'] , $this->config->get('config_image_popup_width')),
'thumb' => $this->model_tool_image->cropsize($result['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'))

Nu heb ik dus voor de popup een verschaalde afbeelding zonder extra witruimte en de afbeeldingen daaronder (de kleine thumbs) zijn vierkant en helemaal gevuld. Met de cropsize functie kan het wel zo zijn dat er delen wegvallen van een foto maar dat neem ik zelf voor lief. Uiteindelijk ziet de gebruiker het volledige product op de productpagina. Ik heb de files met de image functie als zit erbij gedaan. Doe er je voordeel mee of helemaal niks.

NB. de files in de zip bevatten de standaard OC image functies + de extra functies. Je moet zelf de keuze maken waar je welke functie gebruikt en dit in de controller aanpassen. Standaard wordt resize() gebruikt maar kan nu vervangen worden door cropsize() en onesize().

OpenCart Developer sinds versie 1.4.9.3. Inmiddels volledige CMS geïntegreerd binnen OC 1.5. Sta open voor uitdagende custom uitbreidingen en custom themes, inclusief responsive design.

GEMAAKT MET OPENCART
http://www.worldofbessy.com
http://www.kiddycolors.com
http://www.ke-works.com
http://www.trendyard.nl
http://www.bigliftshipping.nl
http://www.kosterklokken.nl



Posts

Joined
Sun Mar 06, 2011 6:52 pm
Location - Colijnsplaat / Den Haag

Post by bougies » Tue Apr 24, 2012 10:50 pm

Heel erg bedankt hiervoor zocht er al een tijdje naar.

Groeten


Posts

Joined
Sun Sep 11, 2011 8:59 pm

Post by dengine » Tue Apr 24, 2012 10:57 pm

Super, daar doe ik het voor! Veel plezier ermee.

OpenCart Developer sinds versie 1.4.9.3. Inmiddels volledige CMS geïntegreerd binnen OC 1.5. Sta open voor uitdagende custom uitbreidingen en custom themes, inclusief responsive design.

GEMAAKT MET OPENCART
http://www.worldofbessy.com
http://www.kiddycolors.com
http://www.ke-works.com
http://www.trendyard.nl
http://www.bigliftshipping.nl
http://www.kosterklokken.nl



Posts

Joined
Sun Mar 06, 2011 6:52 pm
Location - Colijnsplaat / Den Haag

Post by jpopperman » Tue Jul 31, 2012 6:05 pm

Heel erg bedankt voor deze oplossing!


Posts

Joined
Mon Nov 15, 2010 1:24 am


Post by dengine » Tue Jul 31, 2012 6:12 pm

Graag gedaan!

OpenCart Developer sinds versie 1.4.9.3. Inmiddels volledige CMS geïntegreerd binnen OC 1.5. Sta open voor uitdagende custom uitbreidingen en custom themes, inclusief responsive design.

GEMAAKT MET OPENCART
http://www.worldofbessy.com
http://www.kiddycolors.com
http://www.ke-works.com
http://www.trendyard.nl
http://www.bigliftshipping.nl
http://www.kosterklokken.nl



Posts

Joined
Sun Mar 06, 2011 6:52 pm
Location - Colijnsplaat / Den Haag

Post by airslitter » Wed Dec 05, 2012 9:58 pm

Thank you!
Works great with OC 1.5.4

User avatar

Posts

Joined
Wed Jan 20, 2010 8:28 pm

Post by arek » Tue Jan 29, 2013 5:06 pm

Thanks man! In case you're in Poland, there will be a beer waiting for you (or 2) :)


Posts

Joined
Fri Nov 20, 2009 9:41 pm

Post by PlusCybernet » Sat Sep 07, 2013 4:55 pm

I want the same feature to be incorporated in my website, however have no enough technical knowledge to make these changes. So, I would appreciate if you can explain step-by-step changes are to be done (file-wise) ... it will be great help ...

My objectives are:

1. No white background in images.
2. Width should be fixed as per settings (e.g. 120px), and height can be proportionate according to Width.
3. Images should be aligned bottom

Thanks in advance!

User avatar

Posts

Joined
Sun Dec 25, 2011 12:01 pm

Post by nkfoodsonline » Fri Jul 10, 2015 7:20 pm

Thanks a ton for the methods. The other solutions affected images in other modules like slideshow. But this one was realy helpful. Thanks


Posts

Joined
Fri Jul 10, 2015 7:06 pm