Update VMMC direct to client images

[nsitaula]

Updated images into table format

[mrjones-plip]

@nsitaula - wow! using tables is so much more readable - thank you! On the left is the old image and on the right is the now much improved table:

Is it possible to have the text in the images be pulled out too? The right most "Client review visit" text on the image above, for example, is very hard to read on desktop or mobile. Pulling them all out so they're native text which gets scaled up or down would be great

Not as important, but some of the arrows and dashed lines also no longer really make sense in the table. Here I've highlighted one example:

[nsitaula]

thanks @mrjones-plip. I actually struggled little bit creating these icons and aligning them together. You probably will notice I used lot of " " in the table to have them somewhat similar size. I am not quite sure how we can take the textbox out of images. Would it be possible to help me with the images?

[mrjones-plip]

@nsitaula - ah sure - happy to help! Do we have any originals of the images? Do you have a google doc where you're recreating them?

[nsitaula]

thanks for supporting @mrjones-plip. I created images by cropping parts from the previous images with text (previous version where we had text and images which are in direct-to-client folder) and uploaded them in same directory with this changes.

[mrjones-plip]

@nsitaula - ah gotcha! I've redone one table, and I'll redo the others in the coming days. I welcome feedback per my notes below!

---

Two key tricks, it turns out, is to have images all the same size and then force some CSS so columns are same width. I ended up re-mastering the images (see main.inkscape.svg) to get them identical widths and then I added this CSS:

<style>
  #workflows ~ table tr th {
    vertical-align: top;
    width: 20%;
  }
</style>

Which makes the first table have top aligned text and even widths on it's columns. I also reduced a lot of duplicate text, simplified wording, removed a lot of HTML to favor markdown. Finally I moved the 4th step to be between 3rd and 5th (instead of under 1st) and used even sized arrows on the right of the first 4 images.

This markdown:

| {{< figure src="Figure3_1.png" >}} | {{< figure src="Figure3_2.png" >}} | {{< figure src="Figure3_3.png">}} | {{< figure src="Figure3_1.png" >}}  | {{< figure src="Figure3_4.png" >}} |
|--|--|--|--|--|
| **1.** Enrolment - Static/Outreach Site visit | **2.** HIV Testing, screening & counseling | **3.** Procedure | **4.** Static/Outreach Site visit | **5.** Follow up visit  |
| Nurse enrols clients | Client tested for HIV, screened for wounds, any form of bleeding, and any other medical issues. Counselling  provided as needed.| If client's HIV status doesn't pose risks, procedure is done. Post-operative counseling  offered | Register after surgery | On Day 2 and Day 7 after surgery | 

Renders this table:

[nsitaula]

thanks @mrjones-plip . I am not sure if we need review from Caryl on text and flow changes as these were reviewed by Caryl and Evelyn (other research teammates). @antonykhaemba any thoughts/suggestions?

[antonykhaemba]

@nsitaula and @mrjones-plip let us proceed with updating the images into the table format and we will share with Caryl (I-TECH) to review before we merge. @mrjones-plip any chance for us to have a joint working session to work on this for us to learn and be able to support in updating other existing images?

[mrjones-plip]

@antonykhaemba and @nsitaula - I've completed the update and it's ready for internal or external review. Here's a screenshot below of before (left) and after (right). Note that I also converted the "benefits" image to a bulleted list as this is much easier to read, is indexed by search engines and is mobile friendly.

[mrjones-plip]

Hrm - Looks like I can't make nsitaula a reviewer because that's who opened the PR 🤔

I'll wait to hear back from @nsitaula or @antonykhaemba if this is OK to push live, approve, and merge. If there's changes needed, we'll do that in this PR before merging.

[antonykhaemba]

We are yet to get any feedback from Caryl. I will follow up with her next week.