Images Interface

class epyk.interfaces.components.CompImages.Images(ui)

animated(image: str = '', text: str = '', title: str = '', url: Optional[str] = None, path: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (200, 'px'), height: Optional[Union[tuple, int, str]] = (200, 'px'), html_code: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) → AnimatedImage

Advance image with mask and gallery link. This will display some details when the mouse is on the container.

Tags:

Categories:

Usage:

c = page.ui.images.animated("epykIcon.PNG", text="This is a comment", title="Title", url="#")
c.style.css.borders()

Underlying HTML Objects:

• epyk.core.html.HtmlImage.AnimatedImage

Related Pages:

https://tympanus.net/Tutorials/OriginalHoverEffects/

Parameters:

• image – Optional. The image file name

• text – Optional. String. The image file path

• title – Optional. The image title displayed in to the mask on mouse hover the container

• url – Optional. The link to the gallery

• path – Optional. String. The image file path

• width – Optional. Tuple. The component width in pixel or percentage

• height – Optional. Tuple. The component height in pixel or percentage

• html_code – Optional. An identifier for this component (on both Python and Javascript side)

• options – Optional. Specific Python options available for this component

• profile – Optional. A flag to set the component performance storage

avatar(text: str = '', image: Optional[str] = None, path: Optional[str] = None, status: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (30, 'px'), height: Optional[Union[tuple, int, str]] = (30, 'px'), align: str = 'center', html_code: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, menu: Optional[Html] = None, options: Optional[Union[bool, dict]] = None) → Div

Generate or load an avatar.

Tags:

Categories:

Usage:

page.ui.images.avatar("Epyk", status='out')
page.ui.images.avatar(image="epykIcon.PNG", path=config.IMG_PATH, status=False)

Underlying HTML Objects:

• epyk.core.html.HtmlContainer.Div

• epyk.core.html.HtmlImage.Image

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/image.py

Parameters:

• text – Optional. The value to be displayed to the component

• image – Optional. The url of the image

• path – Optional. String. The image file path

• status – Optional. The avatar status code. Default no status

• width – Optional. Tuple. The component width in pixel or percentage

• height – Optional. Tuple. The component height in pixel or percentage

• align – Optional. A string with the horizontal position of the component

• html_code – Optional. An identifier for this component (on both Python and Javascript side)

• profile – Optional. A flag to set the component performance storage

• options – Optional. Specific Python options available for this component

background(url: str, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (300, 'px'), size: str = 'cover', margin: int = 0, align: str = 'center', html_code: Optional[str] = None, position: str = 'middle', profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None) → Div

Add a background image.

Tags:

Categories:

Usage:

:param url: Optional. The link to the gallery
:param width: Optional. A tuple with the integer for the component width and its unit
:param height: Optional. A tuple with the integer for the component height and its unit
:param size: Optional. The type of background in
:param margin: Optional. The CSS margin properties are used to create space around elements, outside of any defined

borders

Parameters:

• align – Optional. A string with the horizontal position of the component

• html_code – Optional. An identifier for this component (on both Python and Javascript side)

• position – Optional. A string with the vertical position of the component

• profile – Optional. A flag to set the component performance storage

• options – Optional. Specific Python options available for this component

badge(text: str = '', label: Optional[str] = None, icon: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (25, 'px'), height: Optional[Union[tuple, int, str]] = (25, 'px'), background_color: Optional[str] = None, color: Optional[str] = None, url: Optional[str] = None, tooltip: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) → Badge

Display a badge component using Bootstrap.

Tags:

Categories:

Usage:

page.ui.images.badge("Test badge", "Label", icon="fas fa-align-center")
page.ui.images.badge("This is a badge", background_color="red", color="white")
page.ui.images.badge(12, icon="far fa-bell", options={"badge_position": 'right'})

b = page.ui.images.badge(
  7688, icon="fab fa-python", options={'badge_css': {'color': 'white', "background": 'red'}})
b.options.badge_css = {"background": 'green'}

Underlying HTML Objects:

• epyk.core.html.HtmlImage.Badge

Related Pages:

https://getbootstrap.com/docs/4.0/components/badge/

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/image.py https://github.com/epykure/epyk-templates/blob/master/locals/components/links.py

Parameters:

• text – Optional. The content of the badge

• label – Optional. The label to display close to the badge

• icon – Optional. A String with the icon to display from font-awesome

• background_color – Optional. The background color of the badge

• color – Optional. The text color of the badge

• url – Optional. The underlying url link for the badge

• width – Optional. A tuple with the integer for the component width and its unit

• height – Optional. A tuple with the integer for the component height and its unit

• tooltip – String. Optional, The text to display in the tooltip

• options – Optional. Specific Python options available for this component

• profile – Optional. A boolean to store the performances for each components

carousel(images: Optional[list] = None, path: Optional[str] = None, selected: int = 0, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (300, 'px'), options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) → ImgCarousel

Carousel component for pictures.

Tags:

Categories:

Usage:

car = page.ui.images.carousel(["epykIcon.PNG", "epyklogo.ico", "epyklogo_whole_big.png"],
                           path=r"../../../static/images", height=(200, 'px'))
car.click([page.js.console.log('data', skip_data_convert=True)])

Underlying HTML Objects:

• epyk.core.html.HtmlImage.ImgCarousel

Related Pages:

https://www.cssscript.com/basic-pure-css-slideshow-carousel/

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/image.py

Parameters:

• images – Optional. With the different picture file names

• path – Optional. The common path for the pictures

• width – Optional. Tuple. The component width in pixel or percentage

• height – Optional. Tuple. The component height in pixel

• selected – Optional. The selected item index

• options – Optional. Specific Python options available for this component

• profile – Optional. A flag to set the component performance storage

circular(image: Optional[str] = None, path: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (200, 'px'), height: Optional[Union[tuple, int, str]] = (200, 'px'), align: str = 'center', html_code: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None) → Image

Add an HTML image to the page. The path can be defined either in a absolute or relative format.

Tip: The absolute format does not work on servers. It is recommended to use relative starting to the root of the server.

Tags:

Categories:

Usage:

page.ui.circular("epykIcon.PNG", path=r"../../../static/images", height=(50, "px"))

Underlying HTML Objects:

• epyk.core.html.HtmlImage.Image

Related Pages:

https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp https://www.w3schools.com/cssref/css3_pr_border-radius.asp

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/image.py

Parameters:

• image – Optional. The image file name

• path – Optional. String. The image file path

• width – Optional. Tuple. The component width in pixel or percentage

• height – Optional. Tuple. The component height in pixel or percentage

• align – Optional. A string with the horizontal position of the component

• html_code – Optional. An identifier for this component (on both Python and Javascript side)

• profile – Optional. A flag to set the component performance storage

• options – Optional. Specific Python options available for this component

color(code: str, color: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (110, 'px'), height: Optional[Union[tuple, int, str]] = (25, 'px'), options: Optional[Union[bool, dict]] = None, helper: Optional[str] = None, profile: Optional[Union[bool, dict]] = None) → Div

Simple vignette to display a color with it is code.

TODO: Return the hex code of the color when dom.content used

Tags:

Categories:

Usage:

page.ui.images.color("FFFFFF")

Underlying HTML Objects:

• epyk.core.html.HtmlContainer.Div

Parameters:

• code – The color code

• color – Optional. The font color

• width – Optional. A tuple with the integer for the component width and its unit

• height – Optional. A tuple with the integer for the component height and its unit

• options – Optional. Specific Python options available for this component

• helper – Optional. A tooltip helper

• profile – Optional. A flag to set the component performance storage

container(components: List[Html], max_width: Optional[Union[tuple, int, str]] = (900, 'px'), align: str = 'center', profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None) → Div

Empty container for images.

Tags:

Categories:

Usage:

:param components: List of HTML Component. internal components
:param max_width: Optional. The maximum width for this container
:param align: Optional. A string with the horizontal position of the component
:param profile: Optional. A flag to set the component performance storage
:param options: Optional. Specific Python options available for this component

emoji(symbol: Optional[str] = None, top: Optional[Union[tuple, int, str]] = (20, 'px'), options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) → Emoji

Tags:

Categories:

Usage:

page.ui.images.emoji(page.symbols.smileys.DISAPPOINTED_FACE)

Underlying HTML Objects:

• epyk.core.html.HtmlImage.Emoji

Related Pages:

https://github.com/wedgies/jquery-emoji-picker

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/image.py

Parameters:

• symbol – Optional. The emoji code

• top – Optional. The number of pixel from the top of the page

• options – Optional. Specific Python options available for this component

• profile – Optional. A flag to set the component performance storage

epyk(align: str = 'center', width: Optional[Union[tuple, int, str]] = (None, '%'), height: Optional[Union[tuple, int, str]] = ('auto', ''), html_code: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, tooltip: Optional[str] = None, options: Optional[Union[bool, dict]] = None)

Add the Epyk Icon.

Usage:

page.ui.icons.epyk()

Underlying HTML Objects:

• epyk.core.html.HtmlImage.Image

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/image.py

Parameters:

• align – Optional. A string with the horizontal position of the component.

• width – Optional. A tuple with the integer for the component width and its unit

• height – Optional. A tuple with the integer for the component height and its unit

• html_code – Optional. An identifier for this component (on both Python and Javascript side)

• profile – Optional. A flag to set the component performance storage

• tooltip – Optional. A string with the value of the tooltip

• options – Optional. Specific Python options available for this component

figure(image: Optional[str] = None, caption: Optional[str] = None, path: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), align: str = 'center', html_code: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, tooltip: Optional[str] = None, options: Optional[Union[bool, dict]] = None) → Figure

Display a picture as a figure component with an attached caption object.

Tags:

Categories:

Related Pages:

https://www.w3schools.com/tags/tag_figcaption.asp

Usage:

page.ui.images.figure("33c33735-8a1e-4bef-8201-155b4775304a.jpg", "test caption",
  path=picture_path, width=(100, 'px'))

Parameters:

• image – Optional. The url path of the image

• caption – Optional.

• path – Optional. The image file path

• width – Optional. A tuple with the integer for the component width and its unit

• height – Optional. A tuple with the integer for the component height and its unit

• align – Optional. A string with the horizontal position of the component

• html_code – Optional. An identifier for this component (on both Python and Javascript side)

• profile – Optional. A flag to set the component performance storage

• tooltip – Optional. A string with the value of the tooltip

• options – Optional. Specific Python options available for this component

gallery(images: Optional[List[Union[dict, Html]]] = None, columns: int = 6, width: Optional[Union[tuple, int, str]] = (None, '%'), height: Optional[Union[tuple, int, str]] = ('auto', ''), options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) → Grid

Mosaic of pictures.

Tags:

Categories:

Usage:

Related Pages:

Underlying HTML Objects:

Templates:

Parameters:

• images – Optional. The list with the pictures

• columns – Optional. The number of column for the mosaic component

• width – Optional. A tuple with the integer for the component width and its unit

• height – Optional. A tuple with the integer for the component height and its unit

• options – Optional. Specific Python options available for this component

• profile – Optional. A flag to set the component performance storage

icon(icon: Optional[str] = None, family: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, height: Optional[Union[tuple, int, str]] = (None, 'px'), color: Optional[str] = None, tooltip: Optional[str] = None, align: str = 'left', options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) → Icon

Add an icon to the page.

Tags:

Categories:

Usage:

page.ui.images.icon("fab fa-angellist")
icon = page.ui.icon("fab fa-python")

Underlying HTML Objects:

• epyk.core.html.HtmlImage.Icon

Related Pages:

https://fontawesome.com/icons?m=free

Parameters:

• icon – Optional. The component icon content from font-awesome references

• family – Optional. The Icon framework reference

• html_code – Optional. An identifier for this component (on both Python and Javascript side)

• width – Optional. A tuple with the integer for the component width and its unit

• height – Optional. A tuple with the integer for the component height and its unit

• color – Optional. The font color in the component. Default inherit

• tooltip – Optional. A string with the value of the tooltip

• align – Optional. The text-align property within this component

• options – Optional. Specific Python options available for this component

• profile – Optional. A flag to set the component performance storage

img(image: Optional[str] = None, path: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), align: str = 'center', html_code: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, tooltip: Optional[str] = None, options: Optional[Union[bool, dict]] = None) → Image

Add an HTML image to the page. The path can be defined either in a absolute or relative format.

Tip: The absolute format does not work on servers. It is recommended to use relative starting to the root of the server.

Tags:

Categories:

Usage:

page.ui.img("epykIcon.PNG", path=r"../../../static/images", height=(50, "px"))

Underlying HTML Objects:

• epyk.core.html.HtmlImage.Image

Related Pages:

https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp https://www.w3schools.com/cssref/css3_pr_border-radius.asp

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/image.py

Parameters:

• image – Optional. The image file name

• path – Optional. Optional. The image file path

• width – Optional. Optional. The component width in pixel or percentage

• height – Optional. Optional. The component height in pixel or percentage

• align – Optional. A string with the horizontal position of the component

• html_code – Optional. An identifier for this component (on both Python and Javascript side)

• profile – Optional. A flag to set the component performance storage

• tooltip – Optional. A string with the value of the tooltip

• options – Optional. Specific Python options available for this component

logo(url: str, width: Optional[Union[tuple, int, str]] = (160, 'px'), height: Optional[Union[tuple, int, str]] = (60, 'px'), top: Optional[Union[tuple, int, str]] = (16, 'px'), left: Optional[Union[tuple, int, str]] = (16, 'px'), profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None) → Div

Tags:

Categories:

Usage:

:param url: Optional. The link to the gallery
:param width: Optional. The component width in pixel or percentage
:param height: Optional. The component height in pixel or percentage
:param top: Optional. A tuple with the integer for the component's distance to the top of the page
:param left: Optional. A tuple with the integer for the component's distance to the left of the page
:param profile: Optional. A flag to set the component performance storage
:param options: Optional. Specific Python options available for this component

section(image: str, name: str, title: str, text: str, url: Optional[str] = None, path: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (200, 'px'), height: Optional[Union[tuple, int, str]] = (200, 'px'), profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None) → Div

Tags:

Categories:

Usage:

page.ui.images.section("epykIcon.PNG", "# Test", "Epyk Test", 'This is a test', path=r"../../../static/images")

Underlying HTML Objects:

• epyk.core.html.HtmlContainer.Div

• epyk.core.html.HtmlText.Span

• epyk.core.html.HtmlText.Paragraph

• epyk.core.html.HtmlText.Title

• epyk.core.html.HtmlImage.Image

Parameters:

• image – The url of the image

• name – The name of the image

• title – Optional. A panel title. This will be attached to the title property

• text – Optional. The value to be displayed to the component

• url – Optional. The link to the gallery

• path – Optional. The image file path

• width – Optional. The component width in pixel or percentage

• height – Optional. The component height in pixel or percentage

• profile – Optional. A flag to set the component performance storage

• options – Optional. Specific Python options available for this component

wallpaper(url: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (100, '%'), size: str = 'cover', margin: int = 0, align: str = 'center', html_code: Optional[str] = None, position: str = 'middle', profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None) → Background

Tags:

Background

Categories:

Usage:

:param url: Optional. The link to the gallery
:param width: Optional. Tuple. The component width in pixel or percentage
:param height: Optional. Tuple. The component height in pixel or percentage
:param size: Optional. The type of background in
:param margin: Optional. The CSS margin properties are used to create space around elements,

outside of any defined borders

Parameters:

• align – Optional. The text-align property within this component

• html_code – Optional. An identifier for this component (on both Python and Javascript side)

• position – Optional. The position compared to the main component tag

• profile – Optional. A flag to set the component performance storage

• options – Optional. Specific Python options available for this component

youtube(video_id: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), align: str = 'center', html_code: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[Union[bool, dict]] = None) → Image

Get teh picture used by youtube.

Tags:

Categories:

Usage:

:param video_id: Optional. The youtube video ID
:param width: Optional. The component width in pixel or percentage
:param height: Optional. The component height in pixel or percentage
:param align: Optional. A string with the horizontal position of the component
:param html_code: Optional. An identifier for this component (on both Python and Javascript side)
:param profile: Optional. A flag to set the component performance storage
:param options: Optional. Specific Python options available for this component