Adding pictures using column divider

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Im trying to add images using column divider and picture widgets.Im adding a column divider then adding another colum diver in each one. I then add 3 or 4 pictures next to each other however the images end up looking different sizes at the bottom instead of neatly next to each other
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
  • confused

Posted 5 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Agwein

I was able to find your Yola account through your forum e-mail and your site Gwen Reid. Is this the website where the issue is happening? You've got a couple of pages for this site. Can you please let me know the page name, so that I can find it and have a look?
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
yes this is the website thanks
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
Its the Bespoke page thanks
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
The site shouldnt actually be published yet not sure how thats happened!
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
It isnt actually showing the changes on the bespoke page.It must not have saved them.However you can see what I mean on the lookbook page as same issue thanks
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
If you can also advice how I can hide the website - unpublish as I dont want it available to public yet thanks
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Agwein

Your site hasn't been published. I have viewed your pages in your Yola account via Preview. I'm afraid I can't see any pictures on the lookbook page. In order to look into this I need to see an example. Can you create one and tell me the page it is on?
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
It isnt published now as I figured out how to unpublish it.
You will see what I mean on the bespoke page, which is the same as the screen shot I posted above
Please help!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Agwein

Thanks for your cooperation. I can now see the problem you report on your "Bespoke" page.

First of all, your image files don't have a web-friendly size. They are all around 2 MB of size which will cause your website slow to load, both for you working with them in Sitebuilder and for your visitors navigating through your site once it's published. It's recommendable to downsize all your images to 20-100 KB per file.

Secondly, your images have huge dimensions, they're 3744 x 5616px which is probably the original size from your camera. Reducing the dimensions to let's say 720 x 640 (or whatever the correct proportion would be) will luckily also reduce the file size of your images. You can edit your uploaded pictures within your Yola File Manager by clicking on the Pencil Icon to use Aviary. You could also edit your images before uploading them to Yola by using e.g. Pixlr.com.

What I see on your "Bespoke" page seems to be a layout problem: The dimensions of your pictures break the page layout and overlap on the right side. Their dimensions must be reduced to fit the page width. Also, more Column Divider Widgets than necessary have been added to create the 3-column layout. You just need 2 Column Divider Widgets. Using more Column Divider Widgets, i.e. empty Column Divider Widgets, can create unwanted spacing.

Once the pictures have suitable dimensions, they will display accurately. I have created a page named "Bespoke-Test" on your website to show you how it can be done (you can remove this page at any time yourself, and it's not part of your main menu). On that page you will see that the dimensions of the images have been reduced to fit in a row of 3 pictures next to each other, and I have used two Column Divider Widgets to arrange them side-by-side.

Please let me know if you have any questions or need more assistance with arranging elements on a page.
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
Thanks for your help with this. The photgrapher sent me the pictures in that size. I have checked your test page. I would like the images to look bigger and have no spacing/white edges. I would like them to look like the bespoke page I created however to look the same sizes.If you can advise with this that would be great and also if you could advise how I can reduce the file sizes without affecting the quality.Thanks
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Agwein,

The steps in the processes:

The file size optimisation is best done outside of the website builder and as Stephan has suggested Pixlr is an excellent image manipulation facility

Reduce your file size to say 60 Kb per image.
To do this open the image in pixlr.com. A 60 Kb file size will present perfectly on your web-page without apparent reduction in visual quality.
Then go to Save in the File menu of Pixlr. The dialogue will open and you will see a slider. Move this down(left) slowly watching as you go until the file size displays as 60Kb. (don't go too far and then bring it back up as this may cause pixelation. In other words don't go from small to large but large to small is ideal) Give the adjusted image a new name(this preserves the original image and makes a copy at the newly selected parameters). Select a jpeg file format as this is the most appropriate for such images. Then select OK.

For your application it is important that each image has the same image size or so called "canvas size". You will also need the same proportions of width and height. If the proportions vary then you will need to "crop" the image(s) so that the proportion of width to height remains constant between images. There is a tool on pixlr under Edit which allows this. Use your copied image for this process. Save the modified images in your File Manager

The adjustment of the canvas size is most easily done on your web-site with some code.
To do this place an HTML widget in the column space of your divider and type in this HTML code.
<img src="resources/image-x.jpg" alt="fashion-x" width="304" >
You do not need to set a height parameter plus a width parameter if your images are all proportionally correct. You may however use the height parameter to place the image in preference to the width parameter. The file name, the dimension and the alt need to be set specifically by yourself.

If you need me to clarify this more then please feel free to ask.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Agwein

To add your pictures in a row without spacing, your best bet is to first use an image editing tool like Pixlr and crop your pictures to the maximum width to fit the content width of your specific Style Template.

I've checked the width of your content area, and it's 940px. If you want three pictures in a row without spacing, they will need to have a width of 313px each, which equals 939px (one pixel short at the right-hand side, but this will be hardly visible, or you could decide to add a different amount of pictures in one row). So upload your original pictures to Pixlr and reduce their width to 313px while keeping the proportions. When you save your cropped image, a dialogue box will allow you to choose the quality and to check what the file size will be. From my personal experience, it's okay if your file size is a bit more than 100KB.

Once you've finished editing your three pictures this way, you will be able to add them using (a) the Column Divider Widget and (b) the Picture Widget. Don't let the Sitebuilder view deceive you, you can check the way your pictures will really display by previewing your page:
  1. Drag and drop the first Column Divider Widget onto your page.

  2. Drag a second Column Divider Widget and place it into the first column of the first Column Divider Widget. Don't edit the margins.

  3. Drag and drop a Picture Widget into your first column and add your first edited picture. No margins.

  4. Drag and drop a Picture Widget into the second column and do the same.

  5. Drag and drop a Picture Widget into the third column which is the second column of the first Column Divider Widget, and do the same.

When you preview, your pictures should now display in a row without spacing.
Photo of Agwein

Agwein

  • 44 Posts
  • 0 Reply Likes
Thanks so much for your advice Stefan.I have photoshop and illustrator.Would it benefit changing the scales in either of theese instead of pixlr or is it better to use pixlr?thanks
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Agwein

To be honest, I've never really used Photoshop, but I've heard that Pixlr is very similar. I'm sure you will have the same options with Photoshop at least, but I'm not able to tell you where to find it there. Once you've found out how to change the dimensions of a picture with the image editing tool you have, it doesn't really matter which image editing tool you use. All I can say is that I've been happy with the quality of the pictures downsized by Pixlr.