How do I use image shortcodes

[dpvtank]

I have been scratching my head about this for the last day and I couldn’t find an answer to this no matter how I tried to search for it.

I want to use the “circle” modified as explained here: http://demo.theme.co/integrity-1/shortcodes/images/ (I’m using the Integrity stack).

I used the image element to place the image on my page. I also see a place to add the alt text. But where exactly do I include the shortcode for [image type="circle] in all this? I tried including this in the custom attributes, ID, or Class, but nothing happened.

I could use some help!

[ruenel]

Hello Dhawal,

Thanks for writing in! If you are using Cornerstone in building your page, please insert an image element. Place the image URL and make sure that your image is a perfect square. In the image element settings, find the Inner Border Radius settings and insert 50em or 50% to have a perfect circle.

You will need a square image to get a perfect circle. If you want the modified circle just like in the demo, you can upload a rectangular image that the width is much greater than the height of the image.

Hope this helps.

[dpvtank]

Thank you. This is exactly what I ended up doing.

I am however curious how I can use the other image shortcodes as well. I am not sure how to interact with such shortcodes unless they are in text mode and I can go into the actual edit more and add them as they come. For example, how would I add a tooltip on an image if I wanted to do that?

[ruenel]

Hello Dhawal,

A shortcode lets you do nifty things with very little effort. Think of a shortcode as a shortcut to add features to your website that would normally require lots of complicated computer code and technical ability.

This means that you usually use the [image] shortcode inside a text element or a content area element. You CANNOT use the image shortcode within the image element. The image shortcode is actually a feature of the classic image element where you can use a shortcode if in case adding the classic element is not possible. For example, you are trying to insert an image in you sidebar widget area. Since you cannot edit the sidebar widget area using Cornerstone, you cannot use classic image element. Then, this is where the [image] shortcode will come into play.

If you are looking to replicate the image variation shown in the demo, you can actually tweak the border radius in the image element settings. For example, having a rounded corners can be done by adding less than 20 pixel for the border radius in the element settings. Making it to 50em or 50% will give you a super rounded corners of a perfect circle depending on the dimensions of the image in you element.

Hope this will help you explain more about the image shortcode.