Mobile version of gallery links, gallery image thumbnails disappear

[Ricky Mujica]

I've made a nikola website for my artwork. I have the latest version of Nikola 8.0.2.

There is a problem when I accesses the website through a mobile phone. If I click on a gallery link, the gallery thumbnails show up but the moment you touch an image thumbnail, or begin to scroll, the page goes blank. I've tried everything I can think of, but I can figure out what's wrong. This doesn't happen on the desktop version of the site.

Here is my website www.rickymujica.com

Check it out on a mobile phone. Click on the link menu and then pick something like "figurative" and you'll see what I mean if you try to scroll or click on a link.

Please help.

Ricky

[Jim Schmitz]

It seems I can duplicate this in the Chrome browser using the Developer Tools (Ctrl-Shift-I) and activating the Device Toolbar (Ctrl-Shift-M). Then I can make it simulate a phone using the dropdown.

The error I see in the console is:

justified-layout.min.js:11 Uncaught TypeError: input.map is not a function
    at module.exports (justified-layout.min.js:11)
    at renderGallery (gallery.min.js:1)

I'm guessing you aren't using a custom theme or have done alterations to the css or javascript. Can you try other themes to see if that makes the problem go away?

P.S. I like your paintings.

--
You received this message because you are subscribed to the Google Groups "nikola-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nikola-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/2918a1e9-bd66-464e-99d8-4d811aade32c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ricky Mujica]

Hey Jim! Thanks the kind words about my art and thanks for checking
into the website.
Interestingly I can't recreate the problem chrome mobile browser
simulation. Works perfectly on the computer. The problem is only on a
real mobile phone. I just uploaded the website using the "hyde" theme
and I get the same problem. I also tried "bootstrap3" and the problem
was even worse. Thumbnails didn't even come up. The only changes I've
made to the template is to follow the tutorial on the nikola site on
making a website not a blog. I made the blog part a link. My link to
the blog, interestingly doesn't show in the "Hyde" theme.
It would be a real shame if I couldn't use bootstrap4. I'm in love
with that template (with one exception which I don't know how to
change - I would like to change the font size of the subheaders- but
that's for another time, I'll eventually figure that out).
I'm wondering if it would help to just delete my output folder and re
render it? Or is there a way to reinstall the gallery module? What
should I try?
Thanks again :)
Ricky

> You received this message because you are subscribed to a topic in the Google Groups "nikola-discuss" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/nikola-discuss/b1oGV4w0_xE/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to nikola-discus...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CAKUYxWKiuwHJ8BaAKSha1JWt8Bx60447DpbtJX6HmuzY_pa3Rg%40mail.gmail.com.

[Ricky Mujica]

Sorry, I meant bootblog4 not bootstrap4 :)

[Jim Schmitz]

For the purpose of gathering information about the problem, can you try a variety of themes, regardless of whether or not you like them? It would be helpful to know if it is a problem with your setup or a problem with this theme. If this happens for all themes then it is more likely it is how you setup the galleries. Note the galleries on my website work fine on my phone using a customized version of the lanyon theme.

Another thing you can do is start with a demo site and verify it works fine on your phone, then gradually transform the demo site into your site. With each change, you can confirm the galleries work as you want them to. If a change causes it to break, then you have pinpointed the cause.

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CA%2BepZkZJWPMXMn7aYoP9ycQ7zuOgDKbMnMXENKz8bPr1F4ddmA%40mail.gmail.com.

[Ricky Mujica]

Thank you! I just tried the Lanyon theme (it's up there now) and it
happened again. Funny, the Lanyon theme works for a longer period of
time before the thumbnails disappear. I'm pretty sure it's got to be
my set up because I've tried about five themes and it has happened
with all of them.
Thanks for your advice. It makes a lot of sense and this is a good
place to start. I will rebuild my site from a demo site tomorrow night
and see what happens. If I find out what it is, I'll let you know :)
Thanks for your help!
Ricky

> To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CAKUYxWK2CEG_sYSENCSV%3DJi%2BYrFECRMyuMy2Hn5tKL4mpmMcdg%40mail.gmail.com.

[Ricky Mujica]

Hey Jim,
I finally got a moment to try and start from scratch and I found the
cause pretty quickly. I started with a base site. The moment I added
images to the gallery I ran into the problem. When I press a gallery
link, "Figurative" for instance, the thumbnails come up in the mobile
version. If I immediately click on a thumbnail, it works. But the
moment I scroll down to see more thumbnails, all the thumbnails
disappear.
Here is the link to the test site www.temp.rickymujica.com/webTest/index.html

I haven't done anything else except upload the gallery files and edit
nav links part of the config.py file. Here is the links code from the
config file, everything else is the default config file.


NAVIGATION_LINKS = {
DEFAULT_LANG: (
("/galleries/Figurative", "Figurative"),
("/galleries/Landscape", "Landscape"),
("/galleries/Studies", "Studies"),
("/galleries/Portraiture", "Portraiture"),
("/galleries/Experimental", "Experimental"),
),
}


It's looking like a bug to me because none of this happened until I
upgraded from Nikola 7.

Any suggestions? Is there a file in the output folder that I might be
able to edit manually?

Thanks and hope you are well.


Ricky

> To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CAKUYxWK2CEG_sYSENCSV%3DJi%2BYrFECRMyuMy2Hn5tKL4mpmMcdg%40mail.gmail.com.

[Ricky Mujica]

I just found another bit of information. The thumbnails only disappear
when I scroll down. If I refresh the page while the lower thumbnails
are showing and I scroll up, the thumbnails don't disappear! I don't
know what that means, but it's something :D
Ricky

[Roberto Alsina]

I only looked at it for a few minutes, but when there is a resize event there is a bug in 3rd party code. I will try to take a look eventually.

Sorry about the breakage!

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CA%2BepZka_fLg8PJ%2BOOKrLdFoCOCP%2BE8rBHSn1f0Q5NBHNN-3W9g%40mail.gmail.com.

[Ricky Mujica]

Thank you so much!
R

> To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CALXDAfpPHqFKWJQ7oDSgbDokZZ_%2BVjOyvWNeiUaFzRUHmVWk6A%40mail.gmail.com.

[Ricky Mujica]

Roberto, is there anything I can do in the meantime to edit the output
files to stop this until you get a chance to look at the code?
Thanks

[Roberto Alsina]

I have no idea yet.

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CA%2BepZkYaNC6dADecGE1tehQHU_8Wzr-8z9skK_8ZM0WGLG-sqA%40mail.gmail.com.

[Ricky Mujica]

Any news on this bug yet?

Thanks

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CALXDAfp1BqfrOs61v5YT_KtNV4%2BJpQfWR-7bs9DcsPFGd24yqg%40mail.gmail.com.

[Roberto Alsina]

Not yet

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CA%2BepZkZCcvY086k-%3DcuDRXVhyJne7qirZNZ_wi8otNZqnUmznA%40mail.gmail.com.

[Ricky Mujica]

Thanks, please let me know when you figure it out :).

> To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CALXDAfpcPRs-v%2BGd6doVzQ39Yhtuuum1LrEQpuq5Qd2ppp8Y4A%40mail.gmail.com.

[Ricky Mujica]

Any word on this issue with the disappearing thumbnails?

[Roberto Alsina]

Yes:

1) Looks like a bug in the 3rd party code that does the layout of the images

2) Updating to their latest version does not fix it

Current plan is to find another layout thingie, I may have time tomorrow.

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CA%2BepZka1RQ2FA8dVRapPBmumoFTCncHcp7bhgsfhBm0sVA6aWA%40mail.gmail.com.

[Ricky Mujica]

Thank you Roberto!
R

> To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CALXDAfrQoKTF7KWzmP3Kv5a_gm3eEY8aUaMY8YgppKajjYVZYQ%40mail.gmail.com.

[Michael Ghens]

Just curious, has anyone used Anaconda with Nikola? Last time I tried, Anaconda did not like Unicode characters. I want to simplify my personal/development system. 

Thanks

Michael 

[Jim Schmitz]

I use Nikola in an Anaconda environment. It works fine, but install it in the environment with a "pip install ..." command, not "conda install ..." because you always want to use the latest version of Nikola.

I have no idea what you mean about Anaconda and Unicode characters. You aren't using Python 2.7, are you?

 

--

You received this message because you are subscribed to the Google Groups "nikola-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nikola-discus...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CAEHvH-czC2woO8%2BNiGUkpg0wq20HwLhafOa6AKqjSq_bfuD9JA%40mail.gmail.com.

[Michael Ghens]

I have a test post with emoji shortcodes. They use, I believe UTF-8 codes for the emoji. The windows/Anaconda python did not like that post.

Yes, I was using 3.7. 

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CAKUYxWKr-rjtEmqo-ShFRwDpcxd6Svo_o7wD%2BqNi-YZBxvwBTg%40mail.gmail.com.

[Chris Warrick]

We can diagnose the problem only if we see how it fails.

Anaconda is supported if you install via pip, although if you have a standard Python 3 already, I would just use that. (There were some Anaconda-specific bugs in the past; you don't really need Anaconda even for scientific stuff in 2019.)

--
Chris Warrick <https://chriswarrick.com/>

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CAEHvH-d2mb2kppt2jmXWphDuPm%2BYsZ9yYPMQNLGUxa8qegSzrw%40mail.gmail.com.

[Michael Ghens]

I am fine for now with Arch Linux on Virtualbox. Changes in python/Virtualbox/Windows which I don't have time to identify have made it hard to move data from Windows/Linux/Onedrive between multiple computers. 

I should have an environment to play with this week and post the errors.

Thanks

Michael

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CAMw%2Bj7KTGufzeH81EMUoJgofrkwLv%2BOf_mdBBy93djk%2BQDeSmQ%40mail.gmail.com.

[Michael Ghens]

Well anything to get out of what I should be doing.

[2019-08-10T21:30:32Z] WARNING: Nikola: The role :emoji:`poultry_leg` is deprecated. Use |poultry_leg| instead
TaskError - taskid:render_posts:cache\posts\happy-thanksgiving-2018.html
PythonAction Error
Traceback (most recent call last):
  File "c:\users\msghe\anaconda3\envs\nikola\lib\site-packages\doit\action.py", line 424, in execute
    returned_value = self.py_callable(*self.args, **kwargs)
  File "c:\users\msghe\anaconda3\envs\nikola\lib\site-packages\nikola\post.py", line 645, in compile
    lang)
  File "c:\users\msghe\anaconda3\envs\nikola\lib\site-packages\nikola\plugins\compile\rest\__init__.py", line 152, in compile
    output, error_level, deps, shortcode_deps = self.compile_string(data, source, is_two_file, post, lang)
  File "c:\users\msghe\anaconda3\envs\nikola\lib\site-packages\nikola\plugins\compile\rest\__init__.py", line 142, in compile_string
    output, shortcode_deps = self.site.apply_shortcodes_uuid(output, shortcodes, filename=source_path, extra_context={'post': post})
  File "c:\users\msghe\anaconda3\envs\nikola\lib\site-packages\nikola\nikola.py", line 1638, in apply_shortcodes_uuid
    replacement, _deps = shortcodes.apply_shortcodes(v, self.shortcode_registry, self, filename, lang=lang, extra_context=extra_context)
  File "c:\users\msghe\anaconda3\envs\nikola\lib\site-packages\nikola\shortcodes.py", line 371, in apply_shortcodes
    res = f(*args, **kw)
  File "c:\users\msghe\anaconda3\envs\nikola\lib\site-packages\nikola\plugins\shortcode\emoji\__init__.py", line 39, in handler
    _populate()
  File "c:\users\msghe\anaconda3\envs\nikola\lib\site-packages\nikola\plugins\shortcode\emoji\__init__.py", line 21, in _populate
    data = json.load(inf)
  File "c:\users\msghe\anaconda3\envs\nikola\lib\json\__init__.py", line 293, in load
    return loads(fp.read(),
  File "c:\users\msghe\anaconda3\envs\nikola\lib\encodings\cp1252.py", line 23, in decode
    return codecs.charmap_decode(input,self.errors,decoding_table)[0]
UnicodeDecodeError: 'charmap' codec can't decode byte 0x8f in position 175: character maps to <undefined>

########################################
render_posts:cache\posts\happy-thanksgiving-2018.html <stdout>:

[Chris Warrick]

This bug has been fixed in master in April, we haven't had a release for a while so it's not yet in a stable release on PyPI. But the bug is Windows' fault, not Anaconda's.

--
Chris Warrick <https://chriswarrick.com/>

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CAEHvH-f5BNmmeoYj5JpZQ8nich%2BfbR_82uw-fLez%2BUBV5OdmpA%40mail.gmail.com.

[Ricky Mujica]

Any word on the mobile fix?

Ricky

[Jim Schmitz]

Recently I noticed the galleries on my blog had the same problem that Ricky was experiencing. I don't know why it started happening; perhaps when I did a build I deployed a newer version of the gallery js code and the newer version had this problem?

For unrelated reasons, last week I changed my theme from Lanyon to Bootblog4. As a side effect, this gallery problem was fixed. I don't know why but the gallery that comes with the Bootblog4 theme is different. I can swipe the images to move from one to the next, and I was never able to do that before.

This might all be crazy-talk, but perhaps try changing your theme to see if that fixes it? If it does, it's a clue that can be employed to find a more complete solution.

-Jim

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CA%2BepZkYcSWPiZAyQMak_MnAdkj11pokyjc03wXaY-SC2sk0AvA%40mail.gmail.com.

[Ricky Mujica]

My problem is with bootblog4 which I love. I tried to rebuild from
scratch on three occasions and had the same problem as soon as I
activated the gallery. I tried other themes and the problem
disappears. Bootblog4 is by far my favorite theme, but I guess I'm
just going to have to give up on it and tryto find another theme I
like. Tomorrow I'll try switching to lanyon and then back see if that
helps :)
I wonder if it's possible to just change the default gallery to
something else that handles the thumbnails the same way?
Thanks Jim.

> To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CAKUYxW%2BpdzUxwrOKP6%2BsNQYXmefencLbNLEOwRkm4-%2B7%3DS8ejg%40mail.gmail.com.

[Chris Warrick]

You can use anything you want in gallery.html, so if you know anything that can produce thumbnails in a similar manner, or otherwise good-looking galleries, go ahead.

To fix this bug, we would need to do exactly that, or fix the library we're currently using. The latter requires someone who can debug JS, and a consistent way to reproduce in an environment where attaching a debugger is possible.

--
Chris Warrick <https://chriswarrick.com/>

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CA%2BepZkbqqDZ-tkoun5jWi5RqBdJfcQsZnDgtvKZ%2BSBSucFb0ww%40mail.gmail.com.

[Jim Schmitz]

I took another look at Ricky's blog and was able to reproduce the problem there, then went back to my blog, and reproduced it again. So it seems I didn't fix the problem. :(

> The latter requires someone who can debug JS, and a consistent way to reproduce in an environment where attaching a debugger is possible.

Guess that's me then. I can reproduce it and I see the JavaScript error.  I have other priorities right now but I'll debug it in the near future. 

-Jim

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CAMw%2Bj7L3Mh-s%3Da%2BPc6uaJ8MUw3pcrCAbbh1-EQz-YnPjgUyVuQ%40mail.gmail.com.

[Chris Warrick]

So...

Turns out the bug was in Nikola's code (and it took me less than 5
minutes to identify it and fix it). This is the one-line patch to
gallery.tmpl:

-window.addEventListener('resize', renderGallery);
+window.addEventListener('resize',
function(){renderGallery(jsonContent, thumbnailSize)});

The built-in themes are already fixed on master, themes from the Index
are fixed as well.

I tested with both Firefox for Android and resizing a Chrome window on
desktop, and it works.

What went wrong: when the window was resized, we re-rendered the
gallery. Because JS is JS and arguments work in a slightly peculiar
way, we ended up calling renderGallery with an Event object as the
first argument (as happens in all event handlers), instead of
jsonContent (an array of images). This fix does it right by inserting
an anonymous function that passes the correct arguments.

PS. A great way to debug JS stuff (and the reason for the ultra-fast
diagnosis) is the `debugger;` statement. Python 3.7+ has
`breakpoint()` for the same use-case.

--
Chris Warrick <https://chriswarrick.com/>

PGP: 5EAAEA16

[Jim Schmitz]

Chris, thank you for the fix! It would have taken me more than 5 minutes to figure this out.

Thanks for the tip about the debugger, I didn't know that. I'll use that in the future when I need to debug something in JavaScript.

--
You received this message because you are subscribed to the Google Groups "nikola-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nikola-discus...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/CAMw%2Bj7JPQqho2fEkXTWvjUyNVPkvcX86gq2_EHrKVyOwcMxgQg%40mail.gmail.com.

[Ricky Mujica]

Awesome! Thank you so much! What should I do? Should I edit the gallery.tmpl in the output folder? or should I do a command line nikola update? 

Sorry for the noob question or if it seems like a dumb question :)

Ricky

[Chris Warrick]

On Sat, 14 Sep 2019 at 20:26, Ricky Mujica <ricky...@gmail.com> wrote:
>
> Awesome! Thank you so much! What should I do? Should I edit the gallery.tmpl in the output folder? or should I do a command line nikola update?
> Sorry for the noob question or if it seems like a dumb question :)
> Ricky

This change is not yet in a Nikola release. The easiest thing to do
would be to find the gallery.tmpl file your site is using (it's not in
`output`, it’s in the place where Nikola is installed) and just modify
that line in it directly.

> On Thursday, September 12, 2019 at 4:24:59 PM UTC-4, Chris Warrick wrote:
>>
>> So...
>>
>> Turns out the bug was in Nikola's code (and it took me less than 5
>> minutes to identify it and fix it). This is the one-line patch to
>> gallery.tmpl:
>>
>> -window.addEventListener('resize', renderGallery);
>> +window.addEventListener('resize',
>> function(){renderGallery(jsonContent, thumbnailSize)});
>>
>> The built-in themes are already fixed on master, themes from the Index
>> are fixed as well.
>>
>> I tested with both Firefox for Android and resizing a Chrome window on
>> desktop, and it works.
>>
>> What went wrong: when the window was resized, we re-rendered the
>> gallery. Because JS is JS and arguments work in a slightly peculiar
>> way, we ended up calling renderGallery with an Event object as the
>> first argument (as happens in all event handlers), instead of
>> jsonContent (an array of images). This fix does it right by inserting
>> an anonymous function that passes the correct arguments.
>>
>> PS. A great way to debug JS stuff (and the reason for the ultra-fast
>> diagnosis) is the `debugger;` statement. Python 3.7+ has
>> `breakpoint()` for the same use-case.
>>
>> --
>> Chris Warrick <https://chriswarrick.com/>
>> PGP: 5EAAEA16
>

> --
> You received this message because you are subscribed to the Google Groups "nikola-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to nikola-discus...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/f07e38a3-4274-4064-9f90-1e6127773bab%40googlegroups.com.

[Ricky Mujica]

Thanks again for the fix, Chris, Jim!
, OK, I located the gallery.tmpl for bootblog4, but I have no idea where to insert the code. 
Here is the gallery.tmpl from my site. Where do I insert the patch?

gallery.tmpl-----

## -*- coding: utf-8 -*-

<%inherit file="base.tmpl"/>

<%namespace name="comments" file="comments_helper.tmpl"/>

<%namespace name="ui" file="ui_helper.tmpl"/>

<%block name="sourcelink"></%block>

<%block name="content">

    ${ui.breadcrumbs(crumbs)}

    %if title:

    <h1>${title|h}</h1>

    %endif

    %if post:

    <p>

        ${post.text()}

    </p>

    %endif

    %if folders:

    <ul>

    % for folder, ftitle in folders:

        <li><a href="${folder}"><i

        class="icon-folder-open"></i>&nbsp;${ftitle|h}</a></li>

    % endfor

    </ul>

    %endif

<div id="gallery_container"></div>

%if photo_array:

<noscript>

<ul class="thumbnails">

    %for image in photo_array:

        <li><a href="${image['url']}" class="thumbnail image-reference" title="${image['title']|h}">

            <img src="${image['url_thumb']}" alt="${image['title']|h}" /></a>

    %endfor

</ul>

</noscript>

%endif

%if site_has_comments and enable_comments:

    ${comments.comment_form(None, permalink, title)}

%endif

</%block>

<%block name="extra_head">

${parent.extra_head()}

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">

<style type="text/css">

    #gallery_container {

        position: relative;

    }

    .image-block {

        position: absolute;

    }

</style>

%if len(translations) > 1:

    %for langname in translations.keys():

         %if langname != lang:

             <link rel="alternate" hreflang="${langname}" href="${_link('gallery', gallery_path, langname)}">

         %endif

    %endfor

%endif

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">

</%block>

<%block name="extra_js">

<script src="/assets/js/justified-layout.min.js"></script>

<script src="/assets/js/gallery.min.js"></script>

<script>

var jsonContent = ${photo_array_json};

var thumbnailSize = ${thumbnail_size};

renderGallery(jsonContent, thumbnailSize);

window.addEventListener('resize', renderGallery);

</script>

</%block>

To unsubscribe from this group and stop receiving emails from it, send an email to nikola-...@googlegroups.com.

[Chris Warrick]

You need to replace this line:

window.addEventListener('resize', renderGallery);

with this:

window.addEventListener('resize',
function(){renderGallery(jsonContent, thumbnailSize)});

> To unsubscribe from this group and stop receiving emails from it, send an email to nikola-discus...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/152777cd-cb04-4a9e-9402-a040e7d70649%40googlegroups.com.

[Ricky Mujica]

OK!  Lol, I think I figured it out. I just need to replace the window.addEvenListener. Right?

[Ricky Mujica]

Lol, OK, I get it now. That's what your plus and minus characters mean in your patch! I eliminate the the line with the minus and replace it with the line that has a patch! Lol, is that right! Duh! So obvious! I just learned something :)

[Ricky Mujica]

Lol, I just figured it out a second before you posted this! Thank you so much! You made my week! 

I'm really grateful!

Ricky

[Ricky Mujica]

I just tried it out and it worked! Thank you all so much!

Ricky