[GmsParticipant]

When you upload an image WP makes 4 version: a thumbnail, medium, large and full size. So, when you want to insert an image you can select to insert the thumbnail but you can link to the full version of the image.

When I insert an image with Visual Composer I don’t have the option to select which version of the image I want to appear. Is it possible to select the image version like WP do or I have to upload manually 2 versions of the image?

I am trying to make a kind of a demo page with many products. With Visual Composer I make rows with 4 columns each and I put an image to every column. I also link every image to itself. Although it appears ok (the images are shrinked automatically to fit the column) the page is loading slow because the images are large ( 20 images with size from 600 to 1000K each).

Is any option to insert the thumbnail or the medium version of the image or I have to upload manually to versions of every image (thumbnail and full size?)

Thanks

[SupportMember]

Hi Basilis,

When you create images inside a column it will occupy the full width of the column. That’s by default, however when you add an image using VC, on the image settings there is a Style drop down where you can choose a thumbnail version of the image. If you don’t like the size of the image, on the most bottom part there is a Style input box again which you can set the width of the image as an inline CSS, example: width: 200px;.

Unfortunately the image feature of VC is not connected to the media’s image size variations so there is no way yet for you to select those size versions.

Thanks!

[GmsParticipant]

I had selected already the thumbnail version from the style drop down but this is not about the size of the image. It just appear a red border around the box when you hover the image. I tried the to set a smaller width at the Style input box as you said but it stills load the large version of an image….

Thanks

[AlexanderKeymaster]

Hi there,

It applies a border that has the same color as the links on your site. You can remove it with this CSS though (Customizer > Custom > CSS)

a.x-img-thumbnail:hover { border:none; }

[Steven WParticipant]

It seems like the VC image function is not useful for placing images into small columns, because it uses the full-size image and artificially shrinks it. The theme automatically creates so many sized versions of an uploaded image, why can’t you select a version in the VC image function?

For small sizes, I will use the plain text function and just add an image through there, since it lets you choose the size.

[Markus FParticipant]

On my homepage I handled the problem by uploading 2 versions of the images. One thumbnail size (e.g. 200×150 pixels) and one full size (e.g. 800×600 pixels). I placed the tumbnail-size, set the anchor tag and liked it to the url of the fullsize pic. Furthermore I used a responsive lightbox to get something like a gallery of all the pictures of the site. You can take a look at http://www.work-art.at/home You should find a section at the bottom right before the footer where the thumbnails are located on the right side. Maybe this helps you.

[RadModerator]

Hi Steven,

Images should be re-sizable and must follow its container size to comply the responsiveness of X theme. The idea of responsiveness is to make it work on all media screen sizes, pixel by pixel(no specific device) without creating separate site (eg mobile site http://m.mysite.com). And content must be responsive too.

Wordpress media create different sizes of images, and they are done at server side, and you have to add specific code to pickup these sizes. Which is not possible for responsive layout, responsive layout can’t pickup those images since it is already rendered on a browser. The solution is load all images of different sizes and show specific images depending on screen width in pixel. The problem with that is performance, and you won’t like a spam request to your server just to pickup image in every pixel change.

Selective image loading can only be done if you will setup dedicated mobile site that analyze request and serve proper images, and they all done at server side.

@Markus, thank you for helping! Good one 🙂

[ArkymedesParticipant]

Hello and I have a question based on that as well:

I noticed that the X Theme actually “took over” some functionalities that are default from VC like the “Single Image” element.

In the default functionality, when inserting an image using the “Single Image” element, you could specify the dimensions, and the module would crop the picture to fit the size. That was great to insert images as “columns”, as it would take the original picture (i.e. 16×9 ratio) and if I wanted a, let’s say, 50×350 image, it would crop based on the center and add it to the content.

Now this very useful functionality is missing from the “Image” element that the X Theme introduced, substituting the original from VC. Is there a way to actually achieve that with the current element?

Best regards,
Arky

[ChristianModerator]

Hey Arky,

X Image element does not have that feature as there is already an image editor built inside of WordPress which you can access when you select an image before posting. See https://cloudup.com/cBa6H7CM5Jh

Another option is to turn off X Integration in Visual Composer settings so you can use the default VC elements.

Thanks.

[ArkymedesParticipant]

Hi and thanks for your prompt response 🙂

Actually, just unchecking the “Remove Native Elements” from the Visual Composer settings brings back the default VC elements alongside the added ones by X!

Thanks! and sorry for wasting time like that.

Best wishes,
Arky

[Paul RModerator]

You’re welcome!

Glad you were able to figure it out. 🙂

[jwyrickParticipant]

I find using a style “width:100px;” doesn’t affect the image size, but assigning a class that has the same css does.

[FriechModerator]

Hi There,

Not sure what element you’re referring to. But glad you sorted things out.

Cheers!

[Author]

Posts