Support

Account

Home Forums Add-ons Repeater Field Limit image height in a repeater page

Solving

Limit image height in a repeater page

  • How can I limit the size of these picture in this repeater code? I want to limit the height of the image. Most code examples I can find are modifying the url of the image html code, but in this repeater code in the page there is no html.
    I tried adding to the div style max_height:150 and it does limit the height of the div, but it crops the picture. I’d like the picture resized to fit.

    
    [repeater staff_listing]
    <div class="alignright">[if field=picture][field image=picture][/if]</div>
    <b>[field name]</b>
    [field title]
    [if field=email]<a href="mailto:[field email]">[field email]</a>[/if]
    <div style="clear: both;"></div>
    
    <hr />
    
    [/repeater]
    
  • You need to do this with CSS, how you would do so given what you’ve shared I can’t say

    
    .selector img {
      height: 100%;
      width: auto;
    }
    

    That would limit the image to the height of its container, alternately you could limit the image itself

    
    .selector img {
      max-height: 150px;
      width: auto;
    }
    
  • Ya, but how do you apply a css to code like that when its not html and more program code

  • Like I said, I don’t know. Something is producing html code for the site, whatever that code you are creating is for. I would start by looking there and the documentation for whatever you’re using, what the code you posted is for.

  • I see what you mean now. That is not part of ACF. I see now this is allowed due annother plugin https://wordpress.org/plugins/custom-content-shortcode/

    It enables you to put acf content in a page or post

    I’ll look further there, thanks

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.