Commit d574f8e2 authored by Lee Brown's avatar Lee Brown

Fixed example responsive images page.

parent 920d413c
......@@ -3,12 +3,14 @@ package handlers
import (
"context"
"net/http"
"net/http/httptest"
"geeks-accelerator/oss/saas-starter-kit/internal/platform/web"
"geeks-accelerator/oss/saas-starter-kit/internal/platform/web/webcontext"
"geeks-accelerator/oss/saas-starter-kit/internal/platform/web/weberror"
"github.com/gorilla/schema"
"github.com/pkg/errors"
"golang.org/x/net/html"
)
// Example represents the example pages
......@@ -129,8 +131,57 @@ func (h *Examples) Images(ctx context.Context, w http.ResponseWriter, r *http.Re
// List of image sizes that will be used to resize the source image into. The resulting images will then be included
// as apart of the image src tag for a responsive image tag.
data := map[string]interface{}{
"imgSizes": []int{100, 200, 300, 400, 500},
"imgSizes": []int{100, 200, 300, 400, 500},
"imgResizeDisabled": false,
}
// Render the example page to detect in image resize is enabled, since the config is not passed to handlers and
// the custom HTML resize function is init in main.go.
rr := httptest.NewRecorder()
err := h.Renderer.Render(ctx, rr, r, TmplLayoutBase, "examples-images.gohtml", web.MIMETextHTMLCharsetUTF8, http.StatusOK, data)
if err != nil {
return err
}
// Parsed the rendered response looking for an example image tag.
exampleImgID := "imgVerifyResizeEnabled"
var exampleImgAttrs []html.Attribute
doc, err := html.Parse(rr.Body)
if err != nil {
return err
}
var f func(*html.Node)
f = func(n *html.Node) {
if n.Type == html.ElementNode && n.Data == "img" {
for _, a := range n.Attr {
if a.Key == "id" && a.Val == exampleImgID {
exampleImgAttrs = n.Attr
break
}
}
}
for c := n.FirstChild; c != nil; c = c.NextSibling {
f(c)
}
}
f(doc)
// If the example image has the attribute srcset then we know resize is enabled.
var exampleImgHasSrcSet bool
if len(exampleImgAttrs) > 0 {
for _, a := range exampleImgAttrs {
if a.Key == "srcset" {
exampleImgHasSrcSet = true
break
}
}
}
// Image resize must be disabled as could not find the example image with attribute srcset.
if !exampleImgHasSrcSet {
data["imgResizeDisabled"] = true
}
// Re-render the page with additional data and return the results.
return h.Renderer.Render(ctx, w, r, TmplLayoutBase, "examples-images.gohtml", web.MIMETextHTMLCharsetUTF8, http.StatusOK, data)
}
......@@ -119,9 +119,9 @@ func APP(shutdown chan os.Signal, log *log.Logger, env webcontext.Env, staticDir
ex := Examples{
Renderer: renderer,
}
app.Handle("POST", "/examples/flash-messages", ex.FlashMessages)
app.Handle("GET", "/examples/flash-messages", ex.FlashMessages)
app.Handle("GET", "/examples/images", ex.Images)
app.Handle("POST", "/examples/flash-messages", ex.FlashMessages, mid.AuthenticateSessionOptional(authenticator))
app.Handle("GET", "/examples/flash-messages", ex.FlashMessages, mid.AuthenticateSessionOptional(authenticator))
app.Handle("GET", "/examples/images", ex.Images, mid.AuthenticateSessionOptional(authenticator))
// Register geo
g := Geo{
......
......@@ -4,40 +4,65 @@
{{end}}
{{define "content"}}
<h3>S3ImgSrcLarge</h3>
<p>320, 480, 800</p>
<img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
{{ if .imgResizeDisabled }}
<h3>Image Resize Not enabled</h3>
<h3>S3ImgThumbSrcLarge</h3>
<p>320, 480, 800</p>
<img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
AWS credentials must be set and then the following configs be set as well.
<pre>
export WEB_APP_SERVICE_S3_BUCKET_PUBLIC=example-bucket-public
export WEB_APP_SERVICE_STATICFILES_IMG_RESIZE_ENABLED=1
</pre>
<h3>S3ImgSrcMedium</h3>
<p>320, 640</p>
<img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
{{ else }}
<h3>S3ImgSrcLarge</h3>
<p>320, 480, 800</p>
<img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgThumbSrcMedium</h3>
<p>320, 640</p>
<img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
<h3>S3ImgThumbSrcLarge</h3>
<p>320, 480, 800</p>
<img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgSrcMedium</h3>
<p>320, 640</p>
<img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgSrcSmall</h3>
<p>320</p>
<img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
<h3>S3ImgThumbSrcMedium</h3>
<p>320, 640</p>
<img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgSrcSmall</h3>
<p>320</p>
<img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgThumbSrcSmall</h3>
<p>320</p>
<img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
<h3>S3ImgThumbSrcSmall</h3>
<p>320</p>
<img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgSrc</h3>
<p>returns Src array</p>
<img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }}/>
<h3>S3ImgSrc</h3>
<p>returns Src array</p>
<img id="imgVerifyResizeEnabled" {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes &#x7D;&#x7D; &gt;</pre>
Result: <pre>&lt;img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }} &gt;</pre>
<h3>S3ImgUrl</h3>
<p>Returns URL for file on S3</p>
<img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" />
<h3>S3ImgUrl</h3>
<p>Returns URL for file on S3</p>
<img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" /><br/>
HTML: <pre>&lt;img src="&#x7B;&#x7B; S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 &#x7D;&#x7D;" &gt;</pre>
Result: <pre>&lt;img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" &gt;</pre>
{{ end }}
{{end}}
{{define "js"}}
......
......@@ -48,7 +48,7 @@ require (
github.com/urfave/cli v1.20.0
github.com/xwb1989/sqlparser v0.0.0-20180606152119-120387863bf2
golang.org/x/crypto v0.0.0-20190701094942-4def268fd1a4
golang.org/x/net v0.0.0-20190724013045-ca1201d0de80 // indirect
golang.org/x/net v0.0.0-20190724013045-ca1201d0de80
golang.org/x/sys v0.0.0-20190730183949-1393eb018365 // indirect
golang.org/x/text v0.3.2
golang.org/x/tools v0.0.0-20190730205120-7deaedd405c4 // indirect
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment