I am using Adapt-blinds component and the Instruction does not convert to Mobile Instruction. I was wondering if you were able to get the mobile instruction within the component or is it on the article? I would like the instruction to be under my title and body text where it normally goes.
Re: article mobile instruction
Re: article mobile instruction
Hi all,
Just resurrecting this question. Ignacio's solution worked great, but Adapt has moved on and there's no longer a vanilla.js file! Please could someone suggest a new way I could achieve the same effect?
I need "mobileInstruction" for articles, whereby you have the option for the article instruction text to change at medium & small device sizes (similar to how it works in a hotgraphic).
Many thanks
Re: article mobile instruction
Hi Chris, could you please test the adapt-mobileInstruction extension?
You can see it here
Re: article mobile instruction
Hi Ignacio. This looks great. Having difficulty implementing it though. Where do I place the JSON?! I put it within the article, and it replaced the whole article with the instruction only!
Re: article mobile instruction
Install the mobile instruction extension in your project.
In articles.json{
"_id": "a-05",
"_parentId": "co-05",
"_type": "article",
"_classes": "",
"title": "a-05",
"displayTitle": "",
"body": "",
"instruction": "Article instruction text.",
"_mobileInstruction": {
"_isEnabled": true,
"instruction": "Mobile article instruction text",
"_selector": ".article__instruction-inner"
}
}
Re: article mobile instruction
Still not working for me Ignacio. Framework 5.18.6. I'll try it in a new course when I get a minute (!).
Re: article mobile instruction
Chris, I just updated the extension. Could you try again, please?
Re: article mobile instruction
Great work Ignacio! Works perfectly.
This is probably on your list, but one thing I would suggest is to have the screen size where the swap occurs (currently 'small') configurable in the articles.json part. I opened the JS and changed const sizedInstruction = (device.screenSize === 'small'... etc to 'medium' (which I needed because my tabbed abs collapses @device-width-medium, so the 'Click the tabs...' instruction needs to change) but for someone petrified of code (even more than me!) it might help!
Works great though! Many thanks.