From d574f8e284d6a79d5d1195fe627276591476e3e4 Mon Sep 17 00:00:00 2001 From: Lee Brown Date: Mon, 5 Aug 2019 02:36:54 -0800 Subject: [PATCH] Fixed example responsive images page. --- cmd/web-app/handlers/examples.go | 53 +++++++++++++- cmd/web-app/handlers/routes.go | 6 +- .../templates/content/examples-images.gohtml | 73 +++++++++++++------ go.mod | 2 +- 4 files changed, 105 insertions(+), 29 deletions(-) diff --git a/cmd/web-app/handlers/examples.go b/cmd/web-app/handlers/examples.go index 8a75940..ce07f91 100644 --- a/cmd/web-app/handlers/examples.go +++ b/cmd/web-app/handlers/examples.go @@ -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) } diff --git a/cmd/web-app/handlers/routes.go b/cmd/web-app/handlers/routes.go index 8b9f70c..672c202 100644 --- a/cmd/web-app/handlers/routes.go +++ b/cmd/web-app/handlers/routes.go @@ -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{ diff --git a/cmd/web-app/templates/content/examples-images.gohtml b/cmd/web-app/templates/content/examples-images.gohtml index 057e019..783b192 100644 --- a/cmd/web-app/templates/content/examples-images.gohtml +++ b/cmd/web-app/templates/content/examples-images.gohtml @@ -4,40 +4,65 @@ {{end}} {{define "content"}} -

S3ImgSrcLarge

-

320, 480, 800

- + {{ if .imgResizeDisabled }} +

Image Resize Not enabled

-

S3ImgThumbSrcLarge

-

320, 480, 800

- + AWS credentials must be set and then the following configs be set as well. + 
+            export WEB_APP_SERVICE_S3_BUCKET_PUBLIC=example-bucket-public
+            export WEB_APP_SERVICE_STATICFILES_IMG_RESIZE_ENABLED=1
+
-

S3ImgSrcMedium

-

320, 640

- + {{ else }} +

S3ImgSrcLarge

+

320, 480, 800

+
+ HTML: 
<img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
+ Result: 
<img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
-

S3ImgThumbSrcMedium

-

320, 640

- +

S3ImgThumbSrcLarge

+

320, 480, 800

+
+ HTML: 
<img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
+ Result: 
<img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
+

S3ImgSrcMedium

+

320, 640

+
+ HTML: 
<img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
+ Result: 
<img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
-

S3ImgSrcSmall

-

320

- +

S3ImgThumbSrcMedium

+

320, 640

+
+ HTML: 
<img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
+ Result: 
<img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
+

S3ImgSrcSmall

+

320

+
+ HTML: 
<img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
+ Result: 
<img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
-

S3ImgThumbSrcSmall

-

320

- +

S3ImgThumbSrcSmall

+

320

+
+ HTML: 
<img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
+ Result: 
<img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}>
-

S3ImgSrc

-

returns Src array

- +

S3ImgSrc

+

returns Src array

+
+ HTML: 
<img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }} >
+ Result: 
<img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }} >
-

S3ImgUrl

-

Returns URL for file on S3

- +

S3ImgUrl

+

Returns URL for file on S3

+
+ HTML: 
<img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" >
+ Result: 
<img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" >
+ {{ end }} {{end}} {{define "js"}} diff --git a/go.mod b/go.mod index 02265c4..e62415d 100644 --- a/go.mod +++ b/go.mod @@ -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