Image

 
 

Overview :

The NGE Image component is used to display an image, with more features : image shape, hover image, hover html content, animations effects, title and legend. Also has features common to all NGE UI components : inline-editing, conditional display, editing permissions.
 
See also :
- Image grid
- Image slider
- Image carousel
 

Features :

  • Image selection/resize/crop in NGE media manager
  • Hover image selection/resize/crop in NGE media manager
  • Link : menu/article/url
  • Full html hover content.
  • Main header text
  • Main legend custom html
  • Hover html display : always/hover/outside
  • Hover html horizontal position : left/center/right/all width, width, margin
  • Hover html vertical position : top/middle/bottom/all height, height, margin
  • Hover html default font settings : 300 fonts, size, colors, weight, spacing, capitalize ( see more)
  • Hover html border settings : style, colors, custom sides, custom rounded corners (see more)
  • Hover html border animated effects. (see more)
  • Hover html background settings : filling, colors, opacity, images. (see more)
  • Hover html background animated effects. (see more)
  • Hover html animated display and hover effects (40+ effects) (see more)

 

Panel features :

This component has general features common to all panels. 

  • General border settings : style, colors, custom sides, custom rounded corners (see more)
  • General border animated effects. (see more)
  • General background settings : filling, colors, opacity, images. (see more)
  • General background animated effects. (see more)
  • General shadow  : style, always/hover
  • Header position (top/bottom/left/right)
  • Header align (left/center/right)
  • Header paddings
  • Header style : default template tag (h1 – h6) or custom
  • Header font settings : 300 fonts, size, colors, weight, spacing, capitalize ( see more)
  • Header glyph settings : position, size, colors (see more)
  • Header glyph animated effects : (see more)
  • Header stroke : style, position, width, color
  • Header border settings : style, colors, custom sides, custom rounded corners (see more)
  • Header border animated effects. (see more)
  • Header background settings : filling, colors, opacity, images. (see more)
  • Header background animated effects. (see more)
  • Header animated display effects (40+ effects) (see more)
  • Legend custom html
  • Legend display : always/Hover/Outside
  • Legend position (top/bottom/left/right)
  • Legend default text align (left/center/right/justified)
  • Legend padding s
  • Legend font : template default/custom
  • Legend font settings : 300 fonts, size, colors, weight, spacing, capitalize ( see more)
  • Legend border settings : style, colors, custom sides, custom rounded corners (see more)
  • Legend border animated effects. (see more)
  • Legend background settings : filling, colors, opacity, images. (see more)
  • Legend background animated effects. (see more)
  • Legend animated display effects (40+ effects) (see more)
 

Common features :

This component has general features common to all NGE UI components.

  • Alignment in page : left/center/right/justify
  • Width : content/custom (% or px) 
  • external margins
  • animated display effects (40+ effects) (see more)
  • hover effects
  • front editing (content – options – animations)
  • patterns (custom patterns)
  • conditional display : users/levels/groups, menus/categories/articles/tags/components, date/time/month/day, smartphone/tablet/desktop/printer, language
  • edition permissions (content – select patterns – custom settings – display settings) (see more)

 

Inline editing :

This component can be edited directly in front-end. See more.
 

Development :

WITHOUT CODING : this component can be created 100% without coding and without technical knowledge. All features are configurable on the screen.
OVERRIDE : all rendered code : html, css, js can be overriden (Joomla template override). See More
API : this component can be created in PHP in any Joomla content or module/component, using the internal API. See more