Poster 2 template and header Image (UIkit related)

[steveb]

Bear with me explaining this, as I might not make much sense, but this is rather cool.

If you use Poster2, and use it with templates, I’ve just discovered you can use the UIkit image and cover stack to add a header image and define it’s “cover” size.

What do I mean?

Say you are adding a blog post and have a nice image you want as the header, but it’s portrait. If you add this to the template using the regular method: HTML stack and the snippet {{{header.content}}} it’s not going to look too great on the list page., as the image is going to be very tall, like this…

But, if you put the Uikit image stack inside a cover stack, and add the snippet to the image attribute setting option, you can define the height of the image using the cover stack, so it looks like this…

Obviously, that’s a poor choice of image to test with, but you get the idea.

I appreciate this is of no interest to many, but if you use P2, and UIkit, this is (IMO) pretty cool.

:-)

[Jannis]

In order to get the source / direct link to the image, you’re able to use {{header.image.src}}

Freestyle Template

[steveb]

@Jannis

In order to get the source / direct link to the image, you’re able to use {{header.image.src}}

I personally have no idea what that means! But I can say that if i replace header.content with header.image.src it no longer works!

EDIT: I’m using MD files, maybe that’s why?

[Jannis]

I don’t know how UIKit is working.

{{{header.content}}} gives you an <img src="link-to-image">,
where {{header.image.src}} just the "link-to-image".

No difference if markdown or stack item.

[steveb]

@Jannis While you’re here…

I’m about to head off to look for some sort of online editor for creating/managing files, Markdown files. I’m not talking about an online MD editor, but something I can host on my own server, that users can log into, and create Markdown files, edit existing ones, etc. It’ll need a nice editor interface and some way to manage the files once created. And a way to upload/embed image files etc.

Any ideas?

[Jannis]

Not tested by myself.

benweet/stackedit

[steveb]

@Jannis

In order to get the source / direct link to the image, you’re able to use {{header.image.src}}

Aha! OK, this mkes sense now. I’ve found a much better way to do the image thing using that snippet you gave and the background stack.

Ta.

[Tsheba]

Very interesting and helpful in that I almost always change my header image in the original templates where it is allowed. And with Ulkit add-ons, which I find compatible with several themes, I too will test what other effects I can produce. So, thank you.

[Nick]

Fascinating @SteveB @Jannis and ironically something I was going to ask about in a more general question…

Perhaps someone could guide me at a more basic level, before I attempt to use Steve’s above idea?

I have just tried my first custom template (I am slow, I know…)

This is giving me the following:

OK - sorted! Is this the correct way to do it?

PS Is it possible to put a list of hashtags (as used in the original Insta post) without poster recognising them as markdown and making the text huge?

[Jannis]

How have you been able to get the markdown folder above the template?

it should look like this:

[Nick]

Not sure, but it worked!

The whole thing looks a bit messy at this moment, I’d love to just have a working instagram feed, but that is fraught with problems right now, I’m trying to work out how best to do it - and be able to use Poster 2

[Jannis]

@Nick

Not sure, but it worked!

Well, it shouldn’t. Drag and drop the markdown folder stack to the place below the horizontal line as shown.

header.image.src gives you the link to the image. with the shown source image, it should work.

Does it now?

[Nick]

I made the order change immediately and yes, it is working thanks.

Now Im trying to add a second image to some posts (not all) and sort out the hashtag thing

[Jannis]

@Nick

PS Is it possible to put a list of hashtags (as used in the original Insta post) without poster recognising them as markdown and making the text huge?

You’d have to show us how you’re adding the tags (hashtags?) to the markdown file 😅

[Nick]

OK, so adding as:

shows as a Hashtag in the post - whether it will be searchable as a tag is another point altogether?

[Jannis]

Please be so kind and post a screenshot of the whole file.

[Nick]

@Jannis Thank you kind Sir!

![Screenshot 2021-06-25 at 19.44.23|686x378]

and the Markdown:

and the page: spare | Wild Photographer

[Jannis]

I wouldn’t use these “hashtags” as you have inserted them. Because you’re actually not able to click on them to see all images “tagged” with this keyword.

Why not using the actual tags attribute in the metadata and use the {{{tag.link}}} macro in the template for having clickable links?

tags:
  - birds
  - scotland
  - photography

[Nick]

Thanks @Jannis, you make a great deal of sense in the context of a blog and I will use these for the main blog.

But this one is not a ‘proper’ blog, but a list of images to give more searchable and visual content on the site, I was actually hoping to improve website search ability from the popular tags on social media, in the form of Hashtags for #bird in 2021 to be popular and trending in Instagram, TikTok - Top-Hashtags.com

Probably a step too far? I’ll delete the tags before I put on the main site.

BTW the main Blog with Poster 2 is working well with a mix of regular blog posts and Markdown posts - a brilliant and inspired idea, thank you!

[Jannis]

@Nick

I was actually hoping to improve website search ability from the popular tags on social media

Yes, but that’s for Instagram. For an own blog post, it would be better to use the tags I’ve shown.