mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-31 17:17:46 +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"
|
||||
],
|
||||
"dependencies": {
|
||||
"exif-js": "^2.3.0",
|
||||
"gatsby": "^2.0.0-rc.13",
|
||||
"gatsby-awesome-pagination": "^0.1.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 PostMeta from '../components/molecules/PostMeta'
|
||||
import PostActions from '../components/atoms/PostActions'
|
||||
import Exif from '../components/atoms/Exif'
|
||||
import styles from './Post.module.scss'
|
||||
|
||||
const Post = ({ data, location }) => {
|
||||
@ -31,6 +32,10 @@ const Post = ({ data, location }) => {
|
||||
</figure>
|
||||
)}
|
||||
|
||||
{type === 'photo' && (
|
||||
<Exif image={image.childImageSharp.original.src} />
|
||||
)}
|
||||
|
||||
<PostContent post={post} />
|
||||
|
||||
<PostActions slug={post.fields.slug} url={meta.url} />
|
||||
@ -67,6 +72,9 @@ export const pageQuery = graphql`
|
||||
image {
|
||||
childImageSharp {
|
||||
...ImageFluid
|
||||
original {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
author
|
||||
|
||||
Loading…
Reference in New Issue
Block a user