ce_gc_bootstrap_layout

<?php
/* CSS for the frontend-output */
//$GLOBALS['TL_CSS'][] = 'system/modules/gallery_creator/assets/css/gallery_creator_fe.css';

/* javascript for the frontend-output */
//$GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/gallery_creator/assets/js/gallery_creator_fe.js';
?>

<?php if (!\Input::get('items')): ?>
    <!-- gallery_creator - album list -->
    <div class="<?php echo $this->class; ?> gallery_creator block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
        <?php if ($this->headline): ?>
        <?php endif; ?>

        <?php echo $this->pagination; ?>
        <?php if (count($this->arrAlbums)>0): ?>

            <ul class="list_albums">
                <?php foreach ($this->arrAlbums as $Album): ?>
                    <li class="row level_1 block"<?php echo $this->imagemargin ? 'style="'.$this->imagemargin.'"' : ''; ?>>

                        <div class="col_1 col-sm-4">
                            <figure class="image_container" onmouseover="<?php echo $Album['thumbMouseover']; ?>">
                                <?php if ($Album['href']): ?>
                                <a href="<?php echo $Album['href']; ?>" title="<?php echo $Album['title']; ?>">
                                    <?php endif; ?>
                                    <?php $this->insert('picture_default', $Album['picture']); ?>
                                    <?php if ($Album['href']): ?>
                                </a>
                            <?php endif; ?>                            </figure>
                        </div>
                        <div class="col_2 col-sm-8">
                            <h2><?php echo $Album['name']; ?></h2>

                            <p class="count_pics">
                                <span class="fa fa-user"></span> von <?php echo $Album['owners_name']; ?>
                                &nbsp;&nbsp;
                                <span class="fa fa-calendar"> </span> <?php echo $Album['event_date']; ?>
                                <br><?php echo $Album['count']; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['pictures']; ?> | <?php echo $Album['visitors']; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['visitors']; ?></p>


                            <?php if ($Album['count_subalbums']): ?>
                                <p class="count_pics"><?php echo $Album['count_subalbums']; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['subalbums']; ?></p>
                            <?php endif; ?>
                            <?php if ($Album['comment']): ?>
                                <p class="album_comment"><?php echo \String::substr($Album['comment'], 200); ?></p>
                            <?php endif; ?>
                            <button onclick="window.location.href='<?php echo $Album['href']; ?>'" type="button" class="btn btn-primary btn-xs">mehr...</button>
                        </div>
                    </li>
                <?php endforeach; ?>
            </ul>
        <?php endif; ?>

        <?php echo $this->pagination; ?>

    </div>
<?php endif; ?>






<?php if (\Input::get('items')): ?>

<!-- gallery_creator - album preview -->
<div class="<?php echo $this->class; ?> gallery_creator block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

    <?php if ($this->insertArticlePre):?>
        <!-- articleBoxPre-->
        <div id="articleBoxPre" class="block">
            <?php echo $this->insertArticlePre; ?>
        </div>
        <!-- end articleBoxPre-->
    <?php endif; ?>

    <?php if ($this->headline): ?>
        <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
    <?php endif; ?>

    <!-- Album Navigation -->
    <ul class="pagination pagination-sm">

    <?php if(getPrevLink($this)): ?>
        <li>
            <a href="<?php echo getPrevLink($this); ?>">
                <span class="fa fa-arrow-circle-left"></span> zurück
            </a>
        </li>
    <?php endif; ?>

    <?php if ($this->backLink): ?>
        <li>
            <a href="<?php echo $this->backLink; ?>">
            <span class="fa fa-list-ul"></span> Albumliste
            </a>
        </li>
    <?php endif; ?>

    <?php if(getNextLink($this)): ?>
        <li>
            <a href="<?php echo getNextLink($this); ?>">
                vorwärts <span class="fa fa-arrow-circle-right"></span>
            </a>
        </li>
    <?php endif; ?>

    </ul>
    <!-- Ende Album Navigation -->


    <?php if ($this->Albumname): ?>
        <h1><?php echo $this->Albumname; ?></h1>
    <?php endif; ?>


    <?php if ($this->albumComment): ?>
        <div class="albumComment well well-info">
            <p><?php echo $this->albumComment; ?></p>
        </div>
    <?php endif; ?>

    <?php echo $this->pagination; ?>
    <?php $col=0; ?>

    <?php if ($this->arrPictures): ?>
        <ul class="album-detailview row">
            <?php foreach ($this->arrPictures as $Picture): ?>
                <li class="col-xs-12 col-sm-4 col-md-4 col-lg-3" id="picture_<?php echo $Picture['id']; ?>">
                    <figure data-id="<?php echo $Picture['id']; ?>" <?php echo (strlen($Picture['cssID']) ? ' id="' . $Picture['cssID'] . '"' : ''); ?> class="image_container<?php echo strlen($Picture['cssClass']) ? ' ' . $Picture['cssClass'] : ''; ?>"<?php echo $this->imagemargin ? ' style="'.$this->imagemargin.'"' : ''; ?>>
                        <?php if ($Picture['href']): ?>
                        <a href="<?php echo $Picture['href']; ?>" rel="colorbox" data-thumb-href="<?php echo $Picture['thumb_src']; ?>" data-mobile-href="<?php echo TL_FILES_URL . \Image::get($Picture['path'], 600, round($Picture['size'][1]*600/$Picture['size'][0], 0),'proportional'); ?>" <?php echo $Picture['lightbox']; ?> title="<?php echo $Picture['comment'] ? $Picture['comment'] : ($Picture['title'] ? $Picture['title'] : $Picture['filename']); ?>">
                        <?php endif; ?>
                            <?php $this->insert('picture_default', $Picture['picture']); ?>
                        <?php if ($Picture['href'] != ''): ?>
                        </a>
                        <?php endif; ?>
                    </figure>
                    <figcaption class="caption invisible">
                        <?php echo $Picture['comment']; ?>
                    </figcaption>
                </li>
            <?php endforeach;?>
        </ul>
    <?php endif;?>


    <?php
    if (TL_MODE == 'FE' && \Environment::get('isAjaxRequest'))
    {
        // Frontend Bild-Caption Bearbeitung
        if(\Input::post('caption_submit'))
        {
            $objPicture = \MCupic\GalleryCreatorPicturesModel::findByPk(\Input::post('picture_id'));
            if($objPicture !== null)
            {
                $objPicture->comment = \Input::post('picture_caption');
                $objPicture->save();
            }
            exit;
        }
    }
    ?>
    <script>
        <?php if (FE_USER_LOGGED_IN): ?>
        (function($) {
            $().ready(function () {
                $( ".album-detailview .caption-form").css({
                    'display':'none',
                    'height': '80px',
                    'background-color': '#EBFDD7'
                });

                $( ".album-detailview .image_container").css('position','relative');
                $( ".album-detailview .caption").css({
                    'display': 'inline-block',
                    'visibility': 'visible',
                    'width': '100%',
                    'height': '80px',
                    'overflow-y': 'auto',
                    'border': '1px solid #ccc',
                    'display': 'inline-block'
                });

                // Aktion bei Klick auf edit icon
                $( ".album-detailview .image_container" ).append( '<div class="caption-edit" style="position: absolute; padding:4px 8px; background-color: #fff; bottom:0; right:0;"><span class="fa fa-pencil"></span></div>' );
                $( ".album-detailview .caption-edit, .album-detailview .caption").click(function(event){

                    var self = this;
                    // wenn auf die caption getippt wird, muss self umkonfiguriert werden auf das edit icon objekt
                    if($(self).hasClass('caption')){
                        self = $(self).siblings('.image_container').find('.caption-edit');
                    }

                    // get the picture id
                    var id = $(self).closest('.image_container').attr('data-id');

                    // Lösche textarea
                    $('.ctrl_caption').remove();

                    // Lösche save icon
                    $('.caption-save').remove();

                    // Zeige Caption
                    $( ".album-detailview .caption").css('display','inline-block');

                    // Verberge das edit icon
                    $( ".album-detailview .caption-edit").css("display","inline-block");
                    $(self).css("display", "none");

                    // Verberge die caption-Box
                    var captionBox = $(self).closest('.image_container').siblings('.caption');
                    captionBox.css('display','none');
                    var captionText = captionBox.text().trim();

                    // Füge anstelle der caption-Box eine textarea ein
                    $(self).closest('li').append( '<textarea id="ctrl_caption" class="ctrl_caption" style="width:100%; height:80px; background-color:#EBFDD7"></textarea>' );
                    var textArea = document.getElementById('ctrl_caption');
                    $(textArea).css('margin', captionBox.css('margin'));
                    $(textArea).text(captionText);

                    // Füge das Save Icon ein
                    $(self).parent('.image_container').append( '<div class="caption-save" style="position: absolute; padding:4px 8px; background-color:darkred; bottom:0; right:0;"><span style="color: #fff" class="fa fa-floppy-o"></span></div>' );

                    // Aktion bei Klick auf save Icon
                    $( ".album-detailview .caption-save").click(function(event){

                        // input Text
                        value = $('#ctrl_caption').val().trim();

                        // Übernehme den Text aus dem Formular in die Caption Box
                        $(textArea).siblings('.caption').text(value);

                        // Lösche textarea
                        $(textArea).remove();

                        // Lösche save icon
                        this.remove();

                        // Zeige edit icon
                        $( ".album-detailview .caption-edit").css("display","inline-block");

                       // Zeige caption-Box
                        $( ".album-detailview .caption").css('display','inline-block');

                        // Ajax Request
                        var request = $.ajax({
                            url: "<?php echo \Environment::get('requestUri'); ?>",
                            method: "POST",
                            data: {
                                REQUEST_TOKEN: "<?php echo REQUEST_TOKEN; ?>",
                                picture_caption: value,
                                picture_id: id,
                                caption_submit: 'true'
                            }
                        });

                        request.fail(function( jqXHR, textStatus ) {
                            alert( "Request failed: " + textStatus );
                        });

                        request.done(function( msg ) {
                            //alert( "Data Saved: " + msg );
                        });

                    });
                });
            });
        })(jQuery);
        <?php endif;?>

        // Hide Headline in the detail view
        (function($) {
            $().ready(function () {
                $$('.headline').css('display', 'none');
            });
        });
    </script>

    <?php if ($this->insertArticlePost):?>
        <!-- articleBoxPre-->
        <div id="articleBoxPost" class="block">
            <?php echo $this->insertArticlePost; ?>
        </div>
        <!-- end articleBoxPost-->
    <?php endif; ?>

    </div>
<?php endif; ?>

<?php

function getPrevLink($self){
    global $objPage;
    $date = $self->arrAlbumdata['date'];
    $objAlbum = \Database::getInstance()->prepare("SELECT * FROM tl_gallery_creator_albums WHERE published=? AND date<? ORDER BY date DESC LIMIT 0,1")->execute(true, $date);
    if($objAlbum->numRows)
    {
        return $objPage->alias . '/' . $objAlbum->alias;
    }
        return false;
}

function getNextLink($self){
    global $objPage;
    $date = $self->arrAlbumdata['date'];
    $objAlbum = \Database::getInstance()->prepare("SELECT * FROM tl_gallery_creator_albums WHERE published=? AND date>? ORDER BY date DESC LIMIT 0,1")->execute(true, $date);
    if($objAlbum->numRows)
    {
        return $objPage->alias . '/' . $objAlbum->alias;
    }
    return false;
}
?>

Bootstrap-Layout for Contao GalleryCreator with the occasion to edit picture captions in the frontend.