Edit Partners text and images

[shanikadhettige]

• [x] Replace filler Partners text and images @shanikadhettige Labels: About page, Content edit

[shanikadhettige]

Confirming this text and team profiles text with Vivien today as well but in the mean time, @apercas, wanted to let you know that when I upload the partners text and the logos the editing is messed up. The logos try to conform to a specific shape (see the example for OSM that is already loaded to WP) and the columns get messed up. Here is the google doc where I have the text and links for the logos in case you want to try it yourself https://docs.google.com/document/d/1uUOEQaBztd-aUOQQwsYdfQuvsGPqVx_FRpKrPMusu2E/edit?usp=sharing

[apercas]

Checking.

[apercas]

Hi again @shanikadhettige I fixed the tags (you forgot a </div>), this is the final code I used https://gist.github.com/apercas/ff39ef2032b67560288b87d0dd428780

Please let me know if you keep facing issues while editing the about section. Thank you :)

[shanikadhettige]

Hi @apercas, I manually re-added in the final text and logos that had been deleted before from the About page but the formatting still won't work for me. Please address and then close, thank you!

[vdeparday]

@apercas how are we supposed to fix the image formatting issue for the partners' logo? Are we supposed to change the dimensions in the html for each of them or is that a css issue?

The partners' section look messy as a whole. Can we have them in boxes like the related webpages ?

[vdeparday]

@apercas, just following up on this one, could we tidying up the partner section images and text by using boxes ? Similar to related webpages and elsewhereo n the website.

[apercas]

That's okay, but are you concerned that this will imply reducing the length of the text (so it fits on a card)? Is that okay?

[vdeparday]

I think that it is fine. We can work on shorter text and focus on what we actually do with them. cc @shanikadhettige agreed ?

[apercas]

Here: http://dev-gfdrr-opendri.pantheonsite.io/about/#partners

You'd like to change the icons as well, I think.

[vdeparday]

@apercas How does that work? Isn't it resize automatically or do we have to enter the size manually?

@shanikadhettige, could you have a quick look at it?

[shanikadhettige]

@apercas I've tried a few different ways (adding links/adding media files) but haven't been able to change the icons properly. What is the size of the box? Changing the size of the image to the height of 62 px seems to stretch and pixelate them but the way it is right now they get cut off.

[apercas]

I see, maybe we should add the logos resized, because if we change the size afterwards we can break their proportions:

[shanikadhettige]

@apercas I had tried to add it after resizing a few days ago but it came out pixelated

[shanikadhettige]

@vdeparday perhaps we should just remove the logos? it is nice to have visuals but if it is causing significant trouble it may be the best way to move forward

[vdeparday]

it shouldn't be too hard to do, @apercas can you advise on what is the best way forward?

[shanikadhettige]

I've removed the logos. @apercas can you shift the blue titles higher up in the box so that the descriptive text sits below each? That will likely be the neatest way.

Thank you

[apercas]

Done.

[shanikadhettige]

Thanks for fixing that Adrian but I think that changed the bottom boxes for Related Web Pages as well. They are now messed up as seen in the image below.

Could you also make the white box for the Partners a medium grey tone to make the page a little more interesting (do not change the Related Web Pages) as well as have the white text centered within the blue button? Right now the text is towards the top of the blue.

[shanikadhettige]

Deferred until #81 is addressed

[tiagojsag]

Hi,

can you let us know if this is still an issue?

thanks

[shanikadhettige]

Hi Tiago,

I'm just getting some bandwidth to look at these again. We have hidden the partner text and images for now until the organizations have all been consulted. That being said, we plan to show this content again in the future and I believe the issue remains a problem.

[tiagojsag]

As per our conversation last week, we are pending partner approval to display the logos. Once we have that, we'll review the hidden section of the "about" page and make sure the logos show up properly formatted. @vdeparday Let us know when you have the approved partner list closed, and please try to get the logos in high resolution too.

Thanks

[tiagojsag]

hi @shanikadhettige @vdeparday

Have there been any developments here?

Thanks

[vdeparday]

Not yet, I think you can park this one for now. It will take a little bit for us to get everything.

[nerik]

Here's an example implementation:

<article class="cf project type-project status-publish format-standard has-post-thumbnail hentry">
    <header class="article-header">
        <h1 class="h2 entry-title"><a title="Indonesia" href="https://hotosm.org/" target="_blank" rel="bookmark">HOT</a></h1>
    </header>
    <section class="entry-content cf" style="text-align: center;">
        <img class="size-medium wp-image-624" src="http://localhost/wp-content/uploads/2015/12/hot-300x180.png" width="120" height="180" />
    </section>
    <section class="entry-content cf" style="position: relative; top: 30px;">The Humanitarian OpenStreetMap Team (HOT) supports open and participatory mapping programs in disaster response and risk reduction activities. OpenDRI has worked with HOT in Haiti, Colombia, Indonesia and elsewhere to facilitate the use of community mapping within GFDRR disaster risk management activities.</section><footer class="article-footer cf"><footer class="article-footer cf"></footer></footer>
</article>

<article class="cf post-285 project type-project status-publish format-standard has-post-thumbnail hentry">
    <header class="article-header">
        <h1 class="h2 entry-title"><a title="Indonesia" href="http://www.globalquakemodel.org" target="_blank" rel="bookmark">GEM Foundation</a></h1>
    </header>
    <section class="entry-content cf" style="text-align: center;">
        <img class="size-medium wp-image-624" src="http://localhost/wp-content/uploads/2015/12/hot-300x180.png" width="120" />
    </section>
    <section class="entry-content cf" style="position: relative; top: 30px;">The GEM Foundation is a global collaborative effort with the aim to provide organizations and people with tools and resources for transparent assessment of earthquake risk anywhere in the world. By pooling data, knowledge and people, GEM acts as an international forum for collaboration and exchange, and leverages the knowledge of leading experts for the benefit of society. GEM has partnered with OpenDRI through collaborative software development and sharing ideas and approaches for the collection of asset and exposure data. In November 2011, GEM hosted the InaSAFE Code Sprint in their offices in Pavia, Italy.</section><footer class="article-footer cf"><footer class="article-footer cf"></footer></footer>
</article>

<article class="cf project type-project status-publish format-standard has-post-thumbnail hentry">
    <header class="article-header">
        <h1 class="h2 entry-title"><a title="Indonesia" href="http://www.redcross.org/" target="_blank" rel="bookmark">American Red Cross</a></h1>
    </header>
    <section class="entry-content cf" style="text-align: center;">
        <img src="http://localhost/wp-content/uploads/2015/12/american-red-cross-300x225.jpg" alt="" width="100" class="alignnone size-medium wp-image-2360" />
    </section>
    <section class="entry-content cf" style="position: relative; top: 30px;">Among many other commitments, the American Red Cross provides disaster relief services and is committed to donating time, money, and blood to save lives. The team worked with OpenDRI in the Philippines after Typhoon Yolanda struck.</section><footer class="article-footer cf"><footer class="article-footer cf"></footer></footer>
</article>

<article class="cf project type-project status-publish format-standard has-post-thumbnail hentry">
    <header class="article-header">
        <h1 class="h2 entry-title"><a title="Indonesia" href="https://www.usaid.gov" target="_blank" rel="bookmark">USAID</a></h1>
    </header>
    <section class="entry-content cf" style="text-align: center;">
        <img src="http://localhost/wp-content/uploads/2015/12/usaid-300x247.jpg" alt="" width="100" class="alignnone size-medium wp-image-2362" />
    </section>
    <section class="entry-content cf" style="position: relative; top: 30px;">USAID is the lead U.S. Government agency that works to end extreme global poverty and enable resilient, democratic societies to realize their potential.</section><footer class="article-footer cf"><footer class="article-footer cf"></footer></footer>
</article>

<article class="cf project type-project status-publish format-standard has-post-thumbnail hentry">
    <header class="article-header">
        <h1 class="h2 entry-title"><a title="Indonesia" href="https://hiu.state.gov/" target="_blank" rel="bookmark">HIU</a></h1>
    </header>
    <section class="entry-content cf" style="text-align: center;">
        <img class="size-medium wp-image-624" src="http://localhost/wp-content/uploads/2015/12/hot-300x180.png" width="120" />
    </section>
    <section class="entry-content cf" style="position: relative; top: 30px;">The mission of the Humanitarian Information Unit (HIU) is to serve as a U.S. Government interagency center to identify, collect, analyze, and disseminate all-source information critical to U.S. Government decision-makers and partners in preparation for and response to humanitarian emergencies worldwide, and to promote innovative technologies and best practices for humanitarian information management.</section><footer class="article-footer cf"><footer class="article-footer cf"></footer></footer>
</article>

<article class="cf project type-project status-publish format-standard has-post-thumbnail hentry">
    <header class="article-header">
        <h1 class="h2 entry-title"><a title="Indonesia" href="http://www.aifdr.org/" target="_blank" rel="bookmark">AIFDR</a></h1>
    </header>
    <section class="entry-content cf" style="text-align: center;">
        <img class="size-medium wp-image-624" src="http://localhost/wp-content/uploads/2015/12/hot-300x180.png" width="120" height="180" />
    </section>
    <section class="entry-content cf" style="position: relative; top: 30px;">The Australia-Indonesia Facility for Disaster Reduction (AIFDR) is a joint initiative between the governments of Australia and Indonesia through the Indonesia’s Disaster Management Agency (BNPB) to strengthen Indonesia’s ability to reduce the impact of disasters. AIFDR works in close partnership with the Government of Indonesia’s science, technology and disaster management agencies to build national capacity for risk and vulnerability modeling, research and innovation. Since 2010, AIFDR has been a key partner of the World Bank and GFDRR in the development of the InaSafe program, including advocacy and capacity building to apply open source technology and open data to the challenges of disaster risk management. They have also demonstrated leadership in fostering the growth of the OpenStreetMap community in Indonesia.</section><footer class="article-footer cf"><footer class="article-footer cf"></footer></footer>
</article>

[tiagojsag]

Hi everyone,

Given that we are not sure when we'll have the final logos approved, we went ahead and did the necessary changes to have the "partners" section support a varying range of logo proportions:

You can see it live on https://dev-gfdrr-opendri.pantheonsite.io/about/

The code itself is also available on the production site, but it is commented out, so frontend users won't see the partners section. As you can see, we are using placeholder images with different sizes and proportions, but I believe we have a solution flexible enough to cover any potential partner logo we may have in the future. Once we have the final logos and texts, it's just replacing the proper <img> tags and texts. And of course, it's also possible to have more or less than 6 partners by simply duplicating/removing code.

For reference, this is the code for a single partner block:

<article" class="cf post-285 project type-project status-publish format-standard has-post-thumbnail hentry">
    <section class="image-section entry-content cf">
        <img class="alignleft size-medium" width="200" height="100" src="http://via.placeholder.com/200x100" alt="200x100" />
    </section>
    <header class="article-header">
        <h1 class="h2 entry-title"><a title="" href="http://www.aifdr.org/" target="_blank" rel="bookmark noopener">AIFDR</a></h1>
    </header>
    <section class="entry-content cf">The Australia-Indonesia Facility for Disaster Reduction (AIFDR) is a joint initiative between the governments of Australia and Indonesia through the Indonesia’s Disaster Management Agency (BNPB) to strengthen Indonesia’s ability to reduce the impact of disasters. AIFDR works in close partnership with the Government of Indonesia’s science, technology and disaster management agencies to build national capacity for risk and vulnerability modeling, research and innovation. Since 2010, AIFDR has been a key partner of the World Bank and GFDRR in the development of the InaSafe program, including advocacy and capacity building to apply open source technology and open data to the challenges of disaster risk management. They have also demonstrated leadership in fostering the growth of the OpenStreetMap community in Indonesia.</section>
    <footer class="article-footer cf"><p class="byline entry-meta vcard"></p></footer>
</article>

@vdeparday please let us know if you believe we have the right solution, or if we need to do any additional changes here

Thanks