Image dimension controlls, and How Srcset works on Images

[guategeek]

Image Dimension Controlls
I wanted to know what the dimension controls are on image elements, there is this icon with what looks like an eye and arrows on the corners (highlighted with yellow) that I can’t seem to figure out what its for and is not mentioned in the docs anywhere. Also what is the W and H fields (highlighted with green) for since they can’t be edited?

Srcset
Lastly what is the Attachment Srcset toggle and how do I use it. The tooltip says “If using an Attachment ID, this will use scrset based on your configured image sizes”. I looks like Srcset should let me grab a different size or version of an image, but how does this work with WP and Cornerstone? Like how do I configure the image sizes?

For example I have an ACF image field used for box art on a board game post type. On a listing page I want to use a smaller thumbnail of that image (not the full size) in a looper as its never going to be displayed larger than say 100px and having the full sized image will majorly slow down the page load as there will be lots of items for the looper to display. Is this a case for Srcset? And if not how do I choose a thumbnail version of an image rather than the full sized image when choosing an image is Cornerstone?

[ruenel]

Hey Jeffrey,

Thanks for writing in!

The “Eye with Arrows” Icon
This icon is the Retina toggle for the Image element. When enabled (the eye is “open”), Cornerstone generates higher-resolution image versions to ensure the image looks crisp on Retina (high-DPI) displays. It essentially tells the browser to serve a larger image than the displayed size to prevent pixelation on modern screens.

The “W” and “H” Fields
These fields display the original width and height of the image you’ve selected. They are for informational purposes only and cannot be edited directly. They show the source image’s dimensions, not the final display size, which is controlled by the element’s CSS or column/container settings.

The “Attachment Srcset” toggle enables WordPress’s responsive image functionality for the selected image. When this toggle is ON and you are using an Attachment ID (not a URL) as the image source, Cornerstone will output the <img> tag with a srcset attribute [citation:8].

Here’s how it works:

• srcset provides the browser with a list of different sizes of the same image. The browser then automatically chooses the most appropriate size to download based on the user’s screen resolution and viewport size [citation:3][citation:12].
• Configuring Image Sizes: The image sizes available in the srcset are generated by WordPress itself. You can configure these sizes in your WordPress Admin under Settings > Media (Thumbnail, Medium, Large). Additionally, themes and plugins can register custom sizes using the add_image_size() function in your child theme’s functions.php file [citation:6].

How to Configure Image Sizes for srcset:

1. Via WordPress Admin: Go to Settings > Media and set your desired dimensions for Thumbnail, Medium, and Large.
2. Via Custom Code (Developer): Add custom image sizes to your child theme’s functions.php file. Once added, regenerate thumbnails using a plugin like “Regenerate Thumbnails” to create the new sizes.
3. Cornerstone Integration: The “Attachment Srcset” toggle uses these registered sizes to build the srcset list.

Since you are using an ACF Image field, you can have ACF return a specific image size directly. This bypasses the need for srcset for this specific case and gives you precise control.

1. Edit your ACF Image Field: In the field settings, set the “Return Format” to “Image Array” or “Image ID”.

2. Use Dynamic Content in Cornerstone: When you insert the dynamic content for this ACF field, you can append the size to the code. For example:

   • If your field returns an Image ID, use:
     {{dc:acf:post_field field="your_acf_field_name" size="thumbnail"}}
   • If your field returns an Image Array, you can access the specific size using the .sizes syntax within a Looper:
     {{dc:looper:field key="sizes.thumbnail"}}

This method ensures the image element directly outputs the <img> tag with the URL of the thumbnail version, eliminating the performance overhead of loading a full-size image.

Best Regards.

[guategeek]

Thanks so much for the detailed explanation, I am far less confused now!

---

Any chance that this information could be added/updated in the docs https://theme.co/docs/image so that its easy to refer back to and for others to find. For example the docs have screenshots from a much older version of cornerstone and the explanation of fields is limited to that old version. So some information seems wrong and a lot of it is missing.

I also have some suggestions for more info in the cornerstone UI itself that would help new users like me.

Dimensions
The retina icon looks different in the docs and I totally missed that it was explained their. It also states “Also supports options to set the width and height of the image.” which is no longer the case, as this only tells you the original image dimensions.

I was confused by the W and H because when you are using dynamic content they remain empty, and it looks like an input but its not (you can’t edit them). I would suggest changing the W and H so they don’t look like an input if possible. And maybe hiding them completely unless they have a value to show (so not visible when the source is dynamic content).
Also would be nice if the Dimensions label had a tooltip stating something like “retina support toggle and original image dimensions”.

Source
Would be good to explain the image ID and that you can change the label to an image size to select different versions of the image (maybe point out standard image sizes: full, large, medium, thumbnail and state where these can be changed in WP and that you need a plugin to regenerate them if changed).

I didn’t understand that this was even possible until reading your post and then noticing the :full and playing around with that. So this also would benefit from a tool-tip that says something like “attachment ID followed by a configured image size”.

Attachment Srcset
You did a great job of explaining how to use scrset with an ACF field, although it didn’t work for me the way you explained it helped me figure the following out. When I tried {{dc:acf:post_field field="your_acf_field_name" size="thumbnail"}} it would still just give me the full sized image. But taking into account what I figured out above in the dimensions section I went ahead and tried {{dc:acf:post_field field="your_acf_field_name"}}:thumbnail and that did work.

I am assuming that with the information above on Dimensions about putting the size after the attachment ID is how you use it with an image from my media library? Having this explained in the docs and examples of both a standard image and ACF image would be really helpful.

[ruenel]

Hi Jefferey,

I have noted your feedback and forwarded it to the person in charge of the documentation.

Thanks.