Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • February 26, 2020 at 10:20 am #1188007
    AmelC

    Hello,

    can you please have a look at the screen shot, link is posted in a private section.
    What I am looking for is to use “Gallery” square thumbnail layout in a portfolio page..

    Thank you
    Best regards
    Amel

    February 27, 2020 at 6:59 pm #1188561
    Victoria

    Hey AmelC,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    March 2, 2020 at 3:43 pm #1189463
    AmelC

    Hello Victoria,

    thank you for the reply, please see login url as well as login credentials in the Private Content section…

    Best regards
    Amel

    March 10, 2020 at 5:04 am #1191690
    Ismael

    Hi,

    Thank you for the update.

    Would you like to create spaces around the portfolio items? If yes, please use this code in the Quick CSS field or the style.css file.

    .grid-entry {
	padding: 10px;
}

    Best regards,
    Ismael

    March 10, 2020 at 1:20 pm #1191810
    AmelC

    Hello,

    thank you for the reply. It`s not working just tried to modify the code, and this is how the code looks like now, maybe I did something wrong, NOTE there is also other CSS that are modified and in use so your suggestion is located at the bottom of the code:

    The code is added in “General Styling” – “Quick CSS” 

    img.mfp-img {
    padding: 0 !important; 
    margin: 40px auto !important; 
    border: white 2px solid !important; 
}
.mfp-bottom-bar {
    margin-top: 10px !important; 
}
div.avia-popup .mfp-close {
    top: -35px !important; 
}
html {  background-color:  #FFFFFF !important }
}
.grid-entry {
	padding: 10px;
}

    What I want here is 2 things:

    1. make spacing between images yes just as you understood
    2. but also make those images 1:1 square thumbnails and add some fixed size so images do not spread over the entire window when user maximizes the browser window.

    Best regards
    Amel

    • This reply was modified 4 years, 8 months ago by AmelC.
    March 11, 2020 at 3:22 pm #1192314
    Ismael

    Hi,

    There is an extra curly brace above the css code, so it breaks.

    }
.grid-entry {
	padding: 10px;
}

    You have to remove the closing curly brace. And please don’t forget to toggle the Performance > File Compression settings after adding the code.

    Best regards,
    Ismael

    March 11, 2020 at 3:34 pm #1192320
    AmelC

    can you please modify my entire code from my previous post as I can not get it working…
    Also how can I get those images (thumbnails) displayed in 1:1 ? and not stretched over the entire screen when window is maximized ?

    Best regards
    Amel

    • This reply was modified 4 years, 8 months ago by AmelC.
    March 16, 2020 at 4:29 am #1193379
    Ismael

    Hi,

    Sorry for the delay. We have added the code in the Quick CSS field, removed the extra curly brace and disabled the Performance > File Compression settings temporarily to reload the stylesheets. The css code should create space between the portfolio grid items.

    Best regards,
    Ismael

    March 16, 2020 at 10:20 am #1193416
    AmelC

    Hello,

    no prob, it´s ok, seems to be working fine now yes, is it possible to get these thumbnails in 1:1 format ? 100% square ? and locked thumbnail image size so they not get bigger when user maximises the browser window ?

    Thank you for helping !!

    Best regards
    Amel

    March 18, 2020 at 3:38 am #1193971
    Ismael

    Hi,

    This may be possible, but you have to make sure that the images uploaded in the gallery have the same size and aspect ratio. Do the images in the gallery have the same dimension?

    Best regards,
    Ismael

    March 18, 2020 at 11:32 am #1194071
    AmelC

    Hello,
    thank you for reply.

    No, my images do not have the same “real” dimension no… but why should this be important ? I have seen many themes that creates 1:1 squares where images do not have same real size… but script “crops” them on the fly or what so ever .. but I have seen it..

    Also how can these rectangles that I have now be the same size when some images are vertical when viewed as big images … ? in short how can these rectangular thumbnails have the same size when images are different sizes and crop, some of my images are 1:1 in real, some are portrait based etc…

    Just asking…

    Thank you for the reply
    Best regards
    Amel

    March 23, 2020 at 5:35 am #1195353
    Ismael

    Hi,

    We forgot to mention that the width of the items or columns in the grid is relative to the width of the browser view port or the screen resolution of the device, so the size of the images doesn’t really matter. The items or columns will resize automatically based on the current screen width and the images inside will just inherit the width of their parent container, so it’s not possible to keep the items’ aspect ratio to 1:1 or to keep them square in all screen sizes. It’s still possible, but we have to replace the Portfolio Grid with the Masonry or the Masonry Gallery element and set the Styling > Masonry Settings > Size Settings to Perfect Grid.

    Best regards,
    Ismael

    March 27, 2020 at 1:25 pm #1198325
    AmelC

    Hello,

    ok, thank you for the reply. I do not like Masnory styled layout that is the main reason why I do prefer 1:1 for thumbnails..
    But can I use “Masnory” and modify it to be 1:1 in that case perhaps ?

    Best regards
    Amel

    April 1, 2020 at 12:02 pm #1199704
    Ismael

    Hi,

    Yes, if you set the Styling > Masonry Settings > Size Settings to Perfect Grid, the aspect ratio of the items in the grid should be 1:1.

    Best regards,
    Ismael

    April 9, 2020 at 1:13 pm #1202268
    AmelC

    Hello again,

    yes I tried it but than I just get the Masnory styled images and not exact 1:1 … but ok we can leave it as it is now..

    thank you
    Best regards
    Amel

    April 13, 2020 at 10:34 am #1203260
    Ismael

    Hi,

    Alright then. Sorry if we are not able to help you this time. Please don’t hesitate to open a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘gallery layout on portfolio page’ is closed to new replies.