Adding styling to my shortcode

bici · Today 01:42:30

I have this shortcode in a form figure :

<figure> <txp:if_yield name="class"> </txp:if_yield> 
    <txp:image id='<txp:yield name="id" />' class="img-fluid" />
    <txp:if_yield name="caption"> 
        <figcaption>  <txp:yield name="caption" escape="tidy,textile"  />  </figcaption>
    <txp:else />
        <txp:image_info id='<txp:yield name="id" />' wraptag="figcaption" escape="tidy,textile" class="imgcaption" />  
    </txp:if_yield>
</figure>

and in my article write panel in Body I insert this <txp::figure id="20" /> and all works fine. Except the caption is not to my liking. I want it in a smaller and a darker font.

in my css I have this :

.figure imgcaption {
    font-size: 0.85em; /* Smaller size */
    color: #555;      /* Optional: lighter color for contrast */
    text-align: center; /* Optional: centered */
    margin-top: 5px;  /* Optional: space above caption */
}

but I haven to been able to get the caption to render in small font face,

BUT if I add this to my article write panel:

 <div style="font-size: 0.85em;">
<txp::figure id="20"  /> 
</div>

I get the caption to appear in a smaller font, albeit without any additional css styling…

I have tried adding the css styling to my shortcode but without any success except for adding the class='img-fluid" which controls the sizeof the image via css. where am I going wrong? I would prefer that one only have to insert the code <txp::figure id="20" />! and not add the div stuff…

jakob · Today 07:22:05

You introduced a few small anomalies to your shortcode. It’s important that the if_yield name="class" bit appears within the opening figure tag and not next to it. Try the original example again (here expanded to include the extra classes you added):

<figure<txp:if_yield name="class"> class="<txp:yield name="class" />"</txp:if_yield>>
    <txp:image id='<txp:yield name="id" />' class="img-fluid" />
    <txp:if_yield name="caption">
        <figcaption class="imgcaption"><txp:yield name="caption" escape="tidy,textile" /></figcaption>
    <txp:else />
        <txp:image_info id='<txp:yield name="id" />' wraptag="figcaption" escape="tidy,textile" class="imgcaption" />
    </txp:if_yield>
</figure>

and likewise with your css, your version shows .figure as a class, but it should be the html tag figure, and imgcaption as a tag, but it’s actual tag name is figcaption. In your code, you have given that the class .imgcaption. So this needs to be:

/* use whichever selector combination you prefer */
figure .imgcaption,
figure figcaption {
    font-size: 0.85em; /* Smaller size */
    color: #555;      /* Optional: lighter color for contrast */
    text-align: center; /* Optional: centered */
    margin-top: 5px;  /* Optional: space above */
}

Vienuolis · Today 07:53:13

Should not be .figure figcaption instead of figure imgcaption in your CSS?

I am sorry, I am late — jakob was quicker.

Last edited by Vienuolis (Today 07:56:04)

bici · Today 17:07:40

Thanks!
Note: I am working in MAMP Pro on localhost. Most changes that I make are reflected instantly. But there are the odd CSS and design changes that takes a day for the change to display! this was the case with my code. I spent hours trying to achieve what I wanted, but never getting the display desired. BUT this morning I had a caption––that was smaller font, in italic, and centred under the image––go figure.

Nonetheless the code provided by jakob, and confirmed by Vienuolis, is much more elegant, so I am now using that. hopefully by morning all will still be copacetic….

PS this is my first time making use of the Shortcode form … skookum!

Textpattern CMS

Textpattern CMS support forum

#1 Today 01:42:30

Adding styling to my shortcode

#2 Today 07:22:05

Re: Adding styling to my shortcode

#3 Today 07:53:13

Re: Adding styling to my shortcode

#4 Today 17:07:40

Re: Adding styling to my shortcode

Board footer