Improve opengraph
This commit is contained in:
parent
8b63cd14bc
commit
fd1b03ee36
18
src/main.rs
18
src/main.rs
|
|
@ -84,6 +84,10 @@ struct Config {
|
|||
}
|
||||
|
||||
impl Config {
|
||||
fn domain(&self) -> Option<&str> {
|
||||
CONFIG.domain.domain()
|
||||
}
|
||||
|
||||
fn upstream_upload_url(&self) -> String {
|
||||
let mut url = self.upstream.clone();
|
||||
url.set_path("image/backgrounded");
|
||||
|
|
@ -267,6 +271,8 @@ impl Images {
|
|||
|
||||
#[derive(Debug, serde::Deserialize)]
|
||||
pub struct Details {
|
||||
height: usize,
|
||||
width: usize,
|
||||
content_type: String,
|
||||
}
|
||||
|
||||
|
|
@ -286,6 +292,14 @@ impl Image {
|
|||
self.details.content_type.starts_with("video")
|
||||
}
|
||||
|
||||
fn width(&self) -> usize {
|
||||
self.details.width
|
||||
}
|
||||
|
||||
fn height(&self) -> usize {
|
||||
self.details.height
|
||||
}
|
||||
|
||||
fn mime(&self) -> &str {
|
||||
&self.details.content_type
|
||||
}
|
||||
|
|
@ -630,7 +644,7 @@ async fn view_original(
|
|||
};
|
||||
|
||||
render(HttpResponse::Ok(), |cursor| {
|
||||
self::templates::view(cursor, image, None)
|
||||
self::templates::view(cursor, image, None, THUMBNAIL_SIZES.last())
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -661,7 +675,7 @@ async fn view(
|
|||
};
|
||||
|
||||
render(HttpResponse::Ok(), |cursor| {
|
||||
self::templates::view(cursor, image, Some(size))
|
||||
self::templates::view(cursor, image, Some(size), THUMBNAIL_SIZES.last())
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@use super::statics::{layout_css, favicon_ico};
|
||||
@use crate::CONFIG;
|
||||
|
||||
@(title: &str, description: Option<&str>, head: Content, body: Content)
|
||||
|
||||
|
|
@ -10,14 +11,23 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>@title</title>
|
||||
<link rel="stylesheet" href="@crate::statics(layout_css.name)" type="text/css" />
|
||||
<meta property="twitter:title" content="@title" />
|
||||
<meta property="og:title" content="@title" />
|
||||
@if let Some(description) = description {
|
||||
<meta property="og:description" content="@description" />
|
||||
|
||||
<meta property="og:site_name" content="pict-rs" />
|
||||
@if let Some(desc) = description {
|
||||
<meta property="description" content="@desc" />
|
||||
<meta property="og:description" content="@desc" />
|
||||
<meta property="twitter:description" content="@desc" />
|
||||
} else {
|
||||
<meta property="description" content="Upload and share image files" />
|
||||
<meta property="og:description" content="Upload and share image files" />
|
||||
<meta property="twitter:description" content="Upload and share image files" />
|
||||
}
|
||||
<meta property="og:type" content="website" />
|
||||
@if let Some(domain) = CONFIG.domain() {
|
||||
<meta property="twitter:domain" content="@domain" />
|
||||
}
|
||||
<link rel="stylesheet" href="@crate::statics(layout_css.name)" type="text/css" />
|
||||
<link rel="shortcut icon" type="image/png" href="@crate::statics(favicon_ico.name)">
|
||||
@:head()
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,36 @@
|
|||
@(image: Image, sizes: &[u64])
|
||||
|
||||
@:layout_html("Thumbnails", Some(&format!("Thumbnails for {}", image.filename())), {
|
||||
<meta property="og:image" content="@image.link()" />
|
||||
<meta property="og:url" content="@image.link()" />
|
||||
@if image.is_video() {
|
||||
<meta property="og:video" content="@image.link()" />
|
||||
<meta property="og:video:width" content="@image.width()" />
|
||||
<meta property="og:video:height" content="@image.height()" />
|
||||
<meta property="og:type" content="video" />
|
||||
<meta property="twitter:card" content="player" />
|
||||
<meta property="twitter:player:width" content="@image.width()" />
|
||||
<meta property="twitter:player:height" content="@image.height()" />
|
||||
@if let Some(size) = sizes.last() {
|
||||
<meta property="og:image" content="@image.thumb(*size, FileType::Jpg)" />
|
||||
<meta property="og:image:secure_url" content="@image.thumb(*size, FileType::Jpg)" />
|
||||
<meta property="og:image:alt" content="Image: @image.filename()" />
|
||||
<meta property="og:image:type" content="image/jpg" />
|
||||
<meta property="twitter:image" content="@image.thumb(*size, FileType::Jpg)" />
|
||||
<meta property="twitter:image:alt" content="Image: @image.filename()" />
|
||||
}
|
||||
} else {
|
||||
<meta property="og:image" content="@image.link()" />
|
||||
<meta property="og:image:alt" content="Image: @image.filename()" />
|
||||
<meta property="og:image:secure_url" content="@image.link()" />
|
||||
<meta property="og:image:type" content="@image.mime()" />
|
||||
<meta property="og:image:width" content="@image.width()" />
|
||||
<meta property="og:image:height" content="@image.height()" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:image" content="@image.link()" />
|
||||
<meta property="twitter:image:alt" content="Image: @image.filename()" />
|
||||
}
|
||||
<meta property="og:url" content="@image.link()" />
|
||||
<meta property="twitter:url" content="@image.link()" />
|
||||
<link rel="stylesheet" href="@crate::statics(images_css.name)" type="text/css" />
|
||||
}, {
|
||||
<section>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,74 @@
|
|||
@use super::{layout_html, return_home_html, statics::images_css};
|
||||
@use crate::{Image, FileType};
|
||||
|
||||
@(image: Image, size: Option<u64>)
|
||||
@(image: Image, size: Option<u64>, max_size: Option<&u64>)
|
||||
|
||||
@:layout_html(&format!("Image: {}", image.filename()), Some("An image hosted on pict-rs"), {
|
||||
<link rel="stylesheet" href="@crate::statics(images_css.name)" type="text/css" />
|
||||
@if let Some(size) = size {
|
||||
<meta property="og:image" content="@image.thumb(size, FileType::Jpg)" />
|
||||
<meta property="og:url" content="@image.view(Some(size))" />
|
||||
<meta property="og:image:type" content="image/jpg" />
|
||||
} else {
|
||||
<meta property="og:image" content="@image.link()" />
|
||||
<meta property="og:url" content="@image.view(None)" />
|
||||
}
|
||||
<meta property="og:image:alt" content="Image: @image.filename()" />
|
||||
}, {
|
||||
<section>
|
||||
<article>
|
||||
<div>
|
||||
@if let Some(size) = size {
|
||||
<picture>
|
||||
<source type="image/webp" srcset="@image.thumb(size, FileType::Webp)" />
|
||||
<img src="@image.thumb(size, FileType::Jpg)" alt="@image.filename()" title="@image.filename()" />
|
||||
</picture>
|
||||
<p><a href="@image.thumb(size, FileType::Jpg)">Direct Link</a></p>
|
||||
} else {
|
||||
@if image.is_video() {
|
||||
<video src="@image.link()" alt="@image.filename()" title="@image.filename()" type="@image.mime()" autoplay muted
|
||||
loop>
|
||||
</video>
|
||||
} else {
|
||||
<img src="@image.link()" alt="@image.filename()" title="@image.filename()" />
|
||||
}
|
||||
<p><a href="@image.link()">Direct Link</a></p>
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
@:return_home_html()
|
||||
</section>
|
||||
})
|
||||
@:layout_html(&format!("Image: {}", image.filename()), Some("An image hosted on pict-rs"), {
|
||||
@if let Some(size) = size {
|
||||
<meta property="og:image" content="@image.thumb(size, FileType::Jpg)" />
|
||||
<meta property="og:image:alt" content="Image: @image.filename()" />
|
||||
<meta property="og:image:type" content="image/jpg" />
|
||||
<meta property="og:url" content="@image.view(Some(size))" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:image" content="@image.thumb(size, FileType::Jpg)" />
|
||||
<meta property="twitter:image:alt" content="Image: @image.filename()" />
|
||||
<meta property="twitter:url" content="@image.thumb(size, FileType::Jpg)" />
|
||||
} else {
|
||||
@if image.is_video() {
|
||||
<meta property="og:video" content="@image.link()" />
|
||||
<meta property="og:video:width" content="@image.width()" />
|
||||
<meta property="og:video:height" content="@image.height()" />
|
||||
<meta property="og:type" content="video" />
|
||||
<meta property="twitter:card" content="player" />
|
||||
<meta property="twitter:player:width" content="@image.width()" />
|
||||
<meta property="twitter:player:height" content="@image.height()" />
|
||||
@if let Some(size) = max_size {
|
||||
<meta property="og:image" content="@image.thumb(*size, FileType::Jpg)" />
|
||||
<meta property="og:image:secure_url" content="@image.thumb(*size, FileType::Jpg)" />
|
||||
<meta property="og:image:alt" content="Image: @image.filename()" />
|
||||
<meta property="og:image:type" content="image/jpg" />
|
||||
<meta property="twitter:image" content="@image.thumb(*size, FileType::Jpg)" />
|
||||
<meta property="twitter:image:alt" content="Image: @image.filename()" />
|
||||
}
|
||||
} else {
|
||||
<meta property="og:image" content="@image.link()" />
|
||||
<meta property="og:image:alt" content="Image: @image.filename()" />
|
||||
<meta property="og:image:secure_url" content="@image.link()" />
|
||||
<meta property="og:image:type" content="@image.mime()" />
|
||||
<meta property="og:image:width" content="@image.width()" />
|
||||
<meta property="og:image:height" content="@image.height()" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:image" content="@image.link()" />
|
||||
<meta property="twitter:image:alt" content="Image: @image.filename()" />
|
||||
}
|
||||
<meta property="og:url" content="@image.link()" />
|
||||
<meta property="twitter:url" content="@image.link()" />
|
||||
}
|
||||
<link rel="stylesheet" href="@crate::statics(images_css.name)" type="text/css" />
|
||||
}, {
|
||||
<section>
|
||||
<article>
|
||||
<div>
|
||||
@if let Some(size) = size {
|
||||
<picture>
|
||||
<source type="image/webp" srcset="@image.thumb(size, FileType::Webp)" />
|
||||
<img src="@image.thumb(size, FileType::Jpg)" alt="@image.filename()" title="@image.filename()" />
|
||||
</picture>
|
||||
<p><a href="@image.thumb(size, FileType::Jpg)">Direct Link</a></p>
|
||||
} else {
|
||||
@if image.is_video() {
|
||||
<video src="@image.link()" alt="@image.filename()" title="@image.filename()" type="@image.mime()" autoplay
|
||||
muted loop>
|
||||
</video>
|
||||
} else {
|
||||
<img src="@image.link()" alt="@image.filename()" title="@image.filename()" />
|
||||
}
|
||||
<p><a href="@image.link()">Direct Link</a></p>
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
@:return_home_html()
|
||||
</section>
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue