-
Posts
-
Hi,
I am trying to create my first ajax portfolio with Enfold!1- I have inserted a portfolio grid on a page with ajax portfolio option. Then I have created 2 portfolio entries that display in the grid.
But I don’t manage to build my own layout for display each portfolio entry, as shown in the video tutorial. I just want to display a bigger image, with a very small text, and a very large image in a light box if clicked. It is a 2 colums layout that displays: my image on the left, and a big empty area on the right…2- How can I customise the light box backgroung? Color and transparency? How can I remove the image file name?
3- I am wondering if portfolio grid images are automatically generated, reframed?
Many thanks,
Hey v_alard!
Thank you for using Enfold.
1.) You can placed the ajax info in the Ajax Portfolio Preview Settings. The contents in the editor will show in the right column of the ajax preview.
2.) You can modify the lightbox with css. Add it on the Quick CSS field. If you want to remove the file name, use this:
.mfp-bottom-bar { display: none; }3.) It’s possible to select a predefined thumbnail. Set the Portfolio Grid Image Size to the second option then choose the thumbnail size that you want.
Best regards,
IsmaelHi,
1- I did not succeed to build a specific layout for displaying Ajax portfolio entries as shown in the video tutorial by using “Avia Builder”. It doesn’t seem to work. Only short code can be inserted to configure Ajax Portfolio. As a result, it is not as well easy as I hoped for it. And I am wondering if it is possible to configure a 3/4 1/4 layout. I just need a very small area to insert text near the image.
Furthermore I don’t understand how to set the size of images. I am lost with the different sizes of images: thumnail (grid portfolio), portfolio items in the ajax portfolio, images in the light box. Should I prepare the same image into different sizes or are they automatically generated from the biggest one? At the moment, it looks like images are randomly resized and reframed but I need a perfect design. Could you help me to fix this issue?
2- OK. Could you also give me the css code to set the color and the opacity background of the lightbox?
3- (1)
Many thanks,Hey!
1.) Can you show us what you mean? a link to the site in question would help.
I think it will be possible to use a 3/4 + 1/4 layout. If you need to decrease the size for your text near the image, we might be able to provide you some CSS for it. We just need a link showing the elements in question :).Wordpress automatically resizes images when uploading. You can control it using this plugin: https://wordpress.org/plugins/simple-image-sizes/
2.) Can you show us the lightbox please? Try this code:
.mfp-bottom-bar { background-color: red; opacity: 0.5; }3.) – (1)
Regards,
AndyHi!
1.) Use this in the Quick CSS field to change the background overlay of the lightbox:
.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader { opacity: 1 !important; background-color: #ffffff !important; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #000000 !important; }2.) Can you please provide a screenshot of the layout that you want? The grid will automatically adjust according to the height of the images so using images with different height and ratio not going to work if you want a consistent grid. Try to create a custom canvas for all the paintings. Place the painting in the canvas before uploading them. You can do this using photoshop or any image editor. Basically, we want all images to be the same in width and height.
3.) You can’t use the advance layout builder to create the ajax preview. Like I said, you need to add the content in the Ajax Portfolio Preview Settings. The left column of the ajax preview will display the portfolio gallery or slideshow, and the right column will display the content. You can use use the advance layout builder to build the actual portfolio item page.
4.) Go to Settings > Media then adjust the Large Thumbnail. Set the width and height to 9999.
Regards,
IsmaelHi Ismael,
1- Thank you! This ccs code works well! Just a little issue with the color of the navigation arrows in the lightbox! I need to customise the color of this element! Could you please provide me the css?
2- Understood. However, I am interested to know the way to increase the preview image size and reduce the right column width.
3- OK!
4- OK!
5- In the portfolio grid: is it possible to change the order of sorting options.
For the time being here is how it is displayed “Tout / 2008 / 2013 / 2014 / 2015 / De 2007 à 2010 / Œuvres récentes” while I would need to display it that way “Tout / Œuvres récentes / 2013 / 2014 / 2015 / De 2007 à 2010 / 2008”6- Could you please provide me with the ccs code to reduce the size and change the color of the icon that display on the portfolio grid thumnails on mouse over.
Thank you once more for your help!
Hey!
1.) Use this code to control color of the arrows:
button.mfp-arrow.mfp-arrow-right.mfp-prevent-close { background-color: red; } button.mfp-arrow.mfp-arrow-left.mfp-prevent-close { background-color: blue; }2.) Use this code to increase image size of your grid layout:
img.attachment-medium.wp-post-image { width: 120%; max-width: 120%; }and adjust as needed.
Please use new tickets for new questions!
5.) Refer to this answer: https://kriesi.at/support/topic/portfolio-items-ordering/#post-281549
6.) Use this code:
#top .header_color .image-overlay .image-overlay-inside:before, #top .main_color .image-overlay .image-overlay-inside:before, #top .alternate_color .image-overlay .image-overlay-inside:before, #top .footer_color .image-overlay .image-overlay-inside:before, #top .socket_color .image-overlay .image-overlay-inside:before { color: red; background-color: blue; width: 70px; height: 70px; }and adjust as needed.
Cheers!
AndyHi Andy! Thanks for your quick reply!
It is OK for me excepted the 5/ and 6/ but I am going to create new tickets for news questions!
Regards,
- The topic ‘Ajax portfolio layout’ is closed to new replies.