Package image

import "gitlab.com/zoralab/bissetii/pkg/components/internal/image"

Package image is the full package for rendering all compatible image tags.

The HTML template codes are written in Go’s string format under the corresponding group. This allows one to embed the HTML codes instead of parsing it from file.

Constants

All Bissetii Compressed Compiled CSS

const (
	CSSAMP = `amp-img{max-width:var(--image-max-width);height:var(--image-height);filter:var(--image-filter);border:var(--image-border);border-radius:var(--image-border-radius);animation:var(--image-animation)}`

	CSSCritical = `img{max-width:var(--image-max-width);height:var(--image-height);filter:var(--image-filter);border:var(--image-border);border-radius:var(--image-border-radius);animation:var(--image-animation)}`

	CSSTablet = ``

	CSSDesktop = ``

	CSSWidescreen = ``

	CSSPrint = `img{break-inside:avoid}`

	CSSVariables    = ``

	CSSVariablesAMP = ``
)

Constants for managing the package as a whole.

const (
	// Name is the block name (`{{- define "this-name" -}}`).
	Name = "image"

	// AMPName is the AMP HTML block name.
	AMPName = internal.AMPPrefix + Name

	// ParametersComment are the list of comment headers
	// describing inputs.
	ParametersComment = `
{{- /* .AltText           = the image alternate text                  */ -}}
{{- /* .SourceURL         = the image source URL                      */ -}}
{{- /* .Width             = explicit width setting                    */ -}}
{{- /* .Height            = explicit height setting                   */ -}}
{{- /* .SourceSet         = srcset in a single string                 */ -}}
{{- /* .Sizes             = media query for deploying different sizes */ -}}
{{- /* .IsMap             = image is url mapped. either "true" or ""  */ -}}
{{- /* .LoadingMode       = loading mode                              */ -}}
{{- /* .Layout            = AMP specific layout                       */ -}}
{{- /* .Class             = class tags                                */ -}}
{{- /* .Sources           = list of art-directed image sources        */ -}}
{{- /*   .SourceSet       = an image source with its source set       */ -}}
{{- /*   .Media           = the image source associated media query   */ -}}
`
)

Full HTML codes for rendering templates without needing to parse file.

const (
	// HTML is the vanilla HTML output type.
	HTML = `
{{- if .Sources -}}
<picture>

	{{- range $s := .Sources }}

		<source srcset="{{- $s.SourceSet -}}"

			{{- if $s.Media }} media="{{- $s.Media -}}"{{- end -}}

			{{- if $s.Type }} type="{{- $s.Type -}}"{{- end -}}

		>

	{{- end }}
{{- end }}

<img alt="{{- .AltText -}}"

	src="{{- .SourceURL -}}"
{{- if .Class }}

	class="{{- .Class -}}"
{{- end -}}
{{- if .Width }}

	width="{{- .Width -}}"
{{- end -}}
{{- if .Height }}

	height="{{- .Height -}}"
{{- end -}}
{{- if .SourceSet }}

	srcset="{{- .SourceSet -}}"
{{- end -}}
{{- if .Sizes }}

	sizes="{{- .Sizes -}}"
{{- end -}}
{{- if eq .IsMap "true" }}

	ismap
{{- end -}}
{{- if .LoadingMode }}

	loading="{{- .LoadingMode -}}"
{{- end -}}
/>

{{- if .Sources }}
</picture>
{{- end }}
`

	// AMPHTML is the Accelerated Mobile Pages HTML output type.
	AMPHTML = `
<amp-img alt="{{- .AltText -}}"

	src="{{- .SourceURL -}}"
{{- if .Class }}

	class="{{- .Class -}}"
{{- end -}}
{{- if .Width }}

	width="{{- .Width -}}"
{{- end -}}
{{- if .Height }}

	height="{{- .Height -}}"
{{- end -}}
{{- if .SourceSet }}

	srcset="{{- .SourceSet -}}"
{{- end -}}
{{- if .Sizes }}

	sizes="{{- .Sizes -}}"
{{- end -}}
{{- if .Layout }}

	layout="{{- .Layout -}}"
{{- end -}}
></amp-img>
`
)

Data

type Data struct {
	AltText     string
	SourceURL   string
	Width       string
	Height      string
	SourceSet   string
	Sizes       string
	IsMap       string
	LoadingMode string
	Layout      string
	Class       string
	Sources     []*Source
}

Data is the data structure for rendering the component.

Source

type Source struct {
	SourceSet string
	Media     string
	Type      string
}