Design Help

gregbtm

Customer
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 -

Code:
<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

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

gregbtm

Customer
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

Pixel Exit Staff
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.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.