Hi
I want to use the Screrer stack (or the image stack) for images in the header part of the item in Poster stack but I can’t figure out how to “connect” the image in Screrer stack to “header.image.src” so that I can refer it in the Template.
Using the RW blog template (i.e. the default template) it works fine** with a Screrer stack in the header item but not when I use a freestyle template.
(** and with “fine” I mean that it appears and scales to different sizes in realtime when I resize the window i.e works as intended at least when previewing locally in Firefox)
Any advise?
(@jannis, @habitualshaker)
Erland
If you set Srcerer to use Warehoused images then you can use the poster macro as the url.
1 Like
Hi
And by Warehouse you mean formula or links?
I have used the formula method (and that worked with the RW template but not freestyle). I used image fit in the template and {{header.image.src}} as the link.
Erland
If you have added all of the required size versions of the image to your server then you could probably use the Formula approach. Have never tried this but can’t think why it wouldn’t work. [Edit: Actually this wouldn’t work]
If you wanted to use Srcerer you would need to just use the Srcerer Single stack. There is no way to pass in the multiple values for the various image variants via Poster.
I tend to use Image Fit stack with Poster for the image headers.
Hi
I added the ones that I crossed for and that worked fine with RW template. So it should be possible to get it to work also with a freestyle.
I also tried the image fit stack in the header but no.
Image fit in the template and the poster image stack in the header work (but that stack only accept one image locally)
I’ll experiment a bit more and be back tomorrow.
(I copied a page from poster-grid-plus-pro, perhaps I should start from the beginning.)
Erland
If it assists, I use both Poster 2 and Srcerer extensively with the Freestyle templates.
In the screenshot below you can note that I also use multiple image sizes to accommodate the various device sizes also - a great Srcerer feature!.
I choose to use specific image sizes throughout my blogs pages for consistency, all built within Pixelmator Pro.
The working blog (now in excess of 260 entries) can be viewed at https://csmltd.com/articles/
Hope this is of value.
Regards
Paul
I guess the question is then, how do you reference the header image defined in the screrer stack in your ‘item’ when used eg in the template for the list view ?
In my use case I have my template configured as below - trust this helps.
3 Likes
Hi @paul.rowe
Yes, thanks that was the clue. Going big and grabbing the whole thing instead of the image worked (together with the tripple “{{{}}}”)
Erland
Fun facts… or not … anyway don’t put to much trust on chatGPT answers, stacks4all rules :-)
Not a question or answer to my question but rather strange and frightening because chatgpt “sounds” very sure of the correctness of the answers :-)
I asked chatGPT the question above and got what first looked like a veeery good looking answer but … it seem to be mostly full of sh…t :-)
(chatgpt conversation shortened)
First I got
“Ah, sounds like you’re working with RapidWeaver and using Poster Stack and Screrer Stack by inStacks. When you’re using a freestyle template instead of the default RW blog template, certain built-in linkages (like header.image.src) don’t work automatically unless you explicitly wire them up.”
…
- Insert a Screrer stack.
- Set the Poster Key of that image to
header.image.src
…
my answer (MA):
there is no such key
chatgtp:
There will be a field labeled something like:
- Poster Key
- Key for Template
- Template Variable Name
In that field, type: header.image.src
You’ve now assigned the image’s source URL to the variable %header.image.src% in your freestyle template.
MA:
no there is no such field
chatgpt:
…you need to manually add a hidden Poster item field with the value from the Screrer image in parallel.
You need to tell Poster what value %header.image.src% should hold. To do this:
Add a Markdown Stack (or Poster Field Stack, if you’re using that plugin) anywhere inside the Poster Item — doesn’t matter where visually.
In that stack, write something like this (Markdown mode):
poster.header.image.src: “https ://yourdomain.com/resources/your-image.jpg”
well I gave up here. But perhaps the correct answer will appear if you keep asking :-)
1 Like
Pleased I was able to assist
1 Like
Fantastic response, Paul. I’ve spent many hours experimenting with this, before drawing a blank. Now what I want is something like Stuart’s Srcerer stack, but using container queries rather than media queries. Specifically, I want the image in the list format to be a 3:2 rectangle, and the image on the blog to be a narrower banner running across the whole top of the page (somewhere in the region of 5:1). It’s possible, almost, with Image Fit, if the part of the image I want in the list format is always in the same place (e.g. in the centre), but it doesn’t make for great crops. I’d rather have two different, related images.
