Wrapping text to images for mobile use

Hello,

There isn’t any built in feature for captions in the free version of Virtue. You would have to use a gallery plugin. I’m not too familiar with any free plugins that offer captions.

This one may work, but I haven’t tested it before:
https://www.ads-software.com/plugins/image-caption-hover/

-Kevin

Ok, thanks for responding. I’ll check out that plugin and see if I can’t find a way to do it through other means.

@misslehead, how do you get the 3 featured systems to appear on your homepage? Do you specify the html “manually”? (I don’t use woocommerce myself…)
If so, I think there is a way to accomplish what you are after.

I did it in the most simplistic way possible. I found what the max width was for the page and made each picture a third of that max width so they would sit side by side. I then just put the “captions” all on the same line with spaces in between. However, I can see the text code of each picture so maybe your method will still work?

> how do you get the 3 featured systems to appear on your homepage?

I didn’t mean the captions (that you added), I meant the images of the products. Do you do that manually by entering the a and img elements or do you use a shortcode?

I do it manually using the a and img elements.

If you are specifying the featured systems (the images and links to them) “manually” then there are several different ways you can accomplish what you are after – by specifying slightly different html. Here is one approach – it involves specifying a class and title attribute on the a element AND some additional css rules.

Currently, you use this structure for a featured system:

<a href="https://www.powercorepc.com/product/define-c-w-i5-7600k/">
 <img class="alignleft wp-image-2215 size-full" title="Fractal Design Define C Intel i5 7600K" src="https://www.powercorepc.com/wp-content/uploads/2018/01/FeaturedMT_2.png" alt="Custom computer" width="300" height="280">
</a>

Instead, use this (add class and title attribute on the a element):

<a class="featured-system" href="https://www.powercorepc.com/product/define-c-w-i5-7600k/" title="Fractal Design Define C Intel i5 7600K">
 <img class="alignleft wp-image-2215 size-full" title="Fractal Design Define C Intel i5 7600K" src="https://www.powercorepc.com/wp-content/uploads/2018/01/FeaturedMT_2.png" alt="Custom computer" width="300" height="280">
</a>

AND, add the following css rules (e.g. in the custom css in Theme Options/Advanced Settings):

a.featured-system {
   display:inline-block;
}
a.featured-system::after {
   content: "\a" attr(title);
	white-space:pre;
}

(If you are using a woocommerce shortcode or shortcodes, there are probably other ways to accomplish the same things as well.)