Does @@ work for setting the size on [img[image]] ?

Question

Hello everyone,

Maybe this turns out to be just a yes/no question. Does @@ not work for [img[image]] ?

In my CSS I have:

/** Also tried replacing the .mapShrink with #mapShrink (no dice) **/

.mapShrink {
	height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

/** Also (separately) tried  **/
.mapShrink {      /*and #mapShrink  */
transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
}

And then inline I:

/* Have tried: */

@@#mapShrink;[img[PossibleMap]]@@

@@.mapShrink;[img[PossibleMap]]@@

@@max-width:300px;max-height:300px;[img[PossibleMap]]@@

@@size:10%;[img[PossibleMap]]@@

In all cases, my image displays at full size.

The image itself is living in a: Twine.image passage and is Base64

(Honestly don't know if that matters.)

Answer 1

As explained by the Custom Style markup documentation it's functionallity comes in two different types: inline and block.

You are using the inline type that wraps it's content within a HTML span element which by default doesn't support width or height related attributes, the block type uses a div element instead which does support them. This is the main reason why the CSS in your example isn't working as you want.

note: There is a secondard minor issue in your CSS, which is that your selectors are targeting the HTML element generated for the Custom Style markup and not the img element contained within it.

There are a number of ways to fix your issue(s), two of them being:

1. Leave the Custom Style markup as it is and modify the CSS to target the img element contained within it.

.mapShrink img {
	height: auto; 
	width: auto; 
	max-width: 300px; 
	max-height: 300px;
}

.mapShrink img {
	transform: scale(0.5, 0.5);
	-ms-transform: scale(0.5, 0.5);
	-webkit-transform: scale(0.5, 0.5);
}

2. Leave the CSS selectors as they are and change the Custom Style mackup to use it's block type

@@.mapShrink;
[img[PossibleMap]]
@@

 

Comments

A.... you are amazing. If you are not Chris Klimas himself (and I have never seen the two of you in a room together at the same time so for all I know you are the Super Alter-ego)... then... well I don't know what, then. I just assume you are.

B... I had two challenges but your answer fixed them both. I had not mentioned that this was all wrapped in a pop-up box (Dialog.wiki) so I could not figure out how to use the Block version (as opposed to inline). But that wasn't the real issue.

The real issue was that I had no clue that Div does anything different than a Span (so it didn't help that the documentation says nothing about WHY one might want to use one or the other: div/block vs span/inline). But I did read the documentation. In fact, I have Chrome set to always open SugarCube v2 Documentation each time it opens. I live by those explanations while working in Twine (that and also the old Forum and new Questions---And seriously the Cookbook was a great idea). 

C...  But again, what is so great is that you have solved it all, regardless. Do we have an area on here where we might hire someone to help us with our project? You, TME, HiEv, Chapel, Idling... seriously I don't think anything could get built without you all lending so many hands. I, for one, know that there are times a dedicated coder would be helpful.

I don't mean to upset the delicate ecosystem of "help always being provided"... but sometimes you all are invaluable! (And I get that that word implies "no price tag"... but hey... sometimes a price tag is just what the doctor ordered.).

/rant

Thank you again

---

>If you are not Chris Klimas himself ... I just assume you are

Chris is know as klembot on this site, and while you may not of seen him and myself in the same (chat) room I definitely have. <smile> So I can promise you that we aren't the same person. <lol>

>  that Div does anything different than a Span

One of the main differences between the two elements is their CSS display property (block vs inline), and it is the value of this property that controls what sort of box is used to render all the different elements used in HTML.

> documentation says nothing about WHY one might want to use one or the other..

If you think that the related SugarCube documentation can be improved then I encourage you to add a new issue on that project's repository describing how this may be done, I am sure that the TheMadExile would welcome any such input.

> Do we have an area on here where we might hire someone to help us with our project?

Not on this site, but there is a channel on the Twine releated Discord server (link on the main Twine website) where that can be done.

If you (or anyone else for that matter) want to talk about hiring me to help with the programming / software development side of your project then I suggest you PM me directly on the Twine Discord service, and I would welcome any such contact (by you or others) as I am currently looking for more paid work.

---

A, I’m damn-near afraid of TME. So..... I will NOT be suggesting his documentation lacks anything.  :D

B, I had no idea about the block/inline so thank you. 

C, next week for sure I will connect with you for just that reason.  If you don’t want to wait I’m on Telegram at:  t.me/SageMichael  (just click that and it goes right to me. 

D, As always: thank you for all you do around here.