mirror of
https://github.com/kremalicious/blog.git
synced 2025-01-03 18:35:07 +01:00
first try at exif data
This commit is contained in:
parent
a19a603923
commit
970b18995c
GPG Key ID:
606EEEF3C479A91F
@ -1,29 +0,0 @@
|
|||||||
---
|
|
||||||
layout: base
|
|
||||||
---
|
|
||||||
|
|
||||||
<section role="main" id="main">
|
|
||||||
|
|
||||||
{% if page.type == 'category' %}
|
|
||||||
<h1 class="page-title">{{ page.title }}</h1>
|
|
||||||
{% elsif page.type == 'tag' %}
|
|
||||||
<h1 class="page-title"><span class="hash">#</span>{{ page.title }}</h1>
|
|
||||||
{% else %}
|
|
||||||
<h1 class="page-title">{{ page.type }} archive for {{ page.title }}</h1>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if page.path contains "photos" %}<div class="grid grid--gutters grid--half grid-medium--third">{% endif %}
|
|
||||||
{% for post in page.posts %}
|
|
||||||
|
|
||||||
{% if post.layout == "photo" %}
|
|
||||||
{% include photos.html %}
|
|
||||||
{% else %}
|
|
||||||
{% include articles.html %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% endfor %}
|
|
||||||
{% if page.path contains "photos" %}</div>{% endif %}
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% include paginator.html %}
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
|
|
||||||
{% include head.html %}
|
|
||||||
|
|
||||||
{% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %}
|
|
||||||
|
|
||||||
<body class="page-{{ id | remove:'-' }} site">
|
|
||||||
|
|
||||||
{% include header.html %}
|
|
||||||
|
|
||||||
<section role="document" class="site__document">
|
|
||||||
<div class="site__content">
|
|
||||||
<div class="container">
|
|
||||||
{{ content }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
{% include footer.html %}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
---
|
|
||||||
layout: base
|
|
||||||
---
|
|
||||||
|
|
||||||
<section role="main" id="main" class="page-single">
|
|
||||||
|
|
||||||
<article class="hentry format-link">
|
|
||||||
<header>
|
|
||||||
<h1 class="entry-title">
|
|
||||||
<a href="{{ page.linkurl }}" title="Go to source: {{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
|
|
||||||
{{ page.title | titlecase }}
|
|
||||||
<svg class="icon icon-forward">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#forward"></use>
|
|
||||||
</svg>
|
|
||||||
<span class="linkurl">{{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
|
|
||||||
</a>
|
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<section class="entry-content">
|
|
||||||
{{ content }}
|
|
||||||
<p>
|
|
||||||
<a class="more-link" href="{{ page.linkurl }}">Go to source
|
|
||||||
<svg class="icon icon-forward">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#forward"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a class="permalink-link" href="{{ page.url }}" rel="tooltip" title="Permalink">
|
|
||||||
<svg class="icon icon-infinity">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#infinity"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% include entry_meta.html %}
|
|
||||||
|
|
||||||
</article>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
---
|
|
||||||
layout: base
|
|
||||||
---
|
|
||||||
|
|
||||||
<section role="main" id="main" class="page-single">
|
|
||||||
|
|
||||||
<article class="hentry format-page">
|
|
||||||
<header>
|
|
||||||
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<section class="entry-content">
|
|
||||||
{% if page.image %}
|
|
||||||
{% include picture.html %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{{ content }}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</article>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
---
|
|
||||||
layout: base
|
|
||||||
|
|
||||||
js: photos.min.js
|
|
||||||
---
|
|
||||||
|
|
||||||
<section role="main" id="main" class="page-single">
|
|
||||||
|
|
||||||
<article class="hentry format-photo">
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<h1 class="entry-title fn">{{ page.title | titlecase }}</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<figure class="hentry__teaser hmedia">
|
|
||||||
|
|
||||||
{% include picture.html %}
|
|
||||||
|
|
||||||
<aside class="exif">
|
|
||||||
<div class="container">
|
|
||||||
<span class="exif__model" title="Camera model"></span>
|
|
||||||
<span class="exif__aperture" title="Aperture"></span>
|
|
||||||
<span class="exif__shutterspeed" title="Shutter speed"></span>
|
|
||||||
<span class="exif__exposure" title="Exposure"></span>
|
|
||||||
<span class="exif__iso" title="ISO"></span>
|
|
||||||
<span class="exif__focallength" title="Focal length"></span>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<section class="entry-content">
|
|
||||||
{{ content }}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% include entry_meta.html %}
|
|
||||||
|
|
||||||
{% include relatedphotos.html %}
|
|
||||||
|
|
||||||
</article>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
---
|
|
||||||
layout: base
|
|
||||||
---
|
|
||||||
|
|
||||||
<section role="main" id="main" class="page-single">
|
|
||||||
|
|
||||||
<article class="hentry format-post">
|
|
||||||
<header class="entry-header">
|
|
||||||
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
|
|
||||||
<div class="entry-lead">
|
|
||||||
{{ page.excerpt }}
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<section class="entry-content">
|
|
||||||
{% if page.image %}
|
|
||||||
<figure class="hentry__teaser">
|
|
||||||
{% include picture.html %}
|
|
||||||
</figure>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{{ content | remove: page.excerpt }}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% include actions.html %}
|
|
||||||
|
|
||||||
{% include entry_meta.html %}
|
|
||||||
|
|
||||||
{% include relatedposts.html %}
|
|
||||||
|
|
||||||
</article>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
@ -22,6 +22,7 @@
|
|||||||
"last 3 versions"
|
"last 3 versions"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"exif-js": "^2.3.0",
|
||||||
"gatsby": "^2.0.0-rc.13",
|
"gatsby": "^2.0.0-rc.13",
|
||||||
"gatsby-awesome-pagination": "^0.1.1",
|
"gatsby-awesome-pagination": "^0.1.1",
|
||||||
"gatsby-image": "^2.0.0-rc.1",
|
"gatsby-image": "^2.0.0-rc.1",
|
||||||
|
|||||||
65
src/components/atoms/Exif.jsx
Normal file
65
src/components/atoms/Exif.jsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import React, { PureComponent } from 'react'
|
||||||
|
import EXIF from 'exif-js'
|
||||||
|
import styles from './Exif.module.scss'
|
||||||
|
|
||||||
|
export default class Exif extends PureComponent {
|
||||||
|
state = {
|
||||||
|
modelvalue: null,
|
||||||
|
shutterspeedvalue: null,
|
||||||
|
aperturevalue: null,
|
||||||
|
exposurevalue: null,
|
||||||
|
isovalue: null,
|
||||||
|
focallengthvalue: null
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.getExif(this.props.image)
|
||||||
|
}
|
||||||
|
|
||||||
|
getExif = image => {
|
||||||
|
EXIF.getData(image, function() {
|
||||||
|
// Get individual data
|
||||||
|
const modelvalue = EXIF.getTag(this, 'Model')
|
||||||
|
const shutterspeedvalue = EXIF.getTag(this, 'ExposureTime')
|
||||||
|
const aperturevalue = EXIF.getTag(this, 'FNumber')
|
||||||
|
const exposurevalue = EXIF.getTag(this, 'ExposureBias')
|
||||||
|
const isovalue = EXIF.getTag(this, 'ISOSpeedRatings')
|
||||||
|
const focallengthvalue = EXIF.getTag(this, 'FocalLength')
|
||||||
|
|
||||||
|
console.log(modelvalue)
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
modelvalue,
|
||||||
|
shutterspeedvalue,
|
||||||
|
aperturevalue,
|
||||||
|
exposurevalue,
|
||||||
|
isovalue,
|
||||||
|
focallengthvalue
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
modelvalue,
|
||||||
|
shutterspeedvalue,
|
||||||
|
aperturevalue,
|
||||||
|
exposurevalue,
|
||||||
|
isovalue,
|
||||||
|
focallengthvalue
|
||||||
|
} = this.state
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className="exif">
|
||||||
|
<span className="exif__model" title="Camera model">
|
||||||
|
{modelvalue}
|
||||||
|
</span>
|
||||||
|
<span className="exif__aperture" title="Aperture" />
|
||||||
|
<span className="exif__shutterspeed" title="Shutter speed" />
|
||||||
|
<span className="exif__exposure" title="Exposure" />
|
||||||
|
<span className="exif__iso" title="ISO" />
|
||||||
|
<span className="exif__focallength" title="Focal length" />
|
||||||
|
</aside>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
0
src/components/atoms/Exif.module.scss
Normal file
0
src/components/atoms/Exif.module.scss
Normal file
@ -9,6 +9,7 @@ import PostLead from '../components/atoms/PostLead'
|
|||||||
import PostContent from '../components/atoms/PostContent'
|
import PostContent from '../components/atoms/PostContent'
|
||||||
import PostMeta from '../components/molecules/PostMeta'
|
import PostMeta from '../components/molecules/PostMeta'
|
||||||
import PostActions from '../components/atoms/PostActions'
|
import PostActions from '../components/atoms/PostActions'
|
||||||
|
import Exif from '../components/atoms/Exif'
|
||||||
import styles from './Post.module.scss'
|
import styles from './Post.module.scss'
|
||||||
|
|
||||||
const Post = ({ data, location }) => {
|
const Post = ({ data, location }) => {
|
||||||
@ -31,6 +32,10 @@ const Post = ({ data, location }) => {
|
|||||||
</figure>
|
</figure>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{type === 'photo' && (
|
||||||
|
<Exif image={image.childImageSharp.original.src} />
|
||||||
|
)}
|
||||||
|
|
||||||
<PostContent post={post} />
|
<PostContent post={post} />
|
||||||
|
|
||||||
<PostActions slug={post.fields.slug} url={meta.url} />
|
<PostActions slug={post.fields.slug} url={meta.url} />
|
||||||
@ -67,6 +72,9 @@ export const pageQuery = graphql`
|
|||||||
image {
|
image {
|
||||||
childImageSharp {
|
childImageSharp {
|
||||||
...ImageFluid
|
...ImageFluid
|
||||||
|
original {
|
||||||
|
src
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
author
|
author
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user