[andrea BParticipant]

Hi,

I am looking to reduce the image size of the spot images. I am talking about the images under the “Bride Preparations” on here: http://www.andreaboaretti.com/wedding/

How can i reduce the size of the image when using the image shortcode or the element?

Thank You

[J. Michael BParticipant]

Hello Andrea. I took a quick look at your site and it appears to be using the full-size images instead of the thumbnails.

Taking a look at your code, you can see that it’s applying the correct image class:

.x-img-thumbnail {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: block;
  line-height: 1.7;
  padding: 5px;
  transition: border 0.3s ease 0s, box-shadow 0.3s ease 0s;
}

However, by looking at the direct URL of one of your images:

http://www.andreaboaretti.com/wedding/wp-content/uploads/2014/02/bridespot1.jpg

You can see that it’s using the full-size version instead. Your URL should look something like this:

http://www.andreaboaretti.com/wedding/wp-content/uploads/2014/02/bridespot1-300x168.jpg

You can use a plugin like Force Regenerate Thumbnails to go back through your images and generate the needed sizes, and it should then display correctly as a thumbnail.

Another place to check is when you’re selecting the image you want to insert, that you’re selecting the appropriate size.

IMAGE EXAMPLE #001

Hope this helps.

[RubinKeymaster]

Wow Michael, once again just wow.

[andrea BParticipant]

Thank you.

Is there a way to do reduce the size when using Image module element from the visual composer since it doesn’t show attachment display setting when adding adding an image ?

thanks again

[RubinKeymaster]

Hey Andrea,

you could give the image a percentage width or put it inside a column. I would not recommend giving it a static width since then it would not be responsive anymore. You also could give it a max-width let me know what you want to do and I will give you the custom css tweak.

[andrea BParticipant]

I think i will go with set the max width.

Also is there a way to add a frame to images when we choose “circle” option.

Thanks

[RubinKeymaster]

Sounds like a plan can you guide me to the image you want to use the max-width one so I can help you?

If you want to add a border to the circle image you would need to do following:

[image type="circle" src="http://yourdomain.com/image.jpg" alt="Text" style="border: 3px solid #222;"]

[andrea BParticipant]

Thank You!

I want all spot images on the homepage to be the same size. Currently on my homepage, the images under “bride preparations” i have resized the images to 400×299.

Also can you show me how to add shadow to the images. so basically i am trying to make it look exactly like how it looks when using image type as “thumbnail”. but in this case i want it to be circular shape. if you look at thumbnail images on the website they kind of popping out, i think its the shadow right?

Thanks again

[KoryKeymaster]

Hey Andrea,

If you’re adding a lot of custom changes to many images on your page, it will be best to first give all of these images a class in the class attribute like my-custom-img and then apply the following CSS via the Customizer:

body .x-img.my-custom-img {
  border: 3px solid #fff;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Thanks!

[andrea BParticipant]

Alright cool, Thanks

so i also added the max-width too , works great! Also i added to the homepage css so it effect on the homepage rather than add class to each image.

body .x-img.my-custom-img {
  border: 4px solid #fff;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
max-width:400px;
}

[RubinKeymaster]

Hey,

glad everything works now. If you need anything else let me know!

[Author]

Posts