DjsBlog: Jekyll -Rendering on a Mobile Part 1

Site Calendar

With Jekyll Liquid, the rendered text screen width on a phone is inversely determined by the width of the largest image on the page. That is, the wider the widest image on the page, the smaller is the relative width of normal text on the page. This can be managed by controlling the width of images on the page, but a more generic approach is needed.

Update

Subsequent to the initial post here, the complete file path for the image is used. Previously, just the filename was supplied and the image was assumed to be in /images. /images, /media and /grove have been used here in previous posts. The post here has been modified for this.
A later post will also discuss a console app for scanning previous posts for MarkDown image constructs and replacing them with calls to the included file images.html. It’s on GitHub at djaus2/MDImage2Call. Previous posts here will have been so updated by the app when that post is published.

About

Quoting the Jekyll Picture Tag documentation on GitHub:

“It’s simple to throw a photo on a page and call it a day, but doing justice to users on all different browsers and devices is tedious and tricky. Tedious, tricky things should be automated”

For desktop rendering with Jekyll, inserting images of width of about 800px means that they will display OK a desktop but the text will be quite narrow on a phone in portrait mode, requiring expansion so as to be able to read it. What is needed is a thumbnail of images in the phone context that when clicked is expanded.

There may be simpler solutions, but the Jekyll Picture Tag provides a quite formal solution. The simple solution used here is a html included file that provides that functionality through conditional Liquid Jekyll Liqd code and Javascript.

Demo of the issue

Display this post in a phone.
Rotate phone to landscape and refresh.
Rotate back to portrait without refreshing.
Observe the issue with text.
Refresh and see that all is OK.

A Basic Solution

For all post pages, there is an image at the head and one towards the bottom. The solution for these two is to have a normal image of width 1000 pixels and one 380 pixels wide. Javascript is then used to determine which image is used:

<div id="header_image" style="Display:none">
    <h4>
        <img src="/images/activity2-800.png">
        <br />
        <large> Blog on Microsoft Technologies esp. IoT</large>
    </h4>
</div>

<div id="header_image2" style="Display:none">
    <h4>
        <img src="/images/activity2-320.png">
        <br />
        <large> Blog on Microsoft Technologies esp. IoT</large>
    </h4>
</div>

<script>
    if (document.body.clientWidth >=680)
    {
        document.getElementById('header_image').style.display = "block";
        document.getElementById('header_image2').style.display = "none";
    }
    else
    {
        document.getElementById('header_image').style.display = "none";
        document.getElementById('header_image2').style.display = "block";
    }
</script>

The 680 discriminator was found through trial and error.

General Solution

A generic solution that can be used as an include file needs:

One image file
- Rendered without dimensions for desktop.
- Rendered as a thumbnail for phone
- Thumbnail has a link to display the full size image
- images in /image
A Tag to use to generate the div ids as they both/all need to be unique on any page,
Alt text for if there is a problem with the specified image.

Sample of envisaged use

The reusable included page for rendering image is image.html in /include
Example use on a post page:

{% include image.html imagefile=”/images/activity.png” tag=”QWERTY” alt=”activity” %}

The image include file

<div id="{{include.tag}}" style="Display:none">
    <img src="{{include.imagefile}}" alt="{{include.alt}}">
</div>

<div id="{{include.tag}}small" style="Display:none">
    <a href="{{include.imagefile}}" target="_blank"><img src="{{include.imagefile}}" width="360" alt="{{include.alt}}"></a>
<br /><small><i>Tap and rotate phone to enlarge.</i></div><small>
</div>

<script>
    if (document.body.clientWidth >={{site.phonewidth}} )
    {
        document.getElementById('{{include.tag}}').style.display = "block";
        document.getElementById('{{include.tag}}small').style.display = "none";
    }
    else
    {
        document.getElementById('{{include.tag}}').style.display = "none";
        document.getElementById('{{include.tag}}small').style.display = "block";
    }
</script>

image.html in /include

Note that the Liquid Jekyll code is processed and rendered before any of the Javascript runs. Hence

{{include.tag}}small</large>

div id will be rendered as QWERTYsmall in the example, in the second div tag and the Javascript.

Nb: The next post is a discussion of how the Liquid Jekyll code shown here is included on this page. Jekyll: Display Liquid code in a post

Conclusion

A relatively simple solution is provided for using images on a Jekyll post page that renders in full on a desktop but renders as a linked thumbnail on a phone in portrait mode.

	Topic	Subtopic

	*This Category Links*
*Category:*	Web Sites Index:	Web Sites
Next: >	Jekyll	Display Liquid code in a Post
< Prev:	Club Record Certificate	Part 5 ... Edge V Chrome

Blog on Microsoft Technologies esp. IoT