Custom image sizing + Snap images to size?

  • 2
  • Idea
  • Updated 7 years ago
  • Under Consideration
I use Yola for my music and I've been trying make a Discography styled page, which features a list of albums including a photo and a few different text widgets for each album listed.

I'd like for it to have a uniform look, with the same size widgets in each item of the list, (e.g; album artwork is the same width and height for each album) however it's very hard to drag two pictures or text widgets to the same size, judging only by eye is almost impossible.

So firstly would it be possible to add a simple option to widgets such as the text and photo widget which allows you predefine a size for that widget in pixels?

Also how about a 'Snap-To' feature? For example if you have two widgets side by side in a divided column, you can choose to automatically size one to match the other? This would make things a lot easier and neater.
Photo of Eyes Half Closed

Eyes Half Closed

  • 62 Posts
  • 17 Reply Likes
  • happy

Posted 7 years ago

  • 2
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Eyes Half Closed

Right now, we do not have a 'preset size' feature for widgets, but I think it is a good idea. The 'Snap-To' feature could also be helpful to align content on the page. I will pass these suggestions on to our engineers for consideration.

In the meantime, I can suggest using the Column Widget, as it will give your page a few columns that you can arrange in a grid format. It is easier to make the column widths the same size across the page, if that is what you would like to do.

Another way in which to get a uniform size for each of the albums, is to use a table. See our Adding a table tutorial for more details.

I hope this will work for you. Let us know if you need more help.

Thank you
Nazlie
Photo of Gop

Gop

  • 189 Posts
  • 54 Reply Likes
I think that is a good idea. Snap to would make multiple images a breeze.

You have a couple of work arounds. One the image gallery offered here by Yola and secondly by using a little bit of HTML to size your images:

<img style="border: {a}px solid; width: {x}px; height: {y}px" src="resources/optional image folder name/image-name.jpg (or png)">


The border can be none or solid (among other styles) The thickness of the border is in pixels and is added as a number.

The width is the width of the image you wish to display it as in pixels. Height is an optional dimension and should be used cautiously as if the proportions are out from the original it can skew your published image. If you find that your originals are varying only by a few pixels then I find the height very useful rather than going through the effort of cropping a little bit off.
Photo of Eyes Half Closed

Eyes Half Closed

  • 62 Posts
  • 17 Reply Likes
Thanks for the reply, and consideration. I do currently use the column widget for things like that. The only problem is if I want one side of the column to be larger than the other, and I want this format to be uniform for each column widget on the page, I still have to click and drag, and it's hard to judge if they're the same size by eye. Although thanks for the tips about adding a table, I'll look into that.

And Gop I have used the HTML image tags on some occasions, it'd just be easier if this was all inbuilt.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Eyes Half Closed,

One other possible suggestion is to use our Picture Gallery Widget. All the thumbnails will be uniform and it is very easy to set up. Here's more information on how to use this feature: Using the Picture Gallery Widget.
Photo of Eyes Half Closed

Eyes Half Closed

  • 62 Posts
  • 17 Reply Likes
Thanks again for the reply. Only problem with that would group all my images together, rather than spreading it out with text like I was after.

An example of what I'm trying for:

http://behindcrimsoneyes.com/discog.php

Where the images are all the same size and in line with a piece of text next to them.
Photo of Eyes Half Closed

Eyes Half Closed

  • 62 Posts
  • 17 Reply Likes
Further on that, how about having it so when you drag images and widgets to resize them, you can choose to have them automatically snap to certain set points as you drag (say every 25 pixels) This would make things easier too :)
Photo of Gop

Gop

  • 189 Posts
  • 54 Reply Likes
If you have a number of discs to present then I think that by creating a csv file to merge into a CSS outline could be an easily implemented solution.

So you would create your file in something like excel with your main headings as columns and include the image url which you could take from a source outside your site or store a copy of the disc image in your file manager.

Create the outline of your csv file in excel and add aspects such as image dimensions. Generate the CSV file as HTML synatax.

Copy the csv file and paste it under your CSS definition.

I mention this as I have just done a very similar thing with 4 text fields and two image fileds per record. They are all perfectly reproducible in size as it turns out but would expand to accomodate extra text information if that were the case.



The css for this layout is quite simple:

<style type="text/css">

.the_table {
width: 1020px;
margin: 0 auto;
}

.Name {
float: left;
width: 200px;

}

.Plant_size {
float: left;
text-align:center;
width: 100px;

}

.Weight {
float: left;
text-align:center;
width: 85px;

}

.Price {
float: left;
width: 85px;

}

.Plant_Image {
float: left;
width: 204px;
}

.Flower_Image {
float: left;
width: 204px;
}

</style>


It would be quite straight forward to create this as a two column layout with your first column containing multiple fields as in the example you linked to. So text in the Left hand column and your disk image in the right hand column.

The person who really made it so easy for me was Duke and I am so grateful.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Fantastic! I hope that Eyes Half Closed may be able to use this!
Photo of Eyes Half Closed

Eyes Half Closed

  • 62 Posts
  • 17 Reply Likes
Thanks heaps for this :)
Photo of Gop

Gop

  • 189 Posts
  • 54 Reply Likes
Good. If you want any directions for creating HTML csv files with Excel just let me know.