Dynamic image selection for non-Cornerstone section of my site (blog)

[aaron_softwarepromotions]

Hello,

I would like to add an image to my blog which is a section of my site that is not using Cornerstone.

How can I add an image to a blog post but then change that image depending on the screen size?

For example:

If viewing from desktop - show desktop-image.jpg else show mobile-image.jpg.

Are there Cornerstone short codes that I could use to accomplish this?

Thanks and I look forward to your reply.

Aaron

[friech]

Hi Aaron,

Thank you for writing in, yes you can achieve that with a CSS @media query. To do this, add a unique CLASS to your custom Section, and then add this to Theme Options > CSS

/*768px and above*/
@media (min-width: 768px) {
 .unique-section-class {
 	background-image: url(BACKGROUND IMAGE URL HERE);
 	background-size: cover;
 	background-repeat: no-repeat;
 }
}
/*767px and below*/
@media (max-width: 767px) {
	 .unique-section-class {
	 	background-image: url(BACKGROUND IMAGE URL HERE);
	 	background-size: cover;
	 	background-repeat: no-repeat;
 	}
}

Where unique-section-class is the CLASS that you assigned to your custom Section. This will make that section have 2 background-image switching between desktop and mobile (767px).

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[aaron_softwarepromotions]

I’m not sure I understand what you mean by my custom section.

Keep in mind this is on a part of my site (the blog) which does not use Cornerstone.

Would I be able to apply this “unique-section-class” to an image?

[jade]

Hello Aaron.

Yes, you may add the class name to the Image CSS Class of the image in the option that you indicated on the screenshot.

Hope this helps.