Design Help

[gregbtm]

Hi guys,

Following some tips from Russ + a thread on XF - I have done the following -

Created a template named uikit.css
Uploaded the js file to js/uitkit/uikit.js

Added the following to xb_head

<xf:js src="uikit/uikit.js" />

<xf:css src="uikit.css" />

The whole purpose right now of adding this library is for me to make an image used by an addon able to use a lightbox (click to make bigger)

I've found the appropriate template for this addon that produces the image in question -

<xf:title>{{ prefix('thread', $thread, 'escaped') }}{$thread.title}</xf:title>

<xf:h1>{{ prefix('thread', $thread) }}{$thread.title}</xf:h1>



<xf:if is="$xf.options.tmdbthreads_use_rating">

    <xf:set var="$rating" value="{$thread.Movie.tmdb_rating}" />

    <div style="margin-bottom:10px;">

        <xf:macro template="rating_macros" name="stars_text"

            arg-rating="{$rating}"

            arg-text="{{ phrase('rating') }}: {$thread.Movie.tmdb_rating}/5 {$thread.Movie.tmdb_votes} {{ phrase('votes') }}"

        />

  

        <xf:if is="$xf.visitor.user_id">

            <a href="{{ link('movies/rate',$thread.Movie)}}" data-xf-click="overlay"><button type="button" class="button--link button"><span class="button-text">{{ phrase('snog_movies_change_rating') }}</span></button></a>

        </xf:if>

    </div>

</xf:if>



<div class="movieBlock">

    <xf:if is="$xf.options.tmdbthreads_left == 1">

        <div class="moviethreadposter">

            <xf:if is="$thread.Movie.tmdb_image">

                <xf:if is="$xf.options.tmdbthreads_forum_local">

                                        <img src="{$thread.Movie.getImageUrl('l')}" />

                    <div uk-lightbox><a href="{$thread.Movie.getImageUrl('l')}" data-caption="Caption"></a></div>

                <xf:elseif is="$xf.options.tmdbthreads_usecdn" />

                    <img src="{$xf.options.tmdbthreads_cdn_path}/movies/LargePosters{$thread.Movie.tmdb_image}" />

                <xf:else />

                    <img src="https://image.tmdb.org/t/p/w185{$thread.Movie.tmdb_image}" />

                </xf:if>

            <xf:else />

                <img src="{$thread.Movie.getImageUrl('l', 1)}" />

            </xf:if>

        </div>

    </xf:if>

  

    <div class="message {{ ($xf.options.tmdbthreads_left == 1 ? 'messageMovie' : 'messageMovieLeft') }}">

        <xf:if is="$xf.options.tmdbthreads_show_thread.1"><b>{{ phrase('title') }}:</b> {$thread.Movie.tmdb_title}<br /></xf:if>

        <xf:if is="$xf.options.tmdbthreads_show_thread.2 && $thread.Movie.tmdb_tagline"><p><b>{{ phrase('snog_movies_tagline') }}:</b> {$thread.Movie.tmdb_tagline}</p></xf:if>

        <xf:if is="$xf.options.tmdbthreads_show_thread.3 && $thread.Movie.tmdb_genres"><p><b>{{ phrase('snog_movies_genre') }}:</b> {$thread.Movie.tmdb_genres}</p></xf:if>

        <xf:if is="$xf.options.tmdbthreads_show_thread.4 && $thread.Movie.tmdb_director"><p><b>{{ phrase('snog_movies_director') }}:</b> {$thread.Movie.tmdb_director}</p></xf:if>

        <xf:if is="$xf.options.tmdbthreads_show_thread.5 && $thread.Movie.tmdb_cast"><p><b>{{ phrase('snog_movies_cast') }}:</b> {$thread.Movie.tmdb_cast}</p></xf:if>

        <xf:if is="$xf.options.tmdbthreads_show_thread.6 && $thread.Movie.tmdb_release"><p><b>{{ phrase('snog_movies_release') }}:</b> {$thread.Movie.tmdb_release}</p></xf:if>

        <xf:if is="$xf.options.tmdbthreads_show_thread.7 && $thread.Movie.tmdb_runtime"><p><b>{{ phrase('snog_movies_runtime') }}:</b> {$thread.Movie.tmdb_runtime}</p></xf:if>

        <xf:if is="$xf.options.tmdbthreads_show_thread.8 && $thread.Movie.tmdb_plot"><b>{{ phrase('snog_movies_plot') }}:</b> {$thread.Movie.tmdb_plot}</xf:if>

    </div>

  

    <xf:if is="$xf.options.tmdbthreads_left == 2">

        <div class="moviethreadposter">

            <xf:if is="$xf.options.tmdbthreads_forum_local">

                <img src="{$thread.Movie.getImageUrl('l')}" />

            <xf:elseif is="$xf.options.tmdbthreads_usecdn" />

                <img src="{$xf.options.tmdbthreads_cdn_path}/movies/LargePosters{$thread.Movie.tmdb_image}" />

            <xf:else />

                <img src="https://image.tmdb.org/t/p/w185{$thread.Movie.tmdb_image}" />

            </xf:if>

        </div>

    </xf:if>

</div>



<xf:if is="$xf.options.tmdbthreads_show_thread.9 && $thread.Movie.tmdb_trailer">

    <div class="bbMediaWrapper">

        <div class="bbMediaWrapper-inner">

            <iframe width="500"

                height="300"

                allowfullscreen

                src="https://www.youtube.com/embed/{$thread.Movie.tmdb_trailer}?wmode=opaque&start=0"

                style="border:none;"></iframe>

        </div>

    </div>

    <p></p>

</xf:if>



<xf:if is="!$xf.options.tmdbthreads_force_comments">

    {{ bb_code($thread.Movie.comment, 'post', $post.User, {

        'attachments': $post.attach_count ? $post.Attachments : [],

        'viewAttachments': $thread.canViewAttachments()

    }) }}

</xf:if>



<xf:set var="$fpSnippet" value="{{ snippet($post.message, 0, {'stripBbCode': true}) }}" />



<xf:page option="ldJsonHtml">

    <script type="application/ld+json">

    {

        "@context": "https://schema.org",

        "@type": "DiscussionForumPosting",

        "@id": "{{ link('canonical:threads', $thread)|escape('js') }}",

        "headline": "{$thread.title|escape('htmljs')}",

        "datePublished": "{{ date($post.post_date,'Y-m-d') }}",

        "articleBody": "{$fpSnippet|escape('htmljs')}",

        "articleSection": "{$thread.Forum.Node.title|escape('htmljs')}",

        "author": {

            "@type": "Person",

            "name": "{{ ($thread.User ? $thread.User.username : $thread.username)|escape('htmljs') }}"

        },

        "interactionStatistic": {

            "@type": "InteractionCounter",

            "interactionType": "https://schema.org/ReplyAction",

            "userInteractionCount": {$thread.reply_count}

        }

    }

    </script>

  

    <script type="application/ld+json">

    {

          "@context": "http://schema.org/",

          "@type": "Movie",

          "name": "{$thread.Movie.tmdb_title}",

        "director": "{$thread.Movie.tmdb_director}",

        "dateCreated": "{$thread.Movie.tmdb_release}",

        "duration": "PT{$thread.Movie.tmdb_runtime}M",

          "image": "{$thread.Movie.getImageUrl('l')}",

          "description": "{$thread.Movie.tmdb_plot}"<xf:if is="$thread.Movie.tmdb_rating > 0">,

        "aggregateRating": {

            "@type": "AggregateRating",

            "bestRating": "5",

            "worstRating": "1",

            "ratingCount": "{$thread.Movie.tmdb_votes}",

            "ratingValue": "{$thread.Movie.tmdb_rating}"

          }</xf:if>

    }

    </script>

</xf:page>

I've highlighted both the original code and the code I've changed beneath.

The CSS+JS appears to be loading into XF. Lightbox unfortunately doesn't work. Can anyone see any problems with the way I've added things?

Many thanks

Greg

 

[Russ]

I'm curious but wouldn't it be easier for the add-on developer to tie into the existing lightbox functionality XF provides?

 

[gregbtm]

I'm curious but wouldn't it be easier for the add-on developer to tie into the existing lightbox functionality XF provides?

I'd love for that to be the case. I've asked for help both publicly and privately and he doesn't seem interested. It's such a simple (to me) fix and add. And it would look great, too.

 

[Russ]

It's a bit hard to debug something like that. I'd suggest opening the console panel in your browser (right-click and inspect) and click console. Refresh the page to see if you see any errors.

Additionally, double-check the "network" tab to make sure the new CSS/JS file is being included. It'll show the names in red usually if they can't be found.