Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sugarcube 2: How to give img an id or class?

I have a dozen images which I want to rotate using css animation opacity fade in fade out. I want to import the images into the tws so that they are not that messy.

The easiest way is that I can give the [img[myimage01]] an id. There are quite a dozen css samples out there, as long as I can give each of my images a different id.

I think I can use the following
<div class="fadein">
    <span id="img1">[img[myimage01]]</span>
    <span id="img2">[img[myimage02]]</span>
    <span id="img3">[img[myimage03]]</span>
</div>

with css like this
.fadein #img1 {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}
.fadein #img2 {
    animation-delay: -4s;
    -webkit-animation-delay: -4s;
}
.fadein #img3 {
    animation-delay: -2s;
    -webkit-animation-delay: -2s;
}

But I am not sure. I tried [img[myimage01] id="img01"] and no doubt it does not work. Is there anything easy I missed out?



I also want to put the images link into an array so that I can push and pop as I see fit, changing the images on the fly. I thought about using url element in the css like url(img[image04) but I have no idea how to put it together with an array script. Anyone?

Comments

  • If you use your web-browser's built-in development tools to inspect the HTML generated for the [img[myimage01]] markup you will see that it looks like the following:
    <img data-passage="myimage01" src=".....">
    
    ... where the img element's data-passage attribute contains the image name used in the original markup.

    You can create a CSS selector based on the data-passage attribute like so:
    img[data-passage="myimage01"] {
    
    }
    
  • While there is limitation to this solution, it is good enough to save me 5 hundred extra spans in my story.

    I did check the markup, and gave up after seeing the base64-random-number-string at src. Never know that I can specify the attributes in css. I have learned something new today thanks to you.
  • If needed, you may add a class attribute to greyelf's solution, so you could select upon that in your CSS, rather than the image passage.
  • how to add a class attribute to an img?
  • edited January 2017
    You may target an image via a class either directly or indirectly.

    DIRECT: Adding a class to the image element itself

    A good fit for the <img> markup. For example, and continuing with your shown image passages:
    <img data-passage="myimage01" class="foo">
    
    And the relevant styles:
    img.foo {
    	…
    }
    

    INDIRECT: Adding a class to the image's parent element

    A good fit for the [img[]] markup. For example, and continuing with your shown image passages:
    <span id="foo">[img[myimage01]]</span>
    
    And the relevant styles:
    .foo > img {
    	…
    }
    
  • Wait. Are you telling me that
    <img data-passage="myimage01">
    [img[myimage01]]
    

    are the same?

    So I can use <img> instead of if I want to access the stored image? that would be good news. I thought it does not work and I need that base64-random-number-string to access the image.
  • edited January 2017
    pingguo wrote: »
    Wait. Are you telling me that
    <img data-passage="myimage01">
    [img[myimage01]]
    
    are the same?
    Yes and no. They are distinct pieces of markup, however, they are both image markup and they both do the same thing. In this case, those two specific examples are completely equivalent.

    pingguo wrote: »
    So I can use <img> instead of if I want to access the stored image?
    Yes. Though, as seen in the examples, you must use the data-passage attribute to refer to the image passage, rather than the src attribute one would normally use.

    SEE: Markup Language > HTML Attributes for more details on the data-passage attribute.
  • This is a piece of knowledge purely Twine. I think it will be very useful. It wasn't the first time I want to use <img> instead of somewhere in the passages when I play around the code. Many thanks for the clarification.
Sign In or Register to comment.