Sirv Media Block: Sizing, Alignment and Caption

Responsive images will automatically fit the space surrounding them. For example, if the area is 500px width, the image will be embedded at 500px width (assuming height isn’t restricted). A user with a larger or smaller screen, will receive a different size image, which perfectly fits the available space. It’s truly responsive and an unlimited number of versions of that image can exist.

By default, there is no minimum width. To set a minimum width of 600px, you can add a div around your image, containing the min-width property e.g.

<div style="min-width:600px">
Here's the div & img code generated by Sirv plugin
</div>

Or just add the min-width property inside the first Sirv div:

style="min-width:600px"

Regarding left alignment, you did the right thing and the code is correct. It probably just doesn’t appear to be left aligned because its so wide that it fits the full width of the available space, so there’s no visual difference between left alignment and center alignment. If it still appears center aligned, its unlikely but possible that some other CSS on your page is overriding the left alignment. You can send us the URL of your page via our secure contact form and our team will check your code.

Thanks for the pointers.

Here’s a few comments/questions:

1. For most of our blog articles, there is a mix between images that are the full width of the containing div and those that are not. For the images that are not the full width of the containing div, stretching them to 100% width would cause distortion. I don’t think my situation is unique. Additional settings to set the width and max-width would be helpful.
2. Assuming we are using Guttenberg blocks and we have web developers on hand to assist, how could we perform your suggestion to add a style tag or div wrapper around each image to control its max width? I don’t see a way to do that in Guttenberg. The end goal being that a non-technical blog author could write future posts without having to write any html.
3. I’m unable to get the Align: Center setting working. I used the Chrome dev tools to shrink the image width in order to verify that it is left aligned (and not just too wide). Also, I removed all CSS from the page, except the Sirv CSS and the image remains left aligned.

   I found the two Sirv stylesheets below loaded on the page. But, they do not have any style rules, only comments. Could this be a bug that the style rules are missing?

   /blog/wp-content/plugins/sirv/sirv/gutenberg/addmedia-block/style.css?ver=1556209587
   /* add frontend css code here */

   /blog/wp-content/plugins/sirv/sirv/css/sirv-responsive-frontend.css?ver=5.0.4
   /*Here you can add styles that will be using on the frontend*/

4. I entered a caption for the images, but no visible caption appears on the page (only in the alt and title). I was hoping that the caption would appear in a paragraph tag beneath the image.

Thanks @etalmadgemc, this is helpful. We’ll check and reply on each item…

Hi @etalmadgemc,

Thanks again for highlighting these items.

1. Max and min width is a nice idea. We’re looking at adding that as a new option.

2. It’s possible to edit the HTML in Gutenberg but if we are successful in adding max/min width, your editors won’t need to edit HTML.

3. Our plugin team confirmed that alignment isn’t applied to responsive images presently. That’s an unfinished feature and is expected to be released in the next plugin version (if not, then the one after).

4. Captions are shown as visible text captions when embedding image galleries; they are added as alt/title text when embedding static and responsive images. We’re looking at how to improve this distinction and also whether captions can be shown for static/responsive images too.

The next plugin release is expected within 2 weeks, holidays permitting.

Thanks!

David
Sirv.com

Sounds great, thanks for the update.

David, I noticed that the Sirv WordPress plugin was updated 4 days ago. Are any of the updates related to our conversation here?

Not yet. We’re wrapping them up in a much larger version, coming soon. Thanks for your patience!

David

Hello again @etalmadgemc,

Thanks for your patience while we worked on the latest major update to the Sirv plugin, which has been released today.

1. A new option “Max width” is available when you embed a responsive image. A decision regarding “min width” hasn’t been made yet (the common requirement for responsiveness is for images to scale down with the screen and not cause viewport scrolling).

3. Left, right and center alignment options are now available for responsive and static images.

4. Captions can now be shown underneath image galleries or as alt text for static and responsive images. A new option allows alt text to be enabled/disabled.

Please try the latest version of the plugin and send us any questions.

Thanks!

David
Sirv.com

Great news, thanks David.
I’ve started testing the plugin found these two issues:
1. The caption text does not appear on the post.
2. The center alignment option does not center the image. Note: Adding display:flex; justify-content:center to .wp-block-sirv-addmedia-block, then the image is centered as desired.

Hello @etalmadgemc!

1. Captions appear for galleries. For static or responsive images, there are no captions (the text is used instead for the image alt tag). Is that OK?

2. To center the image, you should insert a fresh image (previously inserted images will not be centered). If you insert it as a responsive image, input the image width, then set Align to Center:

Screenshot of Sirv image embed settings

Without width, the image will automatically resize to 100% of the available width or its original dimensions (whichever is smaller), so it doesn’t stretch too far. Alignment will be inherited from your web page stylesheet.

If you need more help on this, please send a message to our support team via the form at https://sirv.com/contact/, with the URL of your page. Our team will check the code of your web page and give advice tailored to your exact use case.

Thanks!

David
Sirv.com

Thanks again David, to answer your questions:

#1: I would like to show the caption on the screen for static images within a paragraph tag. The caption text is not appropriate for alt text, which I would like to keep shorter.

#2: I tried again with a new image, but this is still not working for me. The image is not centered. After inspecting the Sirv CSS, I’m unable to find any rules that are centering the image.

I’ll get in touch with sirv.com/contact/ as you suggested

Hi @etalmadgemc,

1. Yes, that would be ideal. We have added a feature request for a true caption to be shown under static/responsive images. We’ll try to release this in a future plugin version. For now, its possible to show captions underneath image galleries only.

2. When align center is chosen, the plugin adds a class of aligncenter to the figure (which holds the img). This has been the behavior since v3.5.0 and tested on multiple sites. Your website might have some other CSS inherited from other (non-Sirv) code which is overriding the align. Or there may be some other issue. Whatever the cause, our support team will check your page and provide you with the solution.

We’ll keep you posted via email about the hopeful addition of captions for static/responsive images.

I’ll mark this issue as resolved now.

Thanks for using the Sirv plugin!

David
Sirv.com

Hi @etalmadgemc,

1. Good news – we have released a new version (v3.5.4) of the Sirv plugin that can place a caption under static & responsive images. It also adds that caption as alt text to the image. (In a future update, we might provide a separate field for adding different alt text to the caption.)

Enter the caption, then choose the option:

“Show caption and alt text”

Thanks!

David
Sirv.com

Great news, thanks again David.