I've setup a blog using octobercms and the plugin rainlab blog. The problem now is that I want to use the featured image as the facebook sharing image.
How can this be done? When I go to the Facebook Debugger, I can see the logo and my featured image, but once I share it, the display image is the logo.
Many thanks
In the page/layout you are using for your blog post, you will need to add the OpenGraph tags if you haven't already.
<meta property="og:url" content="http://www.yourwebsite.com" />
<meta property="og:type" content="website" />
<meta property="og:image" content="{{ this.getShareImageUrl }}" />
<meta property="og:title" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod" />
<meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati modi illo explicabo quidem ipsa, voluptatum quibusdam, nemo veritatis enim eveniet doloribus et eius voluptate nam cum veniam, fugit. Dolorum, adipisci." />
Facebook needs these tags to pull the right data. You might find this useful to read more about these tags.
So all you should need now would be the url for the correct featured_image since you most likely have more than one featured_image. You can choose to write that logic however you want (hence I just used a method call in the code above), but once you have the instance of the featured_image you want, you can use the getPath() method on the instance to get the url (since it is an instance of the File class, you can use those methods on it).
You can read further documentation here - http://octobercms.com/docs/database/model#file-attachments
That's it, go back to FB debugger and press debug. If it doesn't work, try using the other button which says 'Fetch new scrape information' (only appears after you have pressed the debug button once already) and you should be good.
I just went thru these steps for a new website and I had to let facebook re-scrape to get it to work. Let us know if this works for you.
This might be late but I had the same issue and used this code to pass the image from your blogpost page to the layout file:-
function onEnd() {
$_post = $this->components['blogPost'];
if ($_post->featured_images->first()) {
$this->page->og_image = $_post->featured_images->first()->path;
}
}
Which will allow you to use this markup in your layout file (with your <head> in):-
{% if this.page.og_image %}
<meta property="og:image" content="{{ this.page.og_image }}" />
{% else %}
Related
The truncatechars and safe filters work the way I want the problem is the image shows up too in my descriptions and I don't want images to show up like they do in this image. https://i.imgur.com/KjcX5NQ.png
{% for post in post_entries %}
<div class="post-preview">
<h3 class="post-subtitle">{{ post.post_text|truncatechars:125|safe }}</h3>
</div>
{% endfor %}
<h3 class="post-subtitle"><p><img alt="" src="./Journal_files/1555448282201.jpg" style="float:right; height:155px; width:55px">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrup…</p></h3>
</a>
You have to remove the <img> tags (and possibly quite a few others) from your post.post_text before rendering it. FWIW, applying the truncatechars and safe filters in succession to an HTML snippet is a very bad idea, as you can (and will) end up with unclosed tags, breaking your own template's markup.
Django provides a striptags filter too, but the offical recommandation here is to use bleach:
Note that striptags doesn’t give any guarantee about its output being
HTML safe, particularly with non valid HTML input. So NEVER apply the
safe filter to a striptags output. If you are looking for something
more robust, you can use the bleach Python library, notably its clean
method.
I am building a blog with flask-flatpages. In the header of a markdown blogpost, I list the related blogpostings by filename. These should show up as excerpts below the actual blogposting.
Here is what blogpost-1.md should look like:
title: "Blogpost one"
published: 2014-02-13
related:
- blogpost-2.md
- blogpost-4.md
description: "This is the excerpt of blogpost one."
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
vel leo turpis. Cras vulputate mattis dignissim. Aliquam eget
purus purus.
And the result I want:
BLOGPOST ONE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel
leo turpis. Cras vulputate mattis dignissim. Aliquam eget purus purus.
related posts:
BLOGPOST TWO
Summary here
BLOGPOST THREE
Also a summary
The essential part is to follow the path of the related blogpostings and render their title and excepts. Naively something like:
{% for item in blog.meta.related %}
<div>
<h4>{{ item.title }}</h4>
<p>{{ item.decription</p>
</div>
{% endfor %}
This is obviously not going to work, because meta.related is simply a list of strings. It is also not difficult to make a view function that takes these strings and returns a httpResponse:
# app.py
#app.route('/excerpt/<path:path>.html')
def excerpt(path):
blog = blogs.get_or_404(path)
return render_template('excerpt.html', blog=blog)
# excerpt.html
<div>
<h4>{{ blog.meta.title }}</h4>
<p>{{ blog.meta.description }}</p>
</div>
My question: how do I make this happen within the same template?
Should I somehow try to pass the data from the related blogpostings into the context: a list of dicts maybe? Should I use a context processor to achieve this?
Hei Roy, thanks for you research but for the moment i cannot comment so i have to find a way to clarify this.
In order to make this working, in the markdown file you wrote:
title: "Blogpost one"
published: 2014-02-13
related:
- blogpost-2.md
- blogpost-4.md
description: "This is the excerpt of blogpost one."
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
vel leo turpis. Cras vulputate mattis dignissim. Aliquam eget
purus purus.
Need to be change blogpost-2.md and blogpost-4.md without the .md extension.
Without these changes when you loop on the view file:
for path in blog.meta['related']:
related_list.append(blogs.get_or_404(path))
blogpost-1/2.md will not be added to your list because Flask-FlatPages will not understand .md extension and 404 error comes up.
In my case
#app.route('/blog/<path:path>.html')
is changed without .html like :
#site.route('/bloging/<path:path>/')
And to simplify some coding, in template
{{ related.meta.title }}
is equivalent to
{{ related.title }}
and you could add the link to your related article with:
{{ related.title }}
where site is my blueprint.
I arrived at a pretty straightforward answer, but keeping the question open to see if there is a more elegant solution.
In the view function, I iterate the paths of the related blog postings and add the blog objects to a list, which gets passed to the template.
Like this:
#app.route('/blog/<path:path>.html')
def blog_detail(path):
blog = blogs.get_or_404(path)
related_list = []
for path in blog.meta['related']:
related_list.append(blogs.get_or_404(path))
return render_template('blog-detail.html', blog=blog, related_list=related_list)
And in the template:
{% for related in related_list %}
hoi
<div>
<h4>{{ related.meta.title }}</h4>
<p>{{ related.meta.description }}</p>
</div>
{% endfor %}
I have html content which look like this:
html code ... </div>content1</div> html code ...
html code ... </div>content2</div> html code ...
and I would like to extract the content1/2/3... from the HTML as content1 new line content2 new line content3 any idea ? Thanks in advance.
Here's an example using Mojo::DOM, inspired by this StackOverflow answer:
#!/usr/bin/env perl
use strict ;
use warnings ;
use Mojo::DOM ;
my $html = <<EOHTML;
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML with 2 divs</title>
</head>
<body>
<div>
Four score and seven years ago our fathers brought forth on this
continent a new nation, conceived in liberty, and dedicated to the
proposition that all men are created equal.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>
EOHTML
my $dom = Mojo::DOM->new ;
$dom->parse( $html ) ;
for my $div ( $dom->find( 'div' )->each ) {
print $div->all_text . "\n" ;
}
The output is:
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How do I short an text in django? For example:
I have this text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
And I want to get:
Lorem ipsum dolor sit amet, consectetur adipisicing elit(more)
Where "(more)" is a link to show the entire text.
Can someone help me? Thank you very much in advance!
Have you tried the template tag truncatechars?
{{ value|truncatechars:[number to truncate chars after] }}
Check out how you'd handle the (more) part here:
If you actually wanted a link to persist and not just hover, you would probably want to use javascript to manipulate your DOM.
Make sure 15 (this is arbitrary) is greater than the number you're slicing by:
{% if value|length > 15 %}
{{ value|slice:"-6" }}(more)
{% else %}
{{ value }}
{% endif %}
I'm using the microdata system for some articles.
But I can't find some good ressources to know if the structure of my schema, for the author, is good or not.
"Article"'s shema allow to specify an "author", but how to indicate the informations (image, link, name) about this author ?
Actualy I use the following (fiddle):
<div itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Article title</h1>
<div itemprop="articleBody">
Lorem ipsum dolor sit amet...
</div>
<div itemprop="author" itemtype="http://schema.org/Person" class="author">
<a href="member-page.html" itemprop="url">
<img itemprop="image" src="http://pic.okisurf.com/member/none/xs/m.png"/>
<span itemprop="name">Author name</span>
</a>
</div>
</div>
Does this line is correct ?
<div itemprop="author" itemtype="http://schema.org/Person">
If it is not, any help or ressource link will be greatly appreciated.
It seems that to specify a new itemtype inside another, we need to specify another time the itemscope !
So this line will be correct :
<div itemscope="" itemprop="author" itemtype="http://schema.org/Person">
To make sure that the microdata are well formed, I suggest to use the Webmaster Tools richsnippets test