[Resolved] How to display Bootstrap media object

[Author]

Posts

[Ben]

I am trying to make use of Bootstrap's "Media Object" component (hidden link) but I cannot seem to get it to render any featured images using Views or Content Templates. I am using the below code to test both in a View and a Content Template, but neither work. Please see the attached screenshot for what it outputs.

<div class="media">
  <div class="media-left">
    <a href="[wpv-post-url]">
      <img class="media-object" src="[wpv-post-featured-image output="url"]" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">TITLE</h4>
    ...
  </div>
</div>

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - I do not know what actually causing the issue here but when I've added the style="width:25%" to the div that has assigned the class "media-left" - I can see the image.

Could you please try to use following code and try to resolve your issue:

<div class="media">
  <div class="media-left" style="width:25%">
    <a href="[wpv-post-url]">
      <img class="media-object" src="[wpv-post-featured-image output='url']" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">TITLE</h4>
    ...
  </div>
</div>

[Ben]

Thanks for that Minesh.

That has caused the image to show, however there is now a huge gap as indicated in the attached screenshot with the red line.

[Minesh]

Well - you can adjust the style="width:25%" percentage passed here accordingly. Maybe 15%?

[Ben]

15% made the gap larger for some reason? But 5% seems to have worked.

If I am using a grid system of these, will I have to keep adjusting this value? Or will, as long as the images used are all the same size, the same value suffice?

[Minesh]

Well - you need to fix the width to display the image, so once you fix the width you need to make sure the image fix within the assigned width. So, I suggest you should add the fix width like for example 25% so any of the image you want to display should be displayed within the assigned width.

[Ben]

I'm not sure what you mean Minesh. Could you explain please?

[Minesh]

Well - I mean to say you should fix your width to display the image either 5% or 25% as required. You should go for maximum width so using that width you will be able to display all the images that fall within that given width. I hope this is clear now.

[Ben]

Thanks for that clarification Minesh.

I believe I understand what you are saying now. I basically need to set this value to the minimum possible to display the images? If the images to be displayed are all the same size, then the values will always be ok at the same value won't they?

Do you know why this only works with style="width:???%" and not without it?

[Minesh]

If the images to be displayed are all the same size, then the values will always be ok at the same value won't they?
=> Yes - exactly, if you have same size image then you just need to set same value.

Do you know why this only works with style="width:???%" and not without it?
=> I'm not sure but I think because the width is not given to the div that is the reason but you may consult CSS expert if you would like to know the core reason.

[Ben]

Thank you for the confirmation and all your help with this ticket Minesh!