mirror of
https://github.com/raseels-repos/golang-saas-starter-kit.git
synced 2025-06-13 00:07:30 +02:00
91 lines
7.4 KiB
Plaintext
91 lines
7.4 KiB
Plaintext
{{define "title"}}Example - Responsive Images{{end}}
|
|
{{define "style"}}
|
|
|
|
{{end}}
|
|
{{define "content"}}
|
|
|
|
{{ if .imgResizeDisabled }}
|
|
|
|
<h1 class="h3 text-red">Image Resize Not enabled</h1>
|
|
|
|
<p>AWS credentials must be set and then the following configs be set as well.</p>
|
|
<pre>
|
|
export WEB_APP_SERVICE_S3_BUCKET_PUBLIC=example-bucket-public
|
|
export WEB_APP_SERVICE_STATICFILES_IMG_RESIZE_ENABLED=1
|
|
</pre>
|
|
|
|
{{ else }}
|
|
|
|
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
|
<h1 class="h3 mb-0 text-gray-800">Responsive Images</h1>
|
|
<!-- a href="/user/update" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="far fa-edit fa-sm text-white-50 mr-1"></i>Edit Details</a -->
|
|
</div>
|
|
|
|
<p>This SaaS Starter Kit includes functions to resize images automatically and render the src of an image tag with an array of source URLs. The functions are custom functions that are rendered with the GO templates.</p>
|
|
|
|
<pre class="mb-4">{{ FUNCTION_NAME $._ctx "RELATIVE_PATH_TO_IMAGE_HERE" }}</pre>
|
|
|
|
<p>The <em>thumb</em> version of each function does not include the original as part of the array of images. This thumb version of the funciton is used then the original is a very large file at it is not needed to be displayed as the largest option.</p>
|
|
|
|
<h5 class="mt-5">S3ImgSrcLarge</h5>
|
|
<p>Generates three resized images from the original with widths of 320, 480 and 800. Then creates an array with four options: the three resized along with the original. Then sets the array as the value of the srcset in an img tag.</p>
|
|
<p class="mb-0 mt-2">Example HTML:</p><pre><img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre>
|
|
<p class="mb-0">Result:</p><pre><img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre></p>
|
|
<img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}/><br/>
|
|
|
|
<h5 class="mt-5">S3ImgThumbSrcLarge</h5>
|
|
<p>Generates three resized images from the original with widths of 320, 480 and 800. Then creates an array of only the three resized image. Then sets the array as the value of the srcset in an img tag.</p>
|
|
<p class="mb-0 mt-2">Example GO HTML:</p><pre><img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre>
|
|
<p class="mb-0">Result:</p><pre><img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre>
|
|
<img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}/><br/>
|
|
|
|
<h5 class="mt-5">S3ImgSrcMedium</h5>
|
|
<p>Generates resized images from the original with widths of 320 and 480. Then creates an array with three options: the two resized along with the original. Then sets the array as the value of the srcset in an img tag.</p>
|
|
<p class="mb-0 mt-2">Example GO HTML:</p><pre><img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre>
|
|
<p class="mb-0">Result:</p><pre><img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre>
|
|
<img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}/><br/>
|
|
|
|
<h5 class="mt-5">S3ImgThumbSrcMedium</h5>
|
|
<p>Generates two resized images from the original with widths of 320 and 480. Then creates an array of only the two resized image. Then sets the array as the value of the srcset in an img tag.</p>
|
|
<p class="mb-0 mt-2">Example GO HTML:</p><pre><img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre>
|
|
<p class="mb-0">Result:</p><pre><img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre>
|
|
<img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}/><br/>
|
|
|
|
<h5 class="mt-5">S3ImgSrcSmall</h5>
|
|
<p>Generates one resized image from the original with width of 320. Then creates an array with two options: the one resized along with the original. Then sets the array as the value of the srcset in an img tag.</p>
|
|
<p class="mb-0 mt-2">Example GO HTML:</p><pre><img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre>
|
|
<p class="mb-0">Result:</p><pre><img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre>
|
|
<img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}/><br/>
|
|
|
|
<h5 class="mt-5">S3ImgThumbSrcSmall</h5>
|
|
<p>Generates one resized image from the original with widths of 320. Then creates an array of only the one resized image. Then sets the array as the value of the srcset in an img tag.</p>
|
|
<p class="mb-0 mt-2">Example GO HTML:</p><pre><img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre>
|
|
<p class="mb-0">Result:</p><pre><img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}></pre>
|
|
<img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1000.png" }}/><br/>
|
|
|
|
<h5 class="mt-5">S3ImgSrc</h5>
|
|
<p>Generates an array of two images from the source file with widths of 320, 480, and then sets the array as the value of the srcset in an img tag.</p>
|
|
<p class="mb-0 mt-2">Example GO HTML:</p><pre><img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1000.png" 100 200 300 400 500 }} ></pre>
|
|
<p class="mb-0">Result:</p><pre><img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1000.png" 100 200 300 400 500 }} ></pre>
|
|
<img id="imgVerifyResizeEnabled" {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1000.png" 100 200 300 400 500 }}/><br/>
|
|
|
|
<h5 class="mt-5">S3ImgUrl <small>with Specific Width</small></h5>
|
|
<p>Generates a resized image from the source file with specific width and retuns the URL. The example below has the width set to 200 pixels wide.</p>
|
|
<p class="mb-0 mt-2">Example GO HTML:</p><pre><img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1000.png" 200 }}" ></pre>
|
|
<p class="mb-0">Result:</p><pre><img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1000.png" 200 }}" ></pre>
|
|
<img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1000.png" 200 }}" /><br/>
|
|
|
|
|
|
<h5 class="mt-5">S3Url</h5>
|
|
<p>If you do not want the image to be resized, you can use the S3Url function. This function returns the URL of the file on S3. However, when environment is not production, function returns the local relative path.</p>
|
|
<p class="mb-0 mt-2">Example GO HTML:</p><pre><img src="{{ S3Url "/images/example-image-resize-galaxy-3000x1000.png" }}" ></pre>
|
|
<p class="mb-0">Result:</p><pre><img src="{{ S3Url "/images/example-image-resize-galaxy-3000x1000.png" }}" ></pre>
|
|
<img src="{{ S3Url "/images/example-image-resize-galaxy-3000x1000.png" }}" style="width: 100%;" /><br/>
|
|
|
|
{{ end }}
|
|
|
|
{{end}}
|
|
{{define "js"}}
|
|
|
|
{{end}}
|