Request to change the template of map catalogue and grid layout for widgets

[Huyeng]

ODC prefers to use the template that show the caption below the Thumbnail above.
During the Focus group discussion, there was a comment related to using the image as the opacity background that is not attractive and hard to view.

Note that the map catalogue and topics currently use the same layout, and this should be kept consistant. The intention of this discussion is to find a layout that works well for both.

[acorbi]

ok, @Huyeng. Thanks for raising this. I am going to prepare an structured way for all of us to find a layout that works and is integrated in the overall look-and-feel of the site. Expect this to be solved by next week...

On 02.09.2016 04:51, Huyeng wrote:

ODC prefers to use the template that show the caption below the
Thumbnail above.
During the Focus group discussion, there was a comment related to using
the image as the opacity background that is not attractive and hard to
view.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#359, or
mute the thread
https://github.com/notifications/unsubscribe-auth/AAXffp0YfCr3K821fFkuLbAeqd7w5o8kks5ql480gaJpZM4JzUfs.

[acorbi]

@Huyeng I would like to suggest to implement something like the Steve version on http://tympanus.net/Development/HoverEffectIdeas/index2.html

The idea would be to have a white background behind the title (and possibly also behind the metadata), the opacity of the image will then be kept to 100% so the images (maps in case of the map catalogue) are fully visible.

Another idea would be to add some more interaction when the user hovers over the element, we could program the widgets to provide different configuration options such as:

on hover:

• show description
• hide title
  ...

@DBishton @yanoak @DoLinh any ideas?

[yanoak]

@acorbi agreed. The bright photos look much better than the dark ones. Description on hover looks like a good way to go about it. But how about on mobile where hover doesn't work? Maybe one tap to show description and another tap to go to the link? Is that possible to implement?

[acorbi]

@yanoak good point. I would just code the widget to not provide that interaction while on mobile. On mobile, the widgets would not show the description anyways since the boxes are probably too small...

[acorbi]

looping in @DragonVirus, @S-mardii and @ChandaraKhun on this as well

[yanoak]

@acorbi ah I see. Ok that works.

[DoLinh]

support your suggestion, @acorbi https://github.com/acorbi . I suppose
not a description but quick options of the items inside the page so that
user can choose either to go to the page or directly to the item.

On Wed, Oct 5, 2016 at 8:33 PM, Yan Naung Oak [email protected]
wrote:

@acorbi https://github.com/acorbi ah I see. Ok that works.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#359 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQ2UDTeD3QBKxcamt1OODTWKNIKjXuvWks5qw6cRgaJpZM4JzUfs
.

---

This communication, together with any attachment, may contain confidential
information and/or copyright material and is intended only for the
person(s) to whom it is addressed. If you are not the intended recipient of
this communication, or if you received it in error, you are asked to kindly
delete it and promptly notify us. Any review, copying, use, disclosure or
distribution of any part of this communication, unless duly authorized by
or on behalf of PanNature http://www.nature.org.vn, is strictly
forbidden.

[prustar]

@Huyeng @acorbi -- I previously raised another issue about this way back earlier in the year where has that issue gone???

I don't care what we do as long as those black boxes disappear! They are extremely unattractive and not user friendly, particularly for printing and sharing with others. I don't support any option for hover or otherwise, simply removal and present the image as is, add the text around it in anyway you see fit.

[prustar]

@acorbi -- regarding steve's version could you please mock up a few different ways to present the text as some text strings are long such as "Environment and Natural Resources" and if we are also going to present the time stamp then it might obscure the image.

1. The same example you have presented but without the boarder
2. The text on the bottom and top over the image (title and time stamp).
3. The text on the bottom only over the image (both title and time stamp).
4. The text at the bottom of the image not over.
5. The text at the top of the image not over.

If we could see a page of all the same styles in a cluster as we would if we went to that page that would be helpful for people to visualise and make a choice on their favourite.

[acorbi]

Ok will do

[acorbi]

Hi @OpenDevelopmentMekong/tech @OpenDevelopmentMekong/editorial @OpenDevelopmentMekong/data @jpeizer1

I have prototyped 3 proposals, please indicate which one is your preferred:

Option A: Semi-transparent bright background on title and post meta

Option B: Non-transparent background with "box glow" on both title and post meta

Option C: Non-transparent background with "box glow" only on title

[gimmemochi]

I prefer option A. Thanks, Alex.

[jpeizer1]

Honestly I like A & C -- I prefer C for the background with "box glow" only on title but would prefer if the Title background was semi-transparent as in A -- this particularly helps with long titles so the whole image isn't blocked out.

[prustar]

@acorbi - you didn't mock up options 4 & 5 which I suggested?

The boxes are small and the text covers most of the images which I don't think is attractive; except for LAND because this string is small. I tried to find the previous issue I raised on this again but could not. It had in it other examples and styles that suggested enhancements to the shading and alternatively placement of the text beneath the image.

See bbc.com as an example of both where they use shade effects along with text placements over and under the images:

[jpeizer1]

@Corbi I prefer BBC white lettering in box to save space but I assume they select images to insure dark background against white lettering. Prefer this to dark letters on white box effect.

[acorbi]

@jpeizer1 yes, I guess they test the images first before they go live to check if they fit well. that is something that we could also integrate on the editorial processes although it might make the publishing process a bit more time consuming...

another idea would be to darken the background behind the text so it is more readable. I will do a test on PP and share some screenshots for everyone to comment on

[jpeizer1]

@acorbi -- you could also do a drop shadowing of the white letters if possible so as not t have a boxy background look: https://www.youtube.com/watch?v=W5thsPPoiyU

[prustar]

@acorbi @jpeizer1 -- I don't think they are selecting the photos specifically to fit the text, I think the shade affect helps them to darken the bottom of the image but still allowing a central transparent line to illuminate the colour of the image. I took the screen shot specifically prior to the page loading so that you could see the tinting shade and pattern they use in both examples.

[Huyeng]

@acorbi, all the proposed options above are looking fine, however, I'm afraid that those styling may not look good on the map catalogue that have different colors, white background and small texts.
I would like to suggest to use the map catalogue and topic page/profile page for design.

[jpeizer1]

@acorbi @prustar Agree with Pyrou the shading filter over the image is what allows the clear text. The none-loaded images showing only the filter layer (above to the far right opposite the Sec of State Kerry photo) demonstrate this. Any image could be loaded under that layer for the same effect. In fact, that's a pretty cool effect to copy ;-)