Featured Image Plugin


(Emanuelet) #1

This plugin fetches the first image of the topic and sets it as the featured image, showing in the topic list and above the main topic.

Repo: GitHub - startsat60/discourse-plugin-featured-image: Add a featured image to the post

Features:

  • Automatic setting of the image
  • Included styling for topic list

Ideas for future developments:

  • Settings to change image dimension or position
  • Captions?

Screenshots:



(Sam Saffron) #2

hmm how is this any different to?


(Rafael dos Santos Silva) #3

(Pad Pors) #4

possible ideas for upgrade:

is it possible that the thumbnail image get truncated rather than resized, in the main page? then as one goes on it, it becomes click-able and after click, the whole image (not cropped) being shown. this way one can keep the aspect ratio of all the images similar, and the main page looks better.


(Marco) #5

This plugin reads an image even after writing before text?

Example:

“Text
-image-”


(Emanuelet) #7

beside the magnification part, it’s currently doing that via CSS so it’s easily overridable with something of your liking.
Right now is set to object-fit: cover; so is already cropping.


(Emanuelet) #8

Yes it does. Fundamentally it gets the first image that is uploaded


(Pad Pors) #9

is it possible to have a default image which is set to default for those posts that doesn’t have images?

otherwise those posts will make the design little bit unhappy.


(Emanuelet) #10

I was thinking about this problem the other day.
There are several ways to deal with this issue, putting a default image, setting a color instead of the image or not having the white space.

Ideally I will like to solve it with CSS so that who manage a website can make the decision of how to handle it.

I will investigate more into it.


(Pad Pors) #11

great :slight_smile:

if one can put an image from the assets of site design for the empty posts, then he/she can decides what the image would be, and empty colored box or an image.


(Marcos P) #12

how to increase width of image? Thanks!


(Emanuelet) #13

you should be able to do it simply with CSS


(Marcos P) #14

i try:

img.list-item-featured-image {
    width: 80px;
    height: 60px;  
}

but no working!

http://vidaoverwatch.com/c/historias-e-lores-de-herois

what should I change? @emanuelet


(Emanuelet) #15

In the link that you passed I don’t see any of the classes from my plugin.
I’m assuming that you’re using the Topic List Previews plugin.

Anyway regarding the CSS, what I would do is check with Chrome Dev Tools where your overrides are sitting in the order of priority.
Than to be sure that it uses what you defined you can apply !important to the properties.


(Marcos P) #16

I’m testing the two plugins, the topic list previews bug my categories search, I not know why, I’ll reinstall your plugin to insert the !important and try again! Thx!

@emanuelet after installing plugin disappeared the category names in the header, and my youtube videos no longer appear!

error:


Error: Could not find module `discourse/views/topic-list-item` imported from `discourse/plugins/discourse-plugin-featured-image/discourse/initializers/featured`
Url: http://vidaoverwatch.com/assets/vendor-71525d73f4838f8f7cfb5b248aae2a3783728d582e0b4aca782307f94f470c45.js
Line: 1
Column: 16233
Window Location: http://vidaoverwatch.com/c/historias-e-lores-de-herois
Backtrace

o@http://vidaoverwatch.com/assets/vendor-71525d73f4838f8f7cfb5b248aae2a3783728d582e0b4aca782307f94f470c45.js:1:16233
i@http://vidaoverwatch.com/assets/vendor-71525d73f4838f8f7cfb5b248aae2a3783728d582e0b4aca782307f94f470c45.js:1:16158
requireModule/<@http://vidaoverwatch.com/assets/vendor-71525d73f4838f8f7cfb5b248aae2a3783728d582e0b4aca782307f94f470c45.js:1:17301
e@http://vidaoverwatch.com/assets/vendor-71525d73f4838f8f7cfb5b248aae2a3783728d582e0b4aca782307f94f470c45.js:1:15617
requireModule@http://vidaoverwatch.com/assets/vendor-71525d73f4838f8f7cfb5b248aae2a3783728d582e0b4aca782307f94f470c45.js:1:17286
window.Discourse<.start/<@http://vidaoverwatch.com/assets/application-6a1e9f52a48fecae35269cb2ec79e63888d4a055c679dc654dd2f8059c135faa.js:1:3894
window.Discourse<.start@http://vidaoverwatch.com/assets/application-6a1e9f52a48fecae35269cb2ec79e63888d4a055c679dc654dd2f8059c135faa.js:1:3804
@http://vidaoverwatch.com/c/historias-e-lores-de-herois:316:3
Env

hostname	ip-172-31-24-149-app
process_id	138
application_version	4cd19ee26eddb5c2432763421af37d46056e522a
HTTP_HOST	vidaoverwatch.com
REQUEST_URI	/logs/report_js_error
REQUEST_METHOD	POST
HTTP_USER_AGENT	Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:47.0) Gecko/20100101 Firefox/47.0
HTTP_ACCEPT	*/*
HTTP_REFERER	http://vidaoverwatch.com/c/historias-e-lores-de-herois
HTTP_X_FORWARDED_FOR	213.27.190.210, 188.114.111.5
HTTP_X_REAL_IP	188.114.111.5
params	
message	Error: Could not find module `discourse/views/topic-list-item` imported from `discourse/plugins/disco
url	http://vidaoverwatch.com/assets/vendor-71525d73f4838f8f7cfb5b248aae2a3783728d582e0b4aca782307f94f470c
line	1
column	16233
window_location	http://vidaoverwatch.com/c/historias-e-lores-de-herois
stacktrace	o@http://vidaoverwatch.com/assets/vendor-71525d73f4838f8f7cfb5b248aae2a3783728d582e0b4aca782307f94f47


(Sora &\) #17

Not working, @angus
it only show space not image title
Help me!


(Sora &\) #18


(Angus McLeod) #19

This is not my plugin :slight_smile:

You may want to try:


(Sora &\) #20

@angus Review help me!

Here is my page, i installed your plugin but not working too?


(Sora &\) #21

it isn’t show image feature :frowning: