Extra afbeeldingsfuncties
Posted: 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().
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().