Important announcements from CouchCMS team
20 posts Page 2 of 2
KK wrote: Hi @arimpranata :)
Thanks for the appreciation, I am glad you found Couch useful.

Replying to your query - I am afraid but the relation popup currently only shows the titles.
So, for now, I am sorry but we cannot customize it like the list-view.


i guess this is bad news for me...any chance next update the relation popup has richer view???

anyway thanks again for the cms!
I hope we get a dedicated theme snippet to customize the looks. Ideally with various layouts - list, gallery, nested.
@arimpranata - I don't know if your still trying to do this, but I've managed to do it for myself.
It requires editing various files in addons/relation/theme.
I've done it to allow for multiple custom views based on template name.
You can pretty much put what you want in there.

This allows for:

Screenshot_2020-02-19 Admin Panel.png
Screenshot_2020-02-19 Admin Panel.png (70.3 KiB) Viewed 21369 times


And:

Screenshot_2020-02-19 Admin Panel(1).png
Screenshot_2020-02-19 Admin Panel(1).png (121.7 KiB) Viewed 21369 times


It all seems to be working at the moment.
Let me know if you want me to upload the files and a how-to.
cheers,
gwil
@Gwil
Let me know if you want me to upload the files and a how-to.

But of course we all want you to do that :)
Please do and I am sure it'd be a great help.
KK wrote: But of course we all want you to do that :)

I don't want it.. Kills the thrill for me :)
@KK, @trendoman, heheh, OK then here goes.

edit: replaced field_relation_advanced.html with correct version

Basically I created a snippet which sets some variables for templates which require a custom listing.
I then modified the theme files in addons/relation/theme to use these variables to create different views.
There may be a more elegant solution but this seems to be working for now :)

Details
I added 'advanced-gui.list-vars.html' to my snippets folder:
Code: Select all
<cms:hide>
    gwil - set some local variables to determine if custom rows are needed
         - at the moment only custom listing for image-library.php template,
           otherwise use default.
           add further tpl_ options for additional templates.
</cms:hide>
<cms:set tpl_default      = '0' />
<cms:set tpl_gal          = '1' />
<cms:set inp_gal          = 'gallery_images' />
<cms:set is_gal           = "f_<cms:show inp_gal />" />
<cms:set tpl_gal_name     = 'image-library' />
<cms:set tpl_gal_filename = "<cms:show tpl_gal_name/>.php" />
<cms:if k_template_name   = "<cms:show tpl_gal_filename />">
    <cms:hide>
        gwil - we have custom styling for this template so set some vars
    </cms:hide>
    <cms:set tpl_is = "<cms:show tpl_gal />" />
<cms:else />
    <cms:set tpl_is = tpl_default  />
</cms:if>
<cms:hide>
    gwil - set list length to number of options unless over max_opts, then set to max_opts
</cms:hide>
<cms:set max_opts       = '8' />
<cms:set opt_count      = "<cms:array_count k_options />" />
<cms:if opt_count gt max_opts >
    <cms:set sel_rows = max_opts />
<cms:else />
    <cms:set sel_rows = opt_count />
</cms:if>


Then modified these files in addons/relation/theme.
field_relation_advanced.html
Code: Select all
<cms:hide>
    gwil - set some local variables
</cms:hide>
<cms:embed 'advanced-gui-list-vars.html' />
<cms:hide>
    gwil - is it the image-gallery reverse gallery_images?
</cms:hide>
<cms:if k_field_input_name = is_gal >
    <cms:set sel_name = "<cms:show is_gal />_select" />
    <cms:hide>
        gwil - we have custom styling for this input so set some vars
    </cms:hide>
    <cms:set wrp_class = "<cms:show inp_gal />" />
    <cms:minify 'css'>
        <style>/*CODE*/
            .<cms:show inp_gal/> {
                width: 100%;
                max-width: 50rem;
            }
            .<cms:show inp_gal/> > select {
                height: auto!important;
                padding-right: 8px!important;
            }
            .<cms:show inp_gal/> > select > option {
                height: 48px;
                line-height: 48px;
                vertical-align: middle;

                background-size: 40px 40px;
                background-repeat: no-repeat;
                background-position: 4px 4px;
                padding-left: 56px!important;
            }
            .<cms:show inp_gal/> > select > option + option {
                border-top: 1px solid #ddd;

            }
            .select-odd {
                background-color: #eee;
            }
        /*CODE*/</style>
    </cms:minify>
</cms:if>
<div class="select dropdown k-relation-ex<cms:if k_has_one> has-one</cms:if> <cms:show wrp_class />">
    <select name="<cms:show k_field_input_id />_select" id="<cms:show k_field_input_id />_select" class="k-relation-select" size="<cms:if k_has_one>1<cms:else /><cms:show sel_rows /></cms:if>" multiple>
        <cms:each k_options as='value'>
            <cms:if k_field_input_name = is_gal >
                <cms:set is_even = "<cms:mod k_count '2' />" />
                <cms:if is_even >
                    <cms:set opt_class = "select-even" />
                <cms:else/>
                    <cms:set opt_class = "select-odd" />
                </cms:if>
                <cms:set mimg = "<cms:get_field 'gg_image' masterpage='image-library.php' id=key />" />
                <cms:set bg ="style='background-image:url(<cms:show mimg/>);'" />
            </cms:if>
            <option class="<cms:show opt_class />" value="<cms:show key />" <cms:show bg/>><cms:show value/></option>
        </cms:each>
    </select>
    <div class="k-relation-buttons">
        <a class="btn popup-iframe add" href="#" tabindex="1" data-mfp-src="//about:blank" data_relation_src="<cms:show k_target_link />" data_relation_field="<cms:show k_field_input_id />" onclick="this.blur();" <cms:if k_has_one && k_option_ids>style="display:none;"</cms:if>><cms:show_icon 'plus' /><span><cms:localize 'add' /></span></a>
        <a class="btn remove<cms:if k_has_one='0'> disabled</cms:if>" href="#" tabindex="2" onclick="this.blur();" <cms:if k_has_one && k_option_ids=''>style="display:none;"</cms:if>><cms:localize 'remove' /></a>
    </div>
    <input type="hidden" class="k-relation-ids" name="<cms:show k_field_input_id />" value="<cms:show k_option_ids />" />
</div>

<cms:if k_add_js >
    <cms:admin_add_js>
        <cms:hide><script></cms:hide>
        $(function(){
            <cms:hide>
            //
            // GWIL - CUSTOM STYLING CHANGES START
            //
            //</cms:hide>
            var g_is_gal = false;
            <cms:if k_field_input_name = is_gal >
                g_is_gal = true;
            </cms:if>
            <cms:hide>
            //
            // GWIL - CUSTOM STYLING CHANGES END
            //
            //</cms:hide>
            var iframe_name = 'k-iframe-' + Math.floor(Math.random()*1000001);
            var form = $('<form />', { id: 'k-relation-form', action: '', method: 'POST', style: 'display:none' });
            var input = $('<input />', { id: '__k_relation_ids__', name: '__k_relation_ids__', type: 'hidden' });
            form.append(input).appendTo($('body'));

            $( ".k-relation-ex" ).each(function(index){
                var field = $(this);
                var list = field.find('select');
                var btn_remove = field.find('.btn.remove');
                var btn_add = field.find('.btn.add');
                var label_add = btn_add.find('span');
                var input_ids = field.find('.k-relation-ids');
                var has_one = field.hasClass( 'has-one' );

                if( has_one ){
                    list.mousedown(function(e){
                        e.preventDefault();
                    });
                }
                else{
                    list.change(function(){
                        if( $(this).find('option:selected').length ){
                            btn_remove.removeClass("disabled");
                        }
                        else{
                            btn_remove.addClass("disabled");
                        }
                    });
                }

                list.bind( '_refresh', function(){
                    var str_ids = '';
                    var sep = '';
                    $(this).find('option').each(function(i, selected) {
                        str_ids += sep + $(this).val();
                        sep = ',';
                    });
                    input_ids.val( str_ids );

                    if( has_one ){
                        if(str_ids.length){
                            btn_remove.css('display', 'inline-block');
                            btn_add.css('display', 'none');
                        }
                        else{
                            btn_add.css('display', 'inline-block');
                            btn_remove.css('display', 'none');
                        }
                    }
                });

                btn_remove.click(function(){
                    if( has_one ){
                        list.empty();
                    }
                    else{
                        list.find('option:selected').each(function(i, selected) {
                            $(this).remove();
                        });
                    }
                    list.trigger('change');
                    //
                    // GWIL - RESIZE LIST UPTO MAX OPTS
                    list[0].size = list[0].length > "<cms:show max_opts />" ? "<cms:show max_opts />" : list[0].length;
                    list.trigger('_refresh');

                    return false;
                });

                // modal callbacks
                var modal_before_open = function() {
                    window.KRelation = {
                        callBack: function( content, exit_code ){
                            if( exit_code=='exit_save' ){
                                var arr = jQuery.parseJSON(content);

                                if(arr.length){
                                    if( has_one && arr.length>1 ) arr.splice(1);

                                    <cms:hide>
                                    //
                                    // GWIL - CUSTOM STYLING CHANGES START
                                    //
                                    //</cms:hide>
                                    <cms:hide>
                                    //
                                    // GWIL - CUSTOM STYLING CHANGES END
                                    //
                                    //</cms:hide>
                                    var html = '';
                                    $.each(arr, function( key, val ){
                                        <cms:hide>
                                        //
                                        // GWIL - CUSTOM STYLING CHANGES START
                                        //
                                        //</cms:hide>
                                        if (g_is_gal) {
                                            var bg = 'style="background-image:url('+ val.thumb +')"';
                                            html += '<option value="' + val.id + '" ' + bg + '>' + val.title + '</option>';
                                        } else {
                                            html += '<option value="' + val.id + '">' + val.title + '</option>';
                                        }
                                        <cms:hide>
                                        //
                                        // GWIL - CUSTOM STYLING CHANGES END
                                        //
                                        //</cms:hide>
                                    });

                                    if( has_one ) list.empty();
                                    list.append(html);
                                    //
                                    // GWIL - RESIZE LIST UPTO MAX OPTS
                                    list[0].size = list[0].length > "<cms:show max_opts />" ? "<cms:show max_opts />" : list[0].length;
                                    list.trigger('_refresh');
                                }
                            }

                            // close modal
                            modal_after_close();
                        }
                    };

                    // prep form
                    form.attr( "action", btn_add.attr('data_relation_src') );
                    form.attr( "target", iframe_name );
                    input.val( input_ids.val() );
                };

                var modal_open = function() {
                    form.submit();
                };

                var modal_after_close = function() {
                    window.KRelation = null;
                    $.magnificPopup.close();
                };

                COUCH.bindPopupIframe( btn_add, modal_before_open, modal_after_close, "mosaic-iframe", true, iframe_name, modal_open );
            });
        });
        <cms:hide></script></cms:hide>
    </cms:admin_add_js>
</cms:if>


content_list_relation_inner.html:
Code: Select all
<cms:hide>
    gwil - set some local variables to determine if custom list is needed
</cms:hide>
<cms:embed 'advanced-gui-list-vars.html' />
<cms:hide>
    gwil - is it custom
</cms:hide>
<cms:if tpl_is = tpl_gal >
    <cms:set tbl_class = "<cms:show tpl_gal_name />" />
    <cms:minify 'css'>
        <style>/*CODE*/
            .col-thumb { display: table-cell!important; min-width: 50px; width: 10%; }
            .col-thumb > img { max-width: 80px; }
            .table > tbody > tr > td {
                vertical-align: middle;
            }
        /*CODE*/</style>
    </cms:minify>
</cms:if>
<table class="table table-primary table-relation-list <cms:show tbl_class />">
    <cms:hide>
        gwil - template has custom listing
    </cms:hide>
    <cms:if tpl_is = tpl_gal>
        <thead>
            <tr>
                <th class="col-checkbox">
                    <label class="ctrl checkbox" >
                        <input class="checkbox-all" type="checkbox" name="check-all" onclick="$$('.page-selector').set('checked', this.checked);">
                        <span class="ctrl-option tt" title="Select/Deselect All"/>
                    </label>
                </th>
                <!-- EDIT -->
                <th class="col-thumb">Thumb</th>
                <th class="col-title">Title</th>
                <th class="col-folder col-sort">Folder</th>
                <th class="col-date col-sort">Date</th>
                <!-- END EDIT -->
            </tr>
        </thead>
    <cms:hide>
        gwil - use default template listing
    </cms:hide>
    <cms:else />
        <thead>
            <tr>
                <cms:render 'list_header' />
            </tr>
        </thead>
    </cms:if>
    <tbody id="listing">
        <cms:pages
                masterpage       = k_template_name
                id               = k_selected_pageids
                folder           = k_selected_foldername
                orderby          = k_selected_orderby
                order            = k_selected_order
                custom_field     = k_selected_custom_field
                paginate         = '1'
                limit            = k_selected_limit
                show_unpublished = '0'
                show_future_entries = '1'
                page_name        = "<cms:if k_selected_exclude>NOT <cms:show k_selected_exclude /></cms:if>"
                start_on         = k_selected_start_on
                stop_before      = k_selected_stop_before
                base_link        = k_route_link
                token            = k_cur_token
            >

            <cms:if k_paginated_bottom >
                <cms:set my_paginator="<cms:render 'paginator' />" 'parent' />
            </cms:if>

            <cms:if "<cms:arr_val_exists k_page_id in=k_relation_selected_ids />" >
                <cms:set row_is_selected='1' />
            <cms:else />
                <cms:set row_is_selected='0' />
            </cms:if>

            <tr<cms:if row_is_selected > class="selected"</cms:if>>
            <cms:hide>
                gwil - template has custom listing
            </cms:hide>
            <cms:if tpl_is = tpl_gal>
                    <td class="col-checkbox <cms:show row_class />">
                        <label class="ctrl checkbox" >
                            <input <cms:if row_is_selected>checked</cms:if> id="page-selector-<cms:show k_page_id />" type="checkbox" value="<cms:show k_page_id />" class="page-selector checkbox-item" name="page-id[]">
                            <span class="ctrl-option"/>
                        </label>
                    </td>
                    <td class="col-thumb <cms:show row_class />"   ><img src="<cms:show gg_thumb />"/></td>
                    <td class="col-title <cms:show row_class />"   ><strong><cms:show k_page_title /></strong></td>
                    <td class="col-folder <cms:show row_class />"  ><cms:show k_page_foldertitle /></td>
                    <td class="col-date <cms:show row_class />"    ><cms:if k_page_date=='0000-00-00 00:00:00' >Unpublished<cms:else /><cms:date k_page_date format='M jS Y' /></cms:if></td>
                <cms:hide>
                    gwil - use default template listing
                </cms:hide>
                <cms:else />
                    <cms:render 'list_row' />
                </cms:if>
            </tr>

        </cms:pages>
    </tbody>
</table>


And content_list_relation_exit.html:
Code: Select all
<cms:hide>
    gwil - set some local variables to determine if custom list is needed
</cms:hide>
<cms:embed 'advanced-gui-list-vars.html' />
<div id='json_content' style="display:none;">
<cms:if k_relation_exit_action='exit_save'>
    [
    <cms:if k_relation_selected_ids_string>
        <cms:pages id=k_relation_selected_ids_string show_future_entries='1' skip_custom_fields='0'>
            {
                <cms:hide>
                    gwil - add any additional fields for return
                </cms:hide>
                <cms:if tpl_is = tpl_gal>"thumb":"<cms:show gg_thumb />",</cms:if>
                "id":"<cms:show k_page_id />",
                "title":<cms:escape_json><cms:php>echo(str_replace('&quot;', '"', strip_tags('<cms:show k_page_title />')));</cms:php></cms:escape_json>
            }
            <cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
        </cms:pages>
    </cms:if>
    ]
</cms:if>
</div>

<cms:admin_add_js>
    $(function(){
        if( window.parent && window.parent.KRelation && window.parent.KRelation.callBack ){
            var content = $('#json_content');
            window.parent.KRelation.callBack(content.text(), '<cms:show k_relation_exit_action />');
        }
    });
</cms:admin_add_js>


And that does it.
I've only just got this working so will hopefully be streamlining it a bit.

I've also attached the above files.

cheers,
gwil

Attachments

Thanks :)
@Gwil,
I'd like to add that one need not overwrite the core files of Couch (the files within 'addons/relation/theme' folder in this case).
As explained in viewtopic.php?f=5&t=10241, one can activate the 'sample' admin theme and keep all modified files there.

So, to test your mod we need to do the folowing -

1. Add 'advanced-gui.list-vars.html' to the snippets folder
2. Add rest of the files to 'couch\theme\sample' folder
3. If not already done, activate the 'sample' admin theme in couch/config.php -
Code: Select all
    // 26
    // If the admin-panel uses a custom theme, set the following to the folder-name of the theme.
    // Theme folder is expected to be within the 'couch/theme' folder. No leading or trailing slashes please.
    define( 'K_ADMIN_THEME', 'sample' );
@KK, for some reason I'd gotten it in to my head that that wouldn't work.

Have copied the files into a theme and reset the addons theme files to the originals.

All works a charm!

thanks KK.

cheers,
gwil
Hi, @Gwil,

I am absolutely loving this - indeed, selecting image solely based on the often garbled filename is a pain and this makes the difference!

I would like to ask, tho: when adding images to the gallery (by clicking "+Add" ), I get thumbs in the modal allright. Once they are added, however, I only get a list of filenames in a box, no thumbs, no field heading - please see the screenshot attached.
Screenshot 2022-12-23 at 03-10-27 Admin Panel.png
Screenshot 2022-12-23 at 03-10-27 Admin Panel.png (30.52 KiB) Viewed 18173 times

What could I be doing wrong, please? Do I need to play around with the <cms:config_list_view> ... or is the issue me running Couch 2.2.1 (20201114)? It looks as if it is not picking the
Code: Select all
                <th class="col-thumb">Thumb</th>
                <th class="col-title">Title</th>
                <th class="col-folder col-sort">Folder</th>
                <th class="col-date col-sort">Date</th>

part (either of them) in content_list_relation_inner.html and hence not parsing the table. But there is nothing glaringly obviously wrong...
20 posts Page 2 of 2
cron