Make Cover image Easy Again

Browneyedsoul · August 12, 2021, 10:22am

I thought this thread could be hard for so called RemNote newbies.
So I made easier one.

Try these steps one by one.

↓ click!

1. Make CSS Template on Custom CSS

↓ CSS Code here. Copy and Paste

[data-document-tags*=""] #DocumentTopRow:before {
	content: "";
	display: block;
	height: 400px;
	margin-bottom: 10px;
	background-size: 100% 100%; 
	/** Change the background-size option to your cover image tastes.**
	➊ background-size: 100% 100%; ➞ Full responsive but the image can be ugly.
	➋ background-size: contain; ➞ Height fixed, Responsive to width but some margins can be made.
	➌ background-size: cover; ➞ I don't care about the cover image cropped.
	******************************************************************/
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("");
	background-color: ;
}

2. Adding image url, Naming the tag

3. Tagging to the Rem-title

4. Adjust `background-size` on your tastes

➊ background-size: 100% 100%; ➞ Full responsive but the image can be ugly.
➋ background-size: contain; ➞ Height fixed, Responsive to width but some margins can be made.
➌ background-size: cover; ➞ I don’t care about the cover image cropped.

Hope new revamped big update version could be more intuitive.

Hp_96 · July 28, 2022, 7:35pm

I still don’t get it. Could you please elaborate on the steps properly?

Browneyedsoul · July 29, 2022, 5:50am

Hi, @Hp_96

Kindly refer to the cover photo section in this page

Cheers!

Hp_96 · July 29, 2022, 6:40am

I did everything in the steps. But still don’t get the cover photo for the page. What would be the url link here? Should I import the photo and then copy that photo as rem link. or I can get the url from any web source?

Browneyedsoul · July 29, 2022, 7:04am

You have to paste the image url link here. The arrow pointing area. The safest way to conserve the cdn link as permanent is saving the image in the synced remnote KB and withdraw url from browser dev tool but wherever you go, the thing is you have to paste some image links over there. Try again if it doesn’t work, pls let me know again

I have a plan to build some automation tool to make this process far more easier than current state, so until then please use this way.

Hp_96 · July 29, 2022, 7:16am

sure definitely, I will try again. Actually, I have been following your css style which is great and I appreciate that. I wondering, will there be any push notification or email notification for the reminder with an API integration. if so, tell me how do I do it?

Browneyedsoul · July 29, 2022, 7:41am

Currently, only on the roadmap.

since it is definitely a essential feature, maybe the state would be changed if remnote team have some time to build reminder.

Thanks

JRY · July 29, 2022, 1:45pm

Hi. I have the same issue of not being able to add photo cover. I copied and pasted the url link at where you directed. Then copied the tag to the document page as well. But nothing happened

Browneyedsoul · July 30, 2022, 6:23am

Hey, @JRY, could you elaborate on your current situation with a simple captured image?

Thanks

Hp_96 · August 2, 2022, 9:32am

If you don’t mind, can you make a video of how to create a cover image? I still don’t get it

Browneyedsoul · August 3, 2022, 7:13am

I uploaded on the readme tutorial. check it again

Hp_96 · August 3, 2022, 8:52am

can you see, whenever I type in between the quote. My cursor automatically moving to the other side. It is also happening for other css also.

Yes, you have uploaded the readme version for cover image. But I still don’t get it. I still confused whether my URL is broken or the snippet

Browneyedsoul · August 3, 2022, 9:00am

Um… To be honest, codeblock has been buggy these days. (after 1.76~ ? )
It wasn’t before, but it seems that the team is running out of hand or meets some walls due to the brand new editor typing system

Type in other editors like sublime text, vscode, anything, And then paste the url or tag name directly into the area. That would be effective

Hp_96 · August 3, 2022, 9:02am

Oh, Thanks for your reply. I must say I’m not into this programming skill. I just follow the instruction as I directed. I copied from other editors and then get back to you

Hp_96 · August 3, 2022, 10:25am

Thank you so much. Eureka!

Emanuel_Flores_Garci · August 3, 2022, 11:06am

how did you do it? :000

Hp_96 · August 3, 2022, 11:56am

Do the step as instructed. Copy the snippets from their Github source. For the URL, copy the image address after uploading into your remnote and then paste it. Finally tag it with your document title.

JRY · August 3, 2022, 4:35pm

I eventually figured it out! I put a capital letter in the tag, and therefore, the cover page never showed up. It has worked ever since I have all lowercase letters in the tag.

Emanuel_Flores_Garci · August 4, 2022, 8:37pm

I did the same steps and it just still doesn’t show the cover.

JRY · August 4, 2022, 10:55pm

make sure to check your tag. In my case, all letters in the tag should be lower-cased. Any capital letter will prevent the photo from showing up. Another possibility is that you copied a wrong URL link. The link should end with a picture format (such as jpeg, etc).