Afbeelding (img)

Een afbeelding wordt toegevoegd door op het plusje in het snelmenu te klikken en te kiezen voor 'Afbeelding (img)', door met rechts op een bestaand element te klikken en te kiezen voor de optie 'Nieuw element > Afbeelding (img)' of door het element 'Afbeelding' vanuit de element verkenner op de pagina te slepen. Het afbeelding element is geen container element.

Een afbeelding element wordt bewerkt via een dubbelklik, via het pennetje in het snelmenu of via een klik met rechts en de optie 'Wijzigen element'. Er verschijnt een editor waar verschillende waarden kunnen worden ingesteld:

Afbeelding instellen 
Via de miniatuur achter 'Afbeelding' wordt een afbeelding geselecteerd. Een klik op de miniatuur opent de volgende popup:

In de popup wordt aan de linkerzijde het bestandsbeheer van de website getoond. Via deze verkenner kan een nieuwe afbeelding worden geüpload of een bestaande afbeelding worden geselecteerd. Na selectie wordt de afbeelding in de miniatuur van de editor getoond:

Popup-afbeelding
Op dezelfde wijze kan de miniatuur 'Popup-afbeelding' worden ingesteld. Via het kruisje kan de popup afbeelding weer worden verwijderd. Is de popup miniatuur ingesteld dan wordt deze afbeelding na een klik in een popup getoond.

Alternatieve tekst
In het veld 'Alternatieve tekst' kan een beschrijvende tekst voor de afbeelding worden ingesteld. Deze tekst is in moderne browsers niet direct zichtbaar maar is vooral nuttig voor zoekmachines en screenreaders.

Tooltip
De waarde ingevuld in het 'Tooltip' veld wordt getoond wanneer een bezoeker met de muis over de afbeelding beweegt.

Afmetingen handhaven
Via de 'Afmetingen handhaven' vinkjes kan een afbeelding automatisch op maat worden gemaakt. Wanneer een afbeelding wordt geselecteerd worden de breedte en hoogte van deze afbeelding overgenomen door de 'Breedte' en 'Hoogte' vinkjes. Een gebruiker kan één of beide vinkjes aanvinken. Wordt daarna een andere afbeelding geselecteerd dan zal deze afbeelding automatisch de breedte en/of hoogte van de vorige afbeelding overnemen. Via een popup kan de gebruiker tussen twee manieren van automatisch verkleinen kiezen:

De eerste manier vergroot of verkleint de afbeelding zo goed mogelijk waarna het midden uit de afbeelding wordt gesneden. De tweede manier verkleint de afbeelding als dit nodig is zonder iets van de afbeelding af te snijden. De resterende ruimte wordt opgevuld met een achtergrondkleur welke via het veld 'Canvas kleur' is in te stellen. Bij het automatisch verkleinen wordt altijd een kopie van de originele afbeelding gemaakt zodat deze niet verloren gaat.

De daadwerkelijke afbeelding (de afbeelding van het afbeelding element) kan op twee manieren worden bewerkt. Afbeeldingen kunnen direct in de site-editor worden vergroot/verkleind door het verslepen van de rechteronderhoek. Door de shift-toets ingedrukt te houden kan de breedte/hoogte verhouding van de afbeelding worden losgelaten. De vergroting/verkleining wordt uitgevoerd op het originele bestand, er wordt dus geen kopie gemaakt. Door het gebruik van slimme technieken vindt er geen kwaliteitsverlies bij het herhaaldelijk vergroten/verkleinen van een afbeelding plaats:

Naast het direct verkleinen/vergroten in de site beschikt TweeGo ook over een grafische editor waarmee afbeeldingen kunnen worden verkleind, vergroot, bijgesneden, gedraaid en gespiegeld. Deze editor is beschikbaar onder het tweede tabblad in de afbeelding popup:

In deze editor kan de afbeelding vrij op het canvas worden versleept. Via de scrollknop of de   en  vergrootglaasjes wordt in- en uitgezoomd. Door op de afbeelding te dubbelklikken wordt gewisseld tussen een zoom percentage van 100% en een percentage waarbij de afbeelding maximaal in beeld is, deze functionaliteit zit ook achter het  icoon.

Afbeelding vergroten/verkleinen
Via het  icoon wordt van en naar vergroot/verklein mode overgeschakeld. Onderstaande afbeelding toont de afbeelding editor in vergroot/verklein mode:

Door het anker rechts onderin de afbeelding te verslepen wordt de grootte van de afbeelding aangepast. De breedte/hoogte verhouding van de afbeelding wordt automatisch gehandhaafd maar kan worden uitgeschakeld door het vinkje 'Ratio behouden' uit te vinken. Ook door het ingedrukt houden / loslaten van de shift-toets kan worden gewisseld tussen verhoudingen handhaven en vrij vergroten/verkleinen. Naast het verslepen van het anker kan de grootte ook worden aangepast door het handmatig invullen van de 'Breedte' en 'Hoogte' velden. De vergroting/verkleining wordt uitgevoerd door op de knop 'Uitvoeren' te klikken.

Afbeelding bijsnijden
Via het  icoon wordt van en naar bijsnijden mode overgeschakeld. Onderstaande afbeelding toont de afbeelding editor in bijsnijden mode:

Met de rode rechthoek kan een gedeelte uit de afbeelding worden gesneden. De overlap tussen de rechthoek en de afbeelding is het gedeelte dat uit de afbeelding wordt gesneden. De grootte van de rechthoek kan worden aangepast via het anker rechts onderin de rechthoek. Via de cursor toetsen kunnen de afmetingen van de rechthoek nauwkeuriger worden gewijzigd. De rechthoek kan vrij over de afbeelding worden bewogen. Onderin beeld worden de afmetingen van de afbeelding na het uitvoeren van de bewerking getoond. Door op de knop 'Uitvoeren' te klikken wordt de bewerking daadwerkelijk uitgevoerd.

Afbeelding draaien en spiegelen
Via de  iconen wordt een afbeelding achtereenvolgens linksom gedraaid, rechtsom gedraaid, verticaal omgedraaid en gespiegeld.