Update image tab page
authorSteve Sutton <steve@gaslightmedia.com>
Thu, 21 Feb 2019 15:16:48 +0000 (10:16 -0500)
committerSteve Sutton <steve@gaslightmedia.com>
Tue, 12 Mar 2019 19:50:53 +0000 (15:50 -0400)
Redoing indents.
Trying to update the max size.

views/admin/member/memberInfo/editMediaImages.html

index e0a5d32..deefd44 100644 (file)
@@ -1,22 +1,22 @@
-
-    <h2>Images</h2>
-    <div class="glm-admin-table glm-admin-table-inner-wrapper">
-        <div id="glm-table-images" class="glm-admin-table glm-admin-table-inner">
-            <div class="glm-row">
-                <div class="glm-small-12">
-                    <p>
-                        Best image size to provide is between 800 and 1000 pixels wide and stored as a JPG or JPEG file.
-                        Also try to supply images that have a reasonable "aspect ratio" (not too tall, not too wide).
-                        Files provided like this should have a file size of 100 to 250 KB. Images will be automatically
-                        resized for use in the Web site. Images that are too large will be rejected.
-                   </p>
-                </div>
+{* Smarty Template for the Edit MemberInfo Images tab *}
+<h2>Images</h2>
+<div class="glm-admin-table glm-admin-table-inner-wrapper">
+    <div id="glm-table-images" class="glm-admin-table glm-admin-table-inner">
+        <div class="glm-row">
+            <div class="glm-small-12">
+                <p>
+                Best image size to provide is between 800 and 1000 pixels wide and stored as a JPG or JPEG file.
+                Also try to supply images that have a reasonable "aspect ratio" (not too tall, not too wide).
+                Files provided like this should have a file size of 100 to 250 KB. Images will be automatically
+                resized for use in the Web site. Images that are too large will be rejected.
+                </p>
             </div>
-            <div class="glm-row">
-                <h4 {if $memberInfo.fieldRequired.logo}class="glm-required"{/if}>Profile Image:</h4>
-                <div {if $memberInfo.fieldFail.logo}class="glm-form-bad-input" data-tabid="glm-member-info-images"{/if}>
-                    <div class="glm-admin-image-edit-table">
-        {if $memberInfo.fieldData.logo}
+        </div>
+        <div class="glm-row">
+            <h4 {if $memberInfo.fieldRequired.logo}class="glm-required"{/if}>Profile Image:</h4>
+            <div {if $memberInfo.fieldFail.logo}class="glm-form-bad-input" data-tabid="glm-member-info-images"{/if}>
+                <div class="glm-admin-image-edit-table">
+                    {if $memberInfo.fieldData.logo}
                         <div class="glm-row">
                             <div class="glm-small-12 glm-medium-6">
                                 <div class="glm-galleryImage" data-id="logo">
                                 <br>
                             </div>
                         </div>
-        {/if}
-                        <div class="glm-center"><b>New image:</b> <input type="file" name="logo_new"></div>
-                    </div>
-                    <div id="glm-galleryImageLarger_logo" class="glm-imageDialog"><img src="{$glmPluginMediaUrl}/images/large/{$memberInfo.fieldData.logo}"></div>
-                    {if $memberInfo.fieldFail.logo}<p>{$memberInfo.fieldFail.logo}</p>{/if}
+                    {/if}
+                    <div class="glm-center"><b>New image:</b> <input type="file" name="logo_new"></div>
                 </div>
+                <div id="glm-galleryImageLarger_logo" class="glm-imageDialog"><img src="{$glmPluginMediaUrl}/images/large/{$memberInfo.fieldData.logo}"></div>
+                {if $memberInfo.fieldFail.logo}<p>{$memberInfo.fieldFail.logo}</p>{/if}
             </div>
-            <div class="glm-row">
-                <h4>Image Gallery</h4>
-                <div class="glm-item-container glm-imageGalleryContainer glm-small-12">
+        </div>
+        <div class="glm-row">
+            <h4>Image Gallery</h4>
+            <div class="glm-item-container glm-imageGalleryContainer glm-small-12">
 
-    {if $memberInfoID}
+                {if $memberInfoID}
                     <input type="hidden" id="galleryPositionOrder" name="galleryPositionOrder"
                         value="{if $haveImageGallery}{foreach $imageGallery as $i name=ig}{if $i.file_name}{$i.id}{if not $smarty.foreach.ig.last},{/if}{/if}{/foreach}{/if}" />
                     <div class="glm-imageDropContainer">
-                            <!-- All fields with class "glm-imageDrop" are automatically processed by imageUpload.js -->
+                        {* All fields with class "glm-imageDrop" are automatically processed by imageUpload.js *}
                         <div class="glm-imageDrop glm-imageItemHidden"
-                                data-refType="{$ref_type_numb.MemberInfo}"
-                                data-recordID="{$memberInfo.fieldData.id}"
-                                data-maxFileSizeKB="2500"
-                                data-allowedTypes="image/jpeg,image/png,image/gif,image/x-ms-bmp"
-                                >
-                            <!-- The contents of this div are read by imageUpload.js to use for display of upload progress. -->
+                             data-refType="{$ref_type_numb.MemberInfo}"
+                             data-recordID="{$memberInfo.fieldData.id}"
+                             data-maxFileSizeKB="10000"
+                             data-allowedTypes="image/jpeg,image/png,image/gif,image/x-ms-bmp"
+                             >
+                            {* The contents of this div are read by imageUpload.js to use for display of upload progress. *}
                             <div class="glm-imageUploadStatusTemplate glm-imageItemHidden">
 
-                                <!-- Start of upload status pop-up template - Parameters are of the form "[name]" -->
+                                {* Start of upload status pop-up template - Parameters are of the form "[name]" *}
                                 <b><u>Uploading Image { thisFile } of { numbFiles }</u></b>
                                 <div class="glm-statusTable">
                                     <div class="glm-row">
                                     <div class="glm-row"><div class="glm-statusPrompt">Size: </div><div class="glm-statusValue">{ fileSize }</div></div>
                                     <div class="glm-row"><div class="glm-statusPrompt">Progress: </div><div class="glm-statusValue"><div class="glm-progressBarContainer"><div class="glm-progressBar"></div></div></div></div>
                                 </div>
-                                <!-- End of template -->
+                                {* End of template *}
 
                             </div>
-                            <!-- The contents of this div are read by imageUpload.js to use as a template for inserting a new image into the gallery area -->
+                            {* The contents of this div are read by imageUpload.js to use as a template for inserting a new image into the gallery area *}
                             <div class="glm-galleryImageDataTemplate glm-imageItemHidden">
 
-                                <!--
+                                {*
                                     Start of new image template.
                                     Parmeters are of the form "{ name }" where the spaces are required to avoid Smarty interpreting the parameters.
                                     Note that these input fields are dissabled to avoid the template fields being submitted. The imageUpload.js
                                     code enables the fields when it replicates the template for a new image.
-                                -->
+                                *}
 
                                 <div id="{ id }" class="glm-galleryContainer">
 
                                 <div id="glm-galleryImageLarger2_{ id }" class="glm-imageDialog">
                                     <bust-stupid-ngg-image-selection src="{$glmPluginMediaUrl}/images/large/{ filename }"></bust-stupid-ngg-image-selection>
                                 </div>
-                                <!-- End of template -->
+                                {* End of template *}
 
                             </div>
-                        </div> <!-- Overlay of parent for drag/drop detection -->
-                        <div class="glm-imageUploadStatus glm-imageItemHidden"></div> <!-- Overlay for Upload Status Bars -->
+                        </div> {* Overlay of parent for drag/drop detection *}
+                        <div class="glm-imageUploadStatus glm-imageItemHidden"></div> {* Overlay for Upload Status Bars *}
                         <div class="glm-imageDropText glm-imageItemHidden">Drag and drop new images here</div>
                         <div class="glm-noImageDropText glm-imageItemHidden">HTML5 file drag-and-drop not supported by your browser.<br>Use "Browse" button above to upload an image.</div>
                     </div>
                     <div class="glm-right"><b>No Featured Image:</b> <input type="radio" name="galleryImage_featured" value="0"><br>&nbsp;</div>
                     <div class="glm-left">Click images to view full size.</div>
                     <ul class="glm-galleryImages">
-                        <!-- Note that id in li is needed for sorting -->
-        {if $haveImageGallery}
-            {foreach $imageGallery as $i}
-                {if $i.file_name}
-                        <li id="{$i.id}" class="glm-galleryContainer">
-
-                            <div class="glm-galleryImage glm-small-3" data-id="{$i.id}">
-                                <img src="{$glmPluginMediaUrl}/images/small/{$i.file_name}">
-                            </div>
-                            <div class="glm-galleryImageData glm-small-9">
-                                <div class="glm-statusTable glm-row">
+                        {* Note that id in li is needed for sorting *}
+                        {if $haveImageGallery}
+                            {foreach $imageGallery as $i}
+                                {if $i.file_name}
+                                <li id="{$i.id}" class="glm-galleryContainer">
+
+                                    <div class="glm-galleryImage glm-small-3" data-id="{$i.id}">
+                                        <img src="{$glmPluginMediaUrl}/images/small/{$i.file_name}">
+                                    </div>
+                                    <div class="glm-galleryImageData glm-small-9">
+                                        <div class="glm-statusTable glm-row">
 
-                                    <div class="glm-small-7 glm-left">
-                                        <h4>Caption:</h4>
-                                        <div class="glm-small-11">
-                                            <input id="galleryImage_caption_{$i.id}" type="text" name="galleryImage_caption[{$i.id}]" value="{$i.caption}" class="glm-form-text-input-medium">
-                                        </div>
+                                            <div class="glm-small-7 glm-left">
+                                                <h4>Caption:</h4>
+                                                <div class="glm-small-11">
+                                                    <input id="galleryImage_caption_{$i.id}" type="text" name="galleryImage_caption[{$i.id}]" value="{$i.caption}" class="glm-form-text-input-medium">
+                                                </div>
 
-                                        <h4>Description:</h4>
-                                        <div class="glm-small-11">
-                                            <textarea name="galleryImage_descr[{$i.id}]">{$i.descr}</textarea>
-                                        </div>
+                                                <h4>Description:</h4>
+                                                <div class="glm-small-11">
+                                                    <textarea name="galleryImage_descr[{$i.id}]">{$i.descr}</textarea>
+                                                </div>
 
-                                    </div>
+                                            </div>
 
-                                    <div class="glm-small-4 glm-left">
-                                        <div class="glm-small-12">
-                                            <div>
-                                                <div class="glm-row glm-galleryImageDelete">
-                                                    <h4>Delete:</h4>
-                                                    <div>
-                                                        <input type="checkbox" name="galleryImage_delete[{$i.id}]">
-                                                    </div>
-                                                </div>
-                                                <div class="glm-row glm-galleryImageFeatured">
-                                                    <h4>Featured:</h4>
+                                            <div class="glm-small-4 glm-left">
+                                                <div class="glm-small-12">
                                                     <div>
-                                                        <input type="radio" name="galleryImage_featured" value="{$i.id}" {if $i.featured.value}checked="checked"{/if}>
+                                                        <div class="glm-row glm-galleryImageDelete">
+                                                            <h4>Delete:</h4>
+                                                            <div>
+                                                                <input type="checkbox" name="galleryImage_delete[{$i.id}]">
+                                                            </div>
+                                                        </div>
+                                                        <div class="glm-row glm-galleryImageFeatured">
+                                                            <h4>Featured:</h4>
+                                                            <div>
+                                                                <input type="radio" name="galleryImage_featured" value="{$i.id}" {if $i.featured.value}checked="checked"{/if}>
+                                                            </div>
+                                                        </div>
                                                     </div>
+                                                    <input type="hidden" name="galleryImage_position[{$i.id}]" value="{$i.position}">
                                                 </div>
                                             </div>
-                                            <input type="hidden" name="galleryImage_position[{$i.id}]" value="{$i.position}">
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div id="glm-galleryImageLarger_{$i.id}" class="glm-imageDialog"><img src="{$glmPluginMediaUrl}/images/large/{$i.file_name}"></div>
-                {/if}
-                       </li>
-
-            {/foreach}
-        {/if}
+                                    <div id="glm-galleryImageLarger_{$i.id}" class="glm-imageDialog"><img src="{$glmPluginMediaUrl}/images/large/{$i.file_name}"></div>
+                                    {/if}
+                            </li>
+                            {/foreach}
+                        {/if}
                     </ul>
-    {else}
+                {else}
                     <b>Note:</b> Images may only be added to {$terms.term_member} profile records that have been created.
                     You are editing information to create a new record.
                     <br>After you click "Add new {$terms.term_member}" below, you may come back here to add images to the gallery.
-    {/if}
-                </div>
+                {/if}
             </div>
         </div>
     </div>
+</div>