Home › Forums › WoodMart support forum › centered image + title same height

centered image + title same height

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 8, 2020 at 10:47 am #231761

    tussibag
    Participant

    Hello,

    our product images are a little bit strange. So we need an grif with this attributes:
    Image section with fixed height. Then insert image horizontal centered.
    In this case all titles will have same horizontal position (height).

    Do you solved this for an other woodmart user before or have an idea how to have this?
    Maybe you can add this function to your grid settings. I will give the user one of the most written question: how to have an better position setting in grid/product archiv?! 🙂

    See my attached image for better understand. You will see: all images have diffrent pixel height. But the position of title and price are the same.

    Attachments:
    You must be logged in to view attached files.
    October 8, 2020 at 2:24 pm #231870

    Elise Noromit
    Member

    Hello,

    It is not possible to do with code. You need to upload images of the equal size and proportion. if your images are big enough you can crop them. Please find the instruction on how to do that: https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

    Best Regards

    October 8, 2020 at 2:43 pm #231883

    tussibag
    Participant

    I know the cropping option. But we see some other themes that support same height of image box.
    The solution is (see attached image) If you define fixed height for image box and enter the image in this box, you will have the same height for imagebox – no matter how height the image is.

    https://xtemos.nyc3.digitaloceanspaces.com/wp-content/uploads/2020/10/image.jpg

    First column with text explain the structure of the cell very fine.
    The red line define the fixes height of the cell/box for image. Its no matter how height the image is… all title will have the same position and its an very clean layout for visitor.

    October 8, 2020 at 2:57 pm #231886

    tussibag
    Participant

    maybe with this i can better explain the solution:
    https://flaviocopes.com/css-grid/1.png

    Here you see an grid with 4 columns and 2 rows.
    Every cell have an fixed height and image shown in the cell. All cell will keep his height, because height is fixed. So all titles will have the same height/position under image – no matter how hight the image is.

    We now many themes with this grid styles/option. woodmart does not support this?
    Maybe we can have an workflow with custom css like fixed height: min-height: 200px; max-height: 200px;…. ?!

    October 8, 2020 at 2:59 pm #231887

    Artem Temos
    Keymaster

    Hello,

    Could you please send us some examples of themes that implement this? We don’t have such an option in our theme at the moment. If you will set a fixed height for product images it will not be responsive and adapted for all image sizes.

    Kind Regards

    October 10, 2020 at 7:19 am #232204

    tussibag
    Participant

    ” If you will set a fixed height for product images it”

    Only the cell/box where the image is placed have an fixed height.
    This will title and prices the same vertical position.

    IMAGE IMAGE IMAGE
    TITLE TITLE TITLE
    PRICE PRICE PRICE

    October 10, 2020 at 7:23 am #232205

    tussibag
    Participant

    https://stackoverflow.com/questions/44129135/css-only-solution-to-set-multiple-same-height-row-sections-on-a-responsive-gri

    Here you can see the sample work.
    Many themes are using it for theme options. Avada integrate this option, enfold and rehub also have this option now. All are big themes and the user are very happy. because now the title and the price are on same line/height and not jumping anymore. all this without cropping images.

    October 10, 2020 at 8:54 am #232222

    Artem Temos
    Keymaster

    Please, show us an example of such a layout on some of the mentioned themes or activate it temporarily on your website. We will help you to implement a similar layout on your website too.
    Currently, our theme doesn’t have such an option, unfortunately.
    The solution you sent from stackoverflow can’t be applied generally for all products sizes and it works only for that specific case.

    October 11, 2020 at 11:28 am #232397

    tussibag
    Participant

    Another image issue we found:

    Open this product detail page:
    http://funkkeller-weissach.de.dedi5950.your-server.de/produkt/ldg-at-200-pro-ii-automatischer-antennentuner-kw6/

    But you can see the image if you click on zoom or main image:
    It will open the main image in new window:
    http://funkkeller-weissach.de.dedi5950.your-server.de/wp-content/uploads/2020/09/17_0.jpg

    why?

    October 12, 2020 at 5:55 am #232483

    Artem Temos
    Keymaster

    Hello,

    Could you please disable all plugins that are not related to our theme and provide us your admin access so we can check it?

    Thank you in advance

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)