search

devinit / DIwebsite-redesign

New DI website 2019
1 stars 1 forks source link

Captions for all images #24

Closed k8hughes closed 4 years ago

k8hughes commented 5 years ago

So, where we have:

We'll need an image credit. I've included this in the sketches now, and it would be a link of text which can have a link. To do,Visual design,move-to-github

alice-mcandrew-development-initatives commented 5 years ago

@k8hughes Were there ever any plans for a caption line (beyond photo credit) for images? E.g. here (http://159.65.56.142/what-we-do/our-focus-areas/improving-understanding-humanitarian-assistance/) there is no option to add a caption line, so you have to use paragraph block, which looks clunky. Would it be difficult to add something similar to what we have for infographics (where you can add a caption for notes/sources below the image)?

k8hughes commented 5 years ago

@benjamincoleman this is a question for you not me I think!!!

BenDarby commented 5 years ago

@k8hughes @alice-mcandrew-development-initatives we have a styles in place for captions on images, you can see examples in the publication single template on the pattern library: http://development-initiatives.surge.sh/page-templates/14-1-publication-long-form

benjamincoleman commented 5 years ago

@k8hughes @alice-mcandrew-development-initatives in this case the streamfield would need updating to change the markup to use the HTML <figure> element that supports <figcaption.

Current HTML is:

<div class="media-figure">
    <img alt="inline image" height="500" src="/media/images/Angus-Urquhart-ECOSOC-June-2019.2e16d0ba.fill-800x500.jpg" width="800">
</div>

The FigCaption HTML is: 

<figure class="media-figure">
    <img alt="inline image" height="500" src="/media/images/Angus-Urquhart-ECOSOC-June-2019.2e16d0ba.fill-800x500.jpg" width="800">
    <figcaption class="media-figure__caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</figcaption>
</figure>
k8hughes commented 5 years ago

Ok so this is one for the developers...

akmiller01 commented 5 years ago

Image captions added here: https://github.com/devinit/DIwebsite-redesign/pull/353

riahasler-DI commented 5 years ago

@benjamincoleman or @edwinmp we're still having some issues with the figure captions - the captions are sitting on the image rather than starting below, which is what I expected. On this page: http://159.65.56.142/what-we-do/our-focus-areas/strengthening-knowledge-humanitarian-assistance/ the image caption takes up too much space and doesn't look right.

Sorry for tagging both of you - I'm not too sure who was best to ask

benjamincoleman commented 5 years ago

Hi @riahasler-DI.

The design is as intended there, although it looks like it needs some spacing out between the image/caption and the blockquote underneath.

@BenDarby can we add some spacing to the top of the blockquote to prevent this please?

riahasler-DI commented 4 years ago

Hi @BenDarby were you able to add some spacing to blockquote?

BenDarby commented 4 years ago

@riahasler-DI I've added some more spacing to blockquote

k8hughes commented 4 years ago

@riahasler-DI please can you check the changes and close this issue if you are happy or add a comment if the problems are still not fixed.