/ dev

VJ Picnic

To begin, run: yo --generators

1. yo @bbc/vj:carto

Back to top

picnic blanket

What you need

Scroll me

  1. Project Jira space (newsspec, vjamericas, vjafwest, vjneareast)
  2. Jira number (XXXXX)
  3. Title for include (optional)
  4. Carto embed URL (provided by journalist)
  5. Filename of desktop key image (default: desktop_key.png) (optional)**)
  6. Filename of mobile key image (default: desktop_key.png) (optional)**)
  7. key alt text (provided by journalist) (optional if above not required**)
  8. Interactive call to action (sub-title, provided by journalist)
  9. source attribution (provide by journalist)
  10. Fallback message (default: Sorry, your browser cannot display this map)
picnic blanket

Scroll me

Now run:

cd JiraSpace-XXXXX

** You need to place both the desktop and mobile images inside 'JiraSpace-xxxxx/source/app/assets'.
If the carto map does not require a key image (ask journalist): Navigate to the bottom of source/app.js. Remove the legends property in the ‘new Carto’ object, so that it looks like this:

new Carto({
    namespaceId: '{{name}}-{{includeName}}',
    title: '{{vocab.title}}',
    cta: '{{vocab.cta}}',
    attribution: '{{vocab.attribution}}',
    iframe: {
        source: '{{vocab.embed_url}}',
        height: 450,
    },
    alt: '{{vocab.alt}}',
});
picnic blanket

Publish

  1. offreith
  2. npm run build
  3. npm run deploy:test
  4. npm run deploy:live
picnic blanket

Test Link:

https://news.test.files.bbci.co.uk/include/JiraSpaceName/XXXXX/language/app/embed

Live Link:

https://news.files.bbci.co.uk/include/JiraSpaceName/XXXXX/language/app/embed

Include Path: (What you need to give to the journalist)

include/JiraSpaceName/XXXXX/language/app/embed?responsive=true

2. yo @bbc/vj:rad

Back to top

picnic blanket

What you need

Scroll me

  1. Project Jira space (newsspec, vjamericas, vjafwest, vjneareast)
  2. Jira number (XXXXX)
  3. Alt Text (provided by journalist)
  4. Caption (provided by journalist) (optional)
  5. Path to smaller image (e.g. ~/Downloads/small.png)
  6. Path to larger image (e.g. ~/Downloads/large.png)
picnic blanket

Scroll me

Now run:

cd JiraSpace-XXXXX

Publish

  1. offreith
  2. npm run build
  3. npm run deploy:test
  4. npm run deploy:live
picnic blanket

Test Link:

https://news.test.files.bbci.co.uk/include/JiraSpaceName/XXXXX/language/app/embed

Live Link:

https://news.files.bbci.co.uk/include/JiraSpaceName/XXXXX/language/app/embed

Include Path: (What you need to give to the journalist)

include/JiraSpaceName/XXXXX/language/app/embed?responsive=true

3. yo @bbc/vj:image-hyperlink

Back to top

picnic blanket

What you need

Scroll me

  1. Project Jira space (newsspec, vjamericas, vjafwest, vjneareast)
  2. Jira number (XXXXX)
  3. Path to image (e.g. ~/Downloads/image.png)
  4. Alt text (provided by journalist)
  5. URL image should link to (provided by journalist)
picnic blanket

Scroll me

Now run:

cd JiraSpace-XXXXX

Publish

  1. offreith
  2. npm run build
  3. npm run deploy:test
  4. npm run deploy:live
picnic blanket

Test Link:

https://news.test.files.bbci.co.uk/include/JiraSpaceName/XXXXX/language/app/embed

Live Link:

https://news.files.bbci.co.uk/include/JiraSpaceName/XXXXX/language/app/embed

Include Path: (What you need to give to the journalist)

include/JiraSpaceName/XXXXX/language/app/embed?responsive=true

4. yo @bbc/vj:project

Back to top

picnic blanket

What you need

  1. Project Jira space (newsspec, vjamericas, vjafwest, vjneareast)
  2. Jira number (XXXXX)
  3. include name (forms part of the include path)(optional)
  4. Description (optional) (populates README)
picnic blanket

Scroll me

Now run:

1. cd JiraSpace-XXXXX
2. npm run build
3. npm run start (this will redirect you to the local link in your browser) 

Publish

  1. offreith
  2. Before you publish check the project version number is greater than what is already in test/live. (If the project has been published before)
  3. npm run build
  4. grunt deploy:test (publish to test)
  5. grunt deploy:live (publish to live)
picnic blanket

Local Link:

https://www.local.bbc.co.uk:1031/include/JiraSpaceName/XXXXX/language/app/test--embed.html

Test Link:

https://news.test.files.bbci.co.uk/include/JiraSpaceName/XXXXX/language/app/test--embed.html

Live Link:

https://news.files.bbci.co.uk/include/JiraSpaceName/XXXXX/language/app/test--embed.html

5. yo @bbc/vj:pym

Back to top

picnic blanket

What you need

Scroll me

  1. Project Jira space (newsspec, vjamericas, vjafwest, vjneareast)
  2. Jira number (XXXXX)
  3. Url of iframe to include (provided by journalist)
picnic blanket

Scroll me

Now run:

cd JiraSpace-XXXXX

Publish

  1. offreith
  2. npm run build
  3. npm run deploy:test
  4. npm run deploy:live
picnic blanket

Test Link:

https://news.test.files.bbci.co.uk/include/JiraSpaceName/XXXXX/language/app/embed

Live Link:

https://news.files.bbci.co.uk/include/JiraSpaceName/XXXXX/language/app/embed

Include Path: (What you need to give to the journalist)

include/JiraSpaceName/XXXXX/language/app/embed?responsive=true
VJ Picnic
Share this