You've already forked golang-saas-starter-kit
mirror of
https://github.com/raseels-repos/golang-saas-starter-kit.git
synced 2025-08-08 22:36:41 +02:00
Fixed example responsive images page.
This commit is contained in:
Lee Brown
@@ -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><img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></pre>
|
||||
Result: <pre><img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></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><img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></pre>
|
||||
Result: <pre><img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></pre>
|
||||
|
||||
<h3>S3ImgSrcMedium</h3>
|
||||
<p>320, 640</p>
|
||||
<img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
|
||||
HTML: <pre><img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></pre>
|
||||
Result: <pre><img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></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><img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></pre>
|
||||
Result: <pre><img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></pre>
|
||||
|
||||
<h3>S3ImgSrcSmall</h3>
|
||||
<p>320</p>
|
||||
<img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
|
||||
HTML: <pre><img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></pre>
|
||||
Result: <pre><img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></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><img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></pre>
|
||||
Result: <pre><img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}></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><img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }} ></pre>
|
||||
Result: <pre><img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }} ></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><img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" ></pre>
|
||||
Result: <pre><img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" ></pre>
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{end}}
|
||||
{{define "js"}}
|
||||
|
||||
2
go.mod
2
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
|
||||
|
||||
Reference in New Issue
Block a user