MG 2.2 Something besides the stock widgets

[PapaTango]

As many have done before me, I am trying to create a new page. It came as a real surprise to me how few widgets there are available for XFMG compared to other platforms such as Invision and vB. What I need to happen is display a block of images from the albums that contains definable rows, like as 6x6 such as the /media page does. Attempts to cut and paste the code from the media page template into a new page semi-works. The skeleton is there, but no images are displayed. I can add new ones, but that is hardly the point.

Does anyone know how a block of images (not the thoroughly ridiculous slider) can be had? Any suggestions appreciated--as I have spent several hours on google to no avail...

 

[Russ]

This might be considered an "odd" approach, but you could actually use the slider widget and just disable the slider elements.

1.) Create a new widget using the "XFMG: Media slider".

• Set your widget location (or copy the widget key for manual placement)
• Display from categories - Select the categories you want to display from or choose All
• Number of media items: this will be the total amount of items you want to show. There's no page-nav with this approach so what you set here will show on the entire page. Then save, no other settings to worry about.

Finally, open the template: xfmg_widget_media_slider

Replace the entire contents of it with:

<xf:if is="$mediaItems is not empty">
    <xf:css src="xfmg_media_list.less" />
    <xf:comment>
    <xf:css src="lightslider.less" />

    <xf:js src="vendor/lightslider/lightslider.js" min="1" />
    <xf:js src="xfmg/slider.js" min="1" />
    </xf:comment>

    <div class="block" {{ widget_data($widget) }}>
        <div class="block-container">
            <h3 class="block-minorHeader">
                <a href="{$link}" rel="nofollow">{{ $title ?: phrase('xfmg_latest_media') }}</a>
            </h3>
            <div class="block-body block-row">
                <div class="itemList">

                    <xf:foreach loop="$mediaItems" value="$mediaItem">
                        <xf:macro template="xfmg_media_list_macros" name="media_list_item"
                            arg-mediaItem="{$mediaItem}" />
                    </xf:foreach>
                    <xf:macro template="xfmg_media_list_macros" name="media_list_placeholders" />
                </div>
            </div>
        </div>
    </div>
</xf:if>

If you have no desire to use the media slider in any other location, you can use the above code. If you want to use the slider on another page, you could replace the contents with this:

Spoiler

<xf:if is="$widget.key !== 'CHANGETOYOURWIDGETKEY'">
<xf:if is="$mediaItems is not empty">
    <xf:css src="xfmg_media_list.less" />
    <xf:css src="lightslider.less" />

    <xf:js src="vendor/lightslider/lightslider.js" min="1" />
    <xf:js src="xfmg/slider.js" min="1" />

    <div class="block" {{ widget_data($widget) }}>
        <div class="block-container">
            <h3 class="block-minorHeader">
                <a href="{$link}" rel="nofollow">{{ $title ?: phrase('xfmg_latest_media') }}</a>
            </h3>
            <div class="block-body block-row">
                <div class="itemList itemList--slider"
                    data-xf-init="item-slider"
                    data-xf-item-slider="{$options.slider|json}">

                    <xf:foreach loop="$mediaItems" value="$mediaItem">
                        <xf:macro template="xfmg_media_list_macros" name="media_list_item_slider"
                            arg-mediaItem="{$mediaItem}" />
                    </xf:foreach>
                </div>
            </div>
        </div>
    </div>
</xf:if>
<xf:else />
<xf:if is="$mediaItems is not empty">
    <xf:css src="xfmg_media_list.less" />
    <xf:comment>
    <xf:css src="lightslider.less" />

    <xf:js src="vendor/lightslider/lightslider.js" min="1" />
    <xf:js src="xfmg/slider.js" min="1" />
    </xf:comment>

    <div class="block" {{ widget_data($widget) }}>
        <div class="block-container">
            <h3 class="block-minorHeader">
                <a href="{$link}" rel="nofollow">{{ $title ?: phrase('xfmg_latest_media') }}</a>
            </h3>
            <div class="block-body block-row">
                <div class="itemList">

                    <xf:foreach loop="$mediaItems" value="$mediaItem">
                        <xf:macro template="xfmg_media_list_macros" name="media_list_item"
                            arg-mediaItem="{$mediaItem}" />
                    </xf:foreach>
                    <xf:macro template="xfmg_media_list_macros" name="media_list_placeholders" />
                </div>
            </div>
        </div>
    </div>
</xf:if>
</xf:if>

Changing CHANGETOYOURWIDGETKEY to your widget key.

The end result will be a widget that looks like the default media page:


You can then customize the CSS to however you want. This approach also has the little popups when you hover an image just like the media gallery.

 

[Old Nick]

@PapaTango

Media Wall Widget for XF Media Gallery

Adds a new widget to the XF Media Gallery allowing the display of a media wall. Requires the official add-on XFMG 2.2 Responsive widget recommended for wide spaces. File names/image titles are displayed on hover: Shout out to @Russ :cool:

xenforo.com

 

[RG70Hz]

As many have done before me, I am trying to create a new page. It came as a real surprise to me how few widgets there are available for XFMG compared to other platforms such as Invision and vB. What I need to happen is display a block of images from the albums that contains definable rows, like as 6x6 such as the /media page does. Attempts to cut and paste the code from the media page template into a new page semi-works. The skeleton is there, but no images are displayed. I can add new ones, but that is hardly the point.

Does anyone know how a block of images (not the thoroughly ridiculous slider) can be had? Any suggestions appreciated--as I have spent several hours on google to no avail...

This may not be what you're looking for but I managed to create a simple picture gallery with a little html and css. The code I used is below and I will attach an image to show the effect. I am sure you can using an embedding somehow. I figured it's worth a reply since it's free.

<style>
    /* Position the image container (needed to position the left and right arrows) */
    .container {
        position: relative;
    }

    /* Hide the images by default */
    .mySlides {
        display: none;
    }

    /* Add a pointer when hovering over the thumbnail images */
    .cursor {
        cursor: pointer;
    }

    /* Next & previous buttons */
    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 40%;
        width: auto;
        padding: 16px;
        margin-top: -50px;
        color: white;
        font-weight: bold;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        -webkit-user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    /* Container for image text */
    /*.caption-container {
        text-align: center;
        background-color: #222;
        padding: 2px 16px;
        color: white;
    }*/

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* Six columns side by side */
    .column {
        float: left;
        width: 16.66%;
    }

    /* Add a transparency effect for thumnbail images */
    .demo {
        opacity: 0.6;
    }

    .active,
    .demo:hover {
        opacity: 1;
    }

    ul {
        list-style-type: none;
        padding: 17px;
    }

    #thumb {
        /* Gray border */
        border: 1px solid #ddd;
        /* Rounded border */
        border-radius: 4px;
        /* Some padding */
        padding: 5px;
        /* Thumbnail Dimensions */
        width: 150px;
        height: 150px;
    }

    #imgBorder {
        /* Gray border */
        border: 1px solid #ddd;
        /* Rounded border */
        border-radius: 4px;
        /* Some padding */
        padding: 5px;
    }
</style>

<script>
    let slideIndex = 1;
    showSlides(slideIndex);

    // Next/previous controls
    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    // Thumbnail image controls
    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("demo");
        let captionText = document.getElementById("caption");
        if (n > slides.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        captionText.innerHTML = dots[slideIndex - 1].alt;
    }
</script>

<!-- Description Block -->
<div class="block-container">
    <div class="block-body">

        <div class="header block-minorHeader">Description</div>
        <!-- Start -->
        <ul>
            <li>
                <p>Text</p>
            </li><br>
            <li>
                <p>Text</p>
            </li><br>
            <li>
                <p>Text</p>
            </li><br>
            <li>
                <p>Text</p>
            </li><br>
            <li>
                <p>Click <a href="#"><b>here</b></a> to learn more.</p>
            </li>
        </ul>
        <!-- End -->
    </div>
    <br>
</div>
<!-- Description Block End -->

<!-- Image Block -->
<div class="block-container">
    <div class="block-body">

        <div class="header block-minorHeader">My Title</div>
        <!-- image gallery start -->
        <!-- Container for the image gallery -->
        <div class="container">

            <!-- Full-width images with number text -->
            <div class="mySlides" id="imgBorder">
                <div class="numbertext">1 / 6</div>
                <img src="" style="width:100%">
            </div>

            <div class="mySlides" id="imgBorder">
                <div class="numbertext">2 / 6</div>
                <img src="" style="width:100%">
            </div>

            <div class="mySlides" id="imgBorder">
                <div class="numbertext">3 / 6</div>
                <img src="" style="width:100%">
            </div>

            <div class="mySlides" id="imgBorder">
                <div class="numbertext">4 / 6</div>
                <img src="" style="width:100%">
            </div>

            <div class="mySlides" id="imgBorder">
                <div class="numbertext">5 / 6</div>
                <img src="" style="width:100%">
            </div>

            <div class="mySlides" id="imgBorder">
                <div class="numbertext">6 / 6</div>
                <img src="" style="width:100%">
            </div>

            <!-- Next and previous buttons -->
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>

            <!-- Image text -->
            <div class="caption-container">
                <p id="caption"></p>
            </div>

            <!-- Thumbnail images -->
            <div class="row">
                <div class="column">
                    <img class="demo cursor" id="thumb" src="" style="width:100%" onclick="currentSlide(1)" alt="">
                </div>
                <div class="column">
                    <img class="demo cursor" id="thumb" src="" style="width:100%" onclick="currentSlide(2)" alt="">
                </div>
                <div class="column">
                    <img class="demo cursor" id="thumb" src="" style="width:100%" onclick="currentSlide(3)" alt="">
                </div>
                <div class="column">
                    <img class="demo cursor" id="thumb" src="" style="width:100%" onclick="currentSlide(4)" alt="">
                </div>
                <div class="column">
                    <img class="demo cursor" id="thumb" src="" style="width:100%" onclick="currentSlide(5)" alt="">
                </div>
                <div class="column">
                    <img class="demo cursor" id="thumb" src="" style="width:100%" onclick="currentSlide(6)" alt="">
                </div>
            </div>
        </div>
        <!-- image gallery end -->
    </div>
    <br>
</div>