Home Forums FAQ Add clickable link on lightbox caption text

Viewing 43 posts - 1 through 43 (of 43 total)
  • Author
    Posts
  • #30777
    Christopher Christou
    Participant
    Purchased
    Supported

    Hello,

    I would like some help regarding the lightbox feature.

    Firstly, I would like to add a a clickable link on the caption text that shows under the images in lightbox. I would like for the link to direct people to my email (info@christopherchristou.com) so that they can inquire if that particular work is available/how to purchase.

    Link should say: Click to inquire.
    The title of the email should be: Inquiry regarding (title of the work the link was present in/applied to).
    The content of the email should be: Hi, I’m interested in this painting. Can you please provide more information about the piece?

    This is an example of a portfolio that has the lightbox feature enabled on my website, with my images having captions underneath them: https://christopherchristou.com/?ux-portfolio=cracked

    At the moment, the images just have a caption.

    Secondly, i would like to make some words in the caption bold and some italic. How can i do this?

    Many thanks for your help in advance.

    Regards,

    C

    #30781
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    The codes should be set in the image caption. I put the codes into the text file here:
    https://www.dropbox.com/scl/fi/3kxeerdgne9mrtp19rd6u/lightbox-mailto-codes.txt?rlkey=hjlhuhg0mp5nam0ulnt6ghdzg&dl=0

    ps:
    – I have to put the codes into a text file, because the codes would change as html codes on the forum input box automatically.
    – Please do not input quotation marks or html tags into image caption, otherwise it will mess up everything. You can encode HTMLcodes via this online tool.


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30785
    Christopher Christou
    Participant
    Purchased
    Supported

    Hello,

    The bold, italic and the link all worked. Many thanks for your help. Really appreciate it.

    Apologies but I forgot to ask what to use if I wanted the text to be both italic and bold simultaneously. I tried to combine both the codes you provided but I’m doing something wrong because it didn’t work.

    Furthermore, I wanted to ask how to align all the caption text to the left but also restrict the sentence (container?) so that it appears as a text block paragraph aligned to the bottom left instead of a straight line sentence under the image. I would like this for both desktop and mobile use please.

    For example, instead of showing this:

    King 5, 2012, Official ten-pin bowling pin, ink and varnish, 38 x Ø 12.1 x Ø 5.2 cm 🔴

    I would like to show something like this:

    King 5, 2012,
    Official ten-pin
    bowling pin, ink
    and varnish, 38 x
    Ø 12.1 x Ø 5.2 cm 🔴

    I already tried using this code in appearance/customize/additional css:

    .pswp__caption__center {
    text-align: match-parent;
    left: 20;
    font-size: 10px;
    width: 30%;
    padding: right;
    content: 30px;
    line-height: 20px;
    color: #CCC;

    and it gave me this result (ON MOBILE VIEW ONLY) which is not what I am looking for:

    https://we.tl/t-OmmJclC0DW

    I would like for both desktop and mobile to show the captions as a text block paragraph aligned to the bottom left as I specified in the above example please.

    Also if you notice in the attached photo, on mobile view, the caption overlays semi-transparently the photo. It only disappears and reappears if I click on the photo. Is there a way to have it showing constantly without needing to click for appear/disappear? And again the position would be bottom left, in a block paragraph.

    Many thanks again for all your help.

    Kind regards,

    C

    #30786
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    if I wanted the text to be both italic and bold simultaneously

    Updated:
    https://www.dropbox.com/scl/fi/3kxeerdgne9mrtp19rd6u/lightbox-mailto-codes.txt?rlkey=hjlhuhg0mp5nam0ulnt6ghdzg&dl=0

    Furthermore, I wanted to ask how to align all the caption text to the left but also restrict the sentence (container?)…
    I already tried using this code in appearance/customize/additional css:
    .pswp__caption__center {
    text-align: match-parent;
    left: 20;
    font-size: 10px;

    Please update the CSS:

    .pswp__caption__center {
        font-size: 10px;
        width: 100%;
        line-height: 20px;
        color: #CCC;
        text-align: left;
    }

    . Is there a way to have it showing constantly without needing to click for appear/disappear?

    Please use the custom CSS:

    .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__top-bar {
        opacity: 1;
    }

    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30789
    Christopher Christou
    Participant
    Purchased
    Supported

    Hi again.

    Thank you for the quick reply.

    The simultaneous bolt and italic worked. Thanks.

    A:
    Updating to this css:

    .pswp__caption__center {
    font-size: 10px;
    width: 100%;
    line-height: 20px;
    color: #CCC;
    text-align: left;
    }

    just made the caption align to the bottom left but as a straight line (one long sentence). I would like for the caption to be both on the bottom left, but also restricted/condensed so that it has to fit in several lines, and preferably not showing under my image at all. I’m not sure if I’m explaining it properly but like I mentioned before, the appearance of the caption should be like this:

    King 5, 2012,
    Official ten-pin
    bowling pin, ink
    and varnish, 38 x
    Ø 12.1 x Ø 5.2 cm 🔴

    instead of this: King 5, 2012, Official ten-pin bowling pin, ink and varnish, 38 x Ø 12.1 x Ø 5.2 cm 🔴

    B:
    Lastly, I copied the custom css the custom and it didn’t work exactly as I wanted. Again maybe I didn’t explain it properly. It enabled the caption to show constantly which is great, but when the caption is long (which it is now, because I added the clickable link) and it has to show on two sentences (or more sentences, if point A can be “fixed”) like in the attached photo, then again like before, the caption shows over my photo as a semi-transparent box. The semitransparent box doesn’t only show on the bottom where the caption is but also on the top part of the photo too (it shows the number of the image in the grid, the sharing buttons etc. but I don’t want to disable the sharing buttons). It is clearly seen in my attached photo.

    https://we.tl/t-fP87UiiTHK

    Ideally I would like for the image height in lightbox to automatically adjust so that it can accommodate the caption (which will be several lines aligned to the bottom left, if point A can be “fixed”)without overlapping the image and without the top overlapping box too. I hope this makes sense.

    Many thanks again for your help and looking forward to hearing from you soon.

    Kind regards,

    C

    #30791
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    A:
    Please update the CSS(you can change 130px for width):

    .pswp__caption { 
        width: auto;
    }
    .pswp__caption__center {
        font-size: 10px;
        width: 130px;
        line-height: 20px;
        color: #CCC;
        text-align: left;
    }
    @media (max-width: 767px) {
      .pswp__caption__center { 
        width: 130px;  /*for mobile*/
     }
    }

    B. Do you mean that you don’t want these icons to show? Check this screenshot.


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30793
    Christopher Christou
    Participant
    Purchased
    Supported

    Hi,

    For A, I’ve updated the CSS and the caption looks like I had in mind. Many thanks for advising on how to do that.

    For B please have a look at the attached images to see exactly what I mean.

    https://we.tl/t-rGJ87l9Cj4

    The desktop view shows fine. The area on top of my image that includes the share buttons and the area below my image that includes the caption, are on top and below the image respectively. They do not overlap my image so this works perfectly for desktop view.

    For mobile view you can clearly see that both these areas, the top (share buttons) and the bottom (caption) are overlapping my image, as indicated by the red arrows I added (attachment: mobile view 1). I would like for my images to show in their full height between the top (share buttons) and bottom (caption) areas. I have marked this area in a green arrow to show you what I mean (attachment: mobile view 2).

    Is there a way for the height of my images to adjust/change automatically to fit between the top and bottom areas, so that these areas don’t overlap my images? I do not want my images to be cropped but to be automatically adjusted to fit. The height seems to work for desktop at the moment, but not for mobile view. If there is CSS that I can add to do that, then could we please do it for both desktop and mobile view, because I am planning to add even bigger/taller images in the future, so I would need them to automatically adjust to fit for both mobile and desktop view.

    Many thanks again for your time and help.

    Kind regards,

    C

    #30794
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi
    It cannot automatically and accurately judge whether the bottom of the picture overlaps with the caption. This is because the lightbox plugin automatically sets the picture size through the script rather than CSS according to the specific viewport situation. We can only set an approximate height of 70vh, which means 70% of the viewport height.

    @media (orientation: portrait) {
      .pswp__zoom-wrap { 
         top: 45px;
      }
     .pswp__img { 
     object-fit: contain; 
     height: 70vh!important;
     }
    }

    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30797
    Christopher Christou
    Participant
    Purchased
    Supported

    Hi,

    Setting the approximate height of 70vh worked for these particular images. Thank you very much. Hopefully it will continue working once I start uploading larger photos.

    I would like to ask a couple of more questions please.

    1) The “Disable download only” option for lightbox does not seem to work. I have enabled the button for “Disable download only” in the arththeme lightbox/content settings but it only works for desktop use and doesn’t work for mobile. For mobile the share arrow is present, but when I click on it makes the share box appear for a fraction of a second and then disappears. I do not want to disable all the sharing options. I just want to disable the ability to download images, that’s all. Like I already said, this works fine on desktop, but doesn’t on mobile. Your help in this would be very much appreciated.

    2) General question for lightbox: if I install a lightbox WordPress plugin that would give me more customizations than the current ones on the arttheme, would it override the theme’s lightbox settings or would the default settings that I have setup in the theme be in effect?

    Many thanks for all your help again.

    Kind regards,

    C

    #30798
    Christopher Christou
    Participant
    Purchased
    Supported

    Oh and another thing.

    The captions seemed to work fine yesterday but today they are being cropped a little bit in the BOTTOM LEFT CORNER when viewing them from my mobile.

    Is it possible to:

    a) add some gap (not much) between the caption and the left side of my mobile screen?
    b) add some gap (not much) between the caption and the bottom side of my mobile screen?

    Not sure how to do this, padding maybe? I’m thinking that if the gap between left and bottom sides of the screen is slightly bigger then the caption might not be cropped in the bottom left corner.

    Many thanks again.

    Kind regards,

    C

    #30806
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    1. I have carried out the test on my mobile phone and did not reproduce this problem.
    2. This is hard to say and needs to be tested to know. I think there will probably be some problems.
    3. You can add padding into the CSS:

    @media (max-width: 767px) {
        .pswp__caption__center {
            width: 130px; 
        }
    }

    It should be:

    @media (max-width: 767px) {
        .pswp__caption__center {
            width: 130px;
            padding-left: 20px;
            padding-bottom: 20px;
        }
    }

    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30810
    Christopher Christou
    Participant
    Purchased
    Supported

    Hello,

    I made the adjustment in CSS and it works for those images/portfolio now. Thank you.

    I have moved on to copy all the above in the captions of other images (in other portfolios) that have different dimensions than the ones we’ve been discussing so far and I have the same problem of the caption overlapping the image. I thought this is probably because these images have different dimensions than the ones before, so I did a few tests to resize them (scale down) but they still didn’t work. If you look at the attached images they have the following dimensions:

    https://we.tl/t-Z5IKhNZwxY

    1) 2132 x 2547 pixels
    2) 1590 x 1900 pixels
    3) 1250 x 1500 pixels
    4) 837 x 1000 pixels

    I have reduced the size/dimensions of the same image significantly but it still didn’t work, so the height of the image is obviously not the problem and I really don’t know what to do. This issue is proving more complicated than it needs to be, so I’m kindly asking your opinion on what would be the best way to solve it because I still have a lot of content/images to upload on the site and they are all different dimensions.

    Like I already mentioned I would just like to insert my images and for them to be automatically scaled up or down to fit the space/container between the top and bottom spaces that contain the share buttons and the captions.

    I already tried something like this:

    img {width:100%; height:auto}

    but it still didn’t work, so I don’t know what to do.

    Your help is greatly appreciated. Thank you.

    Kind regards,

    C

    #30815
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi
    Please provide more information before we can offer a plan. The key to this problem is the “ratio” of the pictures.
    – How many ratios of pictures will there be?
    – Will one page display pictures of one ratio or multiple ratios? (Like this page https://christopherchristou.com/?ux-portfolio , there is only one ratio for now).

    Another key is that the width of the caption container cannot be fixed as the same size, otherwise it will definitely cover the picture, and for this picture it is like this: https://www.dropbox.com/scl/fi/jd5fg258hx9dgvafhgfn2/qq_20240529100411.png?rlkey=1f6xg7opobdsawnu6wj7goes0&dl=0


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30817
    Christopher Christou
    Participant
    Purchased
    Supported

    Hello,

    Please see answers to your questions below.

    1)– How many ratios of pictures will there be?

    There will be many different picture ratios. The only galleries/portfolios that have multiple images with the same/similar image ratios are the ones that we have been discussing already. Everything else will have different ratios all the time.

    2) – Will one page display pictures of one ratio or multiple ratios? (Like this page https://christopherchristou.com/?ux-portfolio , there is only one ratio for now).

    One page will display images of multiple ratios.

    3) Another key is that the width of the caption container cannot be fixed as the same size, otherwise it will definitely cover the picture, and for this picture it is like this: https://www.dropbox.com/scl/fi/jd5fg258hx9dgvafhgfn2/qq_20240529100411.png?rlkey=1f6xg7opobdsawnu6wj7goes0&dl=0

    I don’t really understand your point here. If the captions have a fixed width but the images and the image area/space/container has a flexible/fluid height, then it should adapt/resize itself automatically to the available space between the top and bottom caption containers. This is what I had in mind. This way it doesn’t matter what the aspect ratio is for any of the images that I will upload, because it would automatically adjust (based on height) to fit the area.

    Many thanks again.

    Kind regards,

    C

    #30818
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    This lightbox plugin always fills the picture as much as possible, and it will not adapt to the caption. What I mean is that the width of this caption container cannot be set as a fixed value. Currently, it is 130 px and should be set as auto.
    Please remove the width: 130px; from the custom CSS.

    @media (max-width: 767px) {
    .pswp__caption__center {
            width: 130px;
            padding-left: 20px;
            padding-bottom: 20px;
        }
    }
    .pswp__caption__center {
        font-size: 10px;
        width: 130px;
        line-height: 20px;
        color: #CCC;
        text-align: left;
    }
    

    According to the situation you provided, you need to manually add line breaks(<br> tag) to the text of the caption. check sample:
    https://www.dropbox.com/scl/fi/kwcgeg64b7pxvr1md7u2s/qq_20240529161819.png?rlkey=oikj5wfbgnx2v4zv0owi76f22&dl=0


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30819
    Christopher Christou
    Participant
    Purchased
    Supported

    Hi,

    1) I took out the 130px widths and replaced them with auto. It didn’t work (please see the images in the attached link). It makes the caption back to what I originally had (straight line) at the beginning of this thread.

    2) This lightbox plugin always fills the picture as much as possible, and it will not adapt to the caption.
    I think it clearly doesn’t as you can see from the two attached files that I attached in the link. It always leaves gaps either above or below the images.

    3) What I mean is that the width of this caption container cannot be set as a fixed value. Currently, it is 130 px and should be set as auto.
    Please remove the width: 130px; from the custom CSS.

    In the CSS below I have replaced both the widths from 130px to auto. I only did this because of previous consultation in this thread telling me to do that since I want the width to be restricted to make the caption NOT appear as a whole straight sentence but as paragraph made up of many sentences on top of each other (please see the images in my previous links).

    @media (max-width: 767px) {
    .pswp__caption__center {
    width: 130px;
    padding-left: 20px;
    padding-bottom: 20px;
    }
    }
    .pswp__caption__center {
    font-size: 10px;
    width: 130px;
    line-height: 20px;
    color: #CCC;
    text-align: left;
    }
    4) According to the situation you provided, you need to manually add line breaks(<br> tag) to the text of the caption. check sample:
    https://www.dropbox.com/scl/fi/kwcgeg64b7pxvr1md7u2s/qq_20240529161819.png?rlkey=oikj5wfbgnx2v4zv0owi76f22&dl=0

    I do not understand what you mean by this last point. I obviously do not know how to code, that is why I am asking for all this help here.

    Could you please clarify on all of the points above? Many thanks again for all of your help.

    PS. This is everything I have in the additional CSS section at the moment. Please see below. There’s a couple of other things in the CSS not relating to the lightbox, but apart from those if anything here is typed wrongly that could be causing problems, could you please advise?

    Kind regards,

    C

    .pswp__caption {
    width: auto;
    }

    .pswp__caption__center {
    font-size: 10px;
    width: 100%;
    line-height: 20px;
    color: #CCC;
    text-align: left;
    }

    .pswp__ui–hidden .pswp__button–arrow–left, .pswp__ui–hidden .pswp__button–arrow–right, .pswp__ui–hidden .pswp__caption, .pswp__ui–hidden .pswp__top-bar {
    opacity: 1;
    }

    .pswp__caption {
    width: auto;
    }
    .pswp__caption__center {
    font-size: 10px;
    width: auto;
    line-height: 20px;
    color: #CCC;
    text-align: left;
    }
    @media (max-width: 767px) {
    .pswp__caption__center {
    width: auto;
    padding-left: 20px;
    padding-bottom: 20px;
    }
    }

    @media (orientation: portrait) {
    .pswp__zoom-wrap {
    top: 50px;
    }
    .pswp__img {
    object-fit: contain;
    height: 60vh!important;
    }
    }

    .page-loading .sea-marquee {
    width: 2000px;
    }

    .menu-panel .navi li {
    text-align: center;

    #30820
    SeaTheme
    Keymaster
    Purchased
    Expired

    In the CSS below I have replaced both the widths from 130px to auto. I only did this because of previous consultation in this thread telling me to do that since I want the width to be restricted to make the caption NOT appear as a whole straight sentence but as paragraph made up of many sentences on top of each other (please see the images in my previous links).

    Yes, it will restore to the previous way of a whole line. This CSS cannot meet your needs, so it should be deleted. The new solution is to manually add a line break to the caption of each picture .

    For example, the caption you set before, after adding the line break, it will become like this.
    https://www.dropbox.com/scl/fi/jjf2rfc3ivol56sipljzj/qq_20240529201009.png?rlkey=20halc3uoxn11y39wcbu0asnh&dl=0
    https://www.dropbox.com/scl/fi/9je3n1wmgou1hlsz568uz/qq_20240529200844.png?rlkey=dhebege8igeye780fusof3dqp&dl=0

    sample code for a caption: https://www.dropbox.com/scl/fi/3kxeerdgne9mrtp19rd6u/lightbox-mailto-codes.txt?rlkey=hjlhuhg0mp5nam0ulnt6ghdzg&dl=0

    #30821
    Christopher Christou
    Participant
    Purchased
    Supported

    I have deleted everything from CSS. The only things I have kept are these. This is how my CSS looks like now

    .pswp__ui–hidden .pswp__button–arrow–left, .pswp__ui–hidden .pswp__button–arrow–right, .pswp__ui–hidden .pswp__caption, .pswp__ui–hidden .pswp__top-bar {
    opacity: 1;
    }

    .page-loading .sea-marquee {
    width: 2000px;
    }

    .menu-panel .navi li {
    text-align: center;

    A) I don’t know if this correct or what you meant, can you please advice on that?
    —————————————————————————————————————————————————————–
    I have copied the sample code for a caption: https://www.dropbox.com/scl/fi/3kxeerdgne9mrtp19rd6u/lightbox-mailto-codes.txt?rlkey=hjlhuhg0mp5nam0ulnt6ghdzg&dl=0

    that you have provided. I have attached 4 photos of how it looks with images of different dimensions. Please see attached:

    https://we.tl/t-do4mmX0E6y

    The sample caption works as I wanted and it displays on many sentences, so that’s great.

    B) All captions for all images should be aligned on the left of the screen though, can you please advice on that? (Without adding to the CSS I guess).
    —————————————————————————————————————————————————————–
    On the images I have marked everything that didn’t work with red and everything that did work with green.

    Image 1: top and bottom caption area/share button area overlapping image, caption full width (this was before adding the page breaks like you advised), needs left alignment
    Image 2 (same image as 1): top and bottom caption area/share button area overlapping image, needs left alignment
    Image 3: needs left alignment
    Image 4: needs left alignment

    C) So basically only attached images 1 and 2 which are the same image have a problem. Because there images have the biggest/tallest height dimensions, again I have tried to resize/scale down one of them as a test but it still didn’t work, and the captions were still overlapping the image. So the manual line break to each caption still displays images with the same overlapping issue. Can you please advise?

    Again many thanks for your help.

    Kind regards,

    C

    #30823
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi
    Please update the current CSS to:

    .pswp__ui–hidden .pswp__button–arrow–left, .pswp__ui–hidden .pswp__button–arrow–right, .pswp__ui–hidden .pswp__caption, .pswp__ui–hidden .pswp__top-bar {
      opacity: 1;
    }
    .page-loading .sea-marquee {
      width: 2000px;
    }
    .menu-panel .navi li {
      text-align: center;
    }
    .pswp__caption { 
        width: auto;
    }
    .pswp__caption__center {
        font-size: 10px; 
        line-height: 20px;
        color: #CCC;
        text-align: left!important;
    }
    @media (orientation: portrait) {
      .pswp__zoom-wrap { 
         top: 50px;
      } 
    }
    @media (max-width: 767px) {
        .pswp__caption__center { 
            padding-left: 20px;
            padding-bottom: 20px;
        }
    }

    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30824
    Christopher Christou
    Participant
    Purchased
    Supported

    Hi,

    Why are you asking me to add this CSS again when it previously didn’t work and in your earlier response you said to delete it?

    THIS IS WHAT YOU SAID. Yes, it will restore to the previous way of a whole line. This CSS cannot meet your needs, so it should be deleted. The new solution is to manually add a line break to the caption of each picture .

    Regardless, I have done what you suggested and updated the CSS to what you said in your final message and it doesn’t work again. Same problems as before (have a look at the attached photos).

    https://we.tl/t-LiPzbws0i5

    Many thanks again.

    Kind regards,

    C

    #30825
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Why are you asking me to add this CSS again when it previously didn’t work and in your earlier response you said to delete it?

    My suggestion is to ONLY remove the width: 130px;, but you removed most of the codes.

    Same problems as before (have a look at the attached photos).
    https://we.tl/t-LiPzbws0i5

    Please ADD the CSS codes:

    @media (orientation: portrait) { 
    .pswp__img {
      object-fit: contain;
      height: 60vh!important;
     }
    }

    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30826
    Christopher Christou
    Participant
    Purchased
    Supported

    Hi,

    It got confusing on what to keep and what to remove. Anyway I have added the above CSS you suggested but it still doesn’t work.

    The bowling pins work but the telephones and sewing machines don’t. Please see the images attached.

    https://we.tl/t-n8zGJdueMn

    The captions still overlap the telephones

    The sewing machine images are aligned to the bottom of the screen just on top of the caption, leaving a big gap above the image. (ideally the images should be centered vertically too). The caption also overlaps the image on one of the attached images of a sewing machine.

    Another issue is that when you are swiping up on the phone (when viewing the grid outside of the lightbox)and then click on any image, the lightbox that opens forces the caption even higher up, overlapping the image even more (please see attached). This happens on the telephones and sewing machines but not the bowling pins for some reason.

    Thanks again.

    Regards,

    C

    #30827
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    Please change the CSS refer the screenshot: https://www.dropbox.com/scl/fi/otxnet7he2hsuqgdqxpyn/qq_20240531091716.png?rlkey=dp4xhswpeundpgbdllmgp0fgp&dl=0

    ps: please also leave the issued webpage URL if it does not work
    Thanks


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30829
    Christopher Christou
    Participant
    Purchased
    Supported

    Hi,

    I have changed the CSS to what you recommended in the screenshot. There was some code that was not present on your screenshot. This is how my CSS looks now:

    .pswp__ui–hidden .pswp__button–arrow–left, .pswp__ui–hidden .pswp__button–arrow–right, .pswp__ui–hidden .pswp__caption, .pswp__ui–hidden .pswp__top-bar {
    opacity: 1;
    }

    .page-loading .sea-marquee {
    width: 2000px;
    }

    .menu-panel .navi li {
    text-align: center;
    }
    .pswp__caption {
    width: auto;
    }
    .pswp__caption__center {
    font-size: 10px;
    line-height: 20px;
    color: #CCC;
    text-align: left!important;
    }

    @media (max-width: 767px) {
    .pswp__caption__center {
    padding-left: 20px;
    padding-bottom: 20px;
    }
    }

    @media (orientation: portrait) {
    .pswp__img {
    object-fit: contain;
    height: 80vh!important; object-position:center;
    }
    }

    Can you please confirm if this what you meant?

    Regarding the lightbox, it still doesn’t work. Please see attached.

    https://we.tl/t-6lvoYo7Ntp

    Same issues as before. I have attached 6 images. 2 of a sewing machine, 2 of bowling pin and 2 of telephone. You can see from the photos that the same problems exist. These are webpage URLs for the attached images.

    https://christopherchristou.com/?ux-portfolio=sewing-machines#&gid=1&pid=5

    https://christopherchristou.com/?ux-portfolio=cracked#&gid=1&pid=28

    https://christopherchristou.com/?ux-portfolio=colour-telephones-portfolio#&gid=1&pid=11

    Many thanks.

    Regards,

    C

    #30835
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    Find the CSS:

    @media (orientation: portrait) {
    .pswp__img {
    object-fit: contain;
    height: 80vh!important; object-position:center;
    }
    }

    update to:

    @media (orientation: portrait) {
    .postid-3279 .pswp__img {
    object-fit: contain;
    height: 80vh!important;
    object-position: 50% calc(50% + 50px);
    }
    }

    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30836
    Christopher Christou
    Participant
    Purchased
    Supported

    Hello,

    I have updated the CSS to what you recommended above but it still doesn’t work. Same issues.

    Regards,

    C

    #30838
    SeaTheme
    Keymaster
    Purchased
    Expired

    Please find:

    @media (orientation: portrait) {
    .postid-3279 .pswp__img {
    object-fit: contain;
    height: 80vh!important;
    object-position: 50% calc(50% + 50px);
    }
    }

    update to:

    @media (orientation: portrait) {
    .postid-3997 .pswp__img {
    object-fit: contain;
    height: 80vh!important;
    object-position: 50% calc(50% + 50px);
    }
    }

    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30841
    Christopher Christou
    Participant
    Purchased
    Supported

    Hello

    Just updated the CSS.

    It works for the sewing machine photos but not for everything else. Please see attached images.

    1) For the telephones and bowling pins it doesn’t work when I scroll up in grid mode/view to find an image. When I scroll up to find an image that I want to see and click on it, then the browser links bar appears on the bottom of my screen, which seems to take up space on the screen and forces the caption to overlap my images.

    When I scroll down then it works because the browser links bar disappears and there’s more available screen space to accommodate the image and the caption without overlapping.

    You can see all of this in the attached images below.

    https://we.tl/t-HRE04Kv1UW

    2) I added another image which is completely different to test this out and it doesn’t work either way (please see second link).

    https://we.tl/t-5Jpd6R101U

    I tested this because I will be adding all of my images/galleries/portfolios in this way and don’t want to have the same issue with everything.

    Many thanks again.

    Regards,

    C

    #30846
    SeaTheme
    Keymaster
    Purchased
    Expired
    This reply has been marked as private.
    #30853
    Christopher Christou
    Participant
    Purchased
    Supported
    This reply has been marked as private.
    #30858
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    Sure, you can try to do it.
    Remove some CSS, and add the CSS:

    .iOS .pswp__img {
      object-fit: contain;
      padding:30px;
    }  

    following the screenshot: https://www.dropbox.com/scl/fi/neb7ygr92ovwb1okdk7v2/qq_20240603084448.png?rlkey=jn07ohfisdltzbpnd5vnytku6&dl=0


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30864
    Christopher Christou
    Participant
    Purchased
    Supported

    Hello,

    Thank you for your suggestion. The above CSS you recommended worked for my phone which is an iPhone but it does not work on android phones (please see attached images).

    https://we.tl/t-KpuRDyBjb0

    I noticed that the CSS you recommended has iOS in it. Can I add something similar to include android devices too?

    Many thanks.

    Regards,

    C

    #30869
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    Please remove .iOS , update to:

    .pswp__img {
      object-fit: contain;
      padding:30px;
    }  

    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30881
    Christopher Christou
    Participant
    Purchased
    Supported

    Hello,

    Thank you so much for your time and help. The above CSS seems to work for both android and iOS but with a minor glitch.

    I am currently uploading more images of different dimensions to complete some more galleries/portfolios and to also test this CSS further.

    I’ll get back to you shortly with an update on how the rest of the images look and if everything works.

    Thanks again.

    Regards,

    C

    #30882
    Christopher Christou
    Participant
    Purchased
    Supported

    Hi,

    Apologies for writing again but I think I might have confused the code for the captions because most of the images in the bowling are being overlapped by the captions again.

    I am currently using this:

    <b><i>King 2</i></b>, 2012, Official ten-pin bowling pin,<br> ink and varnish, 38 x Ø 12.1 x Ø 5.2 cm "🔴" <b><i><br>This work is available by<br> commission. Click here to inquire.</i></b&gt

    I’m just copy/pasting this and changing the appropriate title names etc.

    Is this correct?

    Could you please help?

    Many thanks again,

    Regards,

    C

    #30884
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    The HTML tags are not recommended to be directly input.
    Please encode HTMLcodes via this online tool.


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30885
    Christopher Christou
    Participant
    Purchased
    Supported

    I do not understand what you mean.

    You’ve recommended this online tool before but it didn’t work.

    Regards,

    C

    #30886
    Christopher Christou
    Participant
    Purchased
    Supported

    Sorry I am using this code on the captions:

    <b><i>King 2</i></b>, 2012, Official ten-pin bowling pin,<br> ink and varnish, 38 x Ø 12.1 x Ø 5.2 cm "🔴" <b><i><br>This work is available by<br> commission. Click here to inquire.</i></b&gt

    which is what you recommended. I am also using the
    CSS you recommended in customize appearance.

    But I am still getting the same problems with overlapping captions.

    Regards,

    C

    #30887
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi, welcome

    in the bowling are being overlapped by the captions again.
    I am currently using this:
    <b><i>King 2</i></b>, 2012, Official ten-pin bowling pin,<br> ink and varnish, 38 x Ø 12.1 x Ø 5.2 cm "🔴" <b><i><br>This work is available by<br> commission. Click here to inquire.</i></b&gt
    I’m just copy/pasting this and changing the appropriate title names etc.
    Is this correct?

    The <br> is for line break. You need to manually adjust the number of lines of the caption of each picture. If the number of lines of the caption is too few, You can increase several <br> tags within the caption, that is, make a line break at the <br>. On the contrary, you can reduce <br>s.
    If there are still issues, please also leave the issued page URL.
    Thanks!


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30889
    Christopher Christou
    Participant
    Purchased
    Supported

    Hi,

    I understand that <br> is for line break but this does not solve the problem. The more line breaks I add the more sentences I create. More sentences on top of each other, mean that the caption is even higher (taller) and therefore overlapping the image even more. I don’t want any caption to overlap any of the images. At all. Removing <br> line breaks does not solve the problem either because, yes it causes less sentences but the caption is really long in relation to the image and that is not how I want it to look.

    I believe the solution should be with regards to the images being able to adapt to the space/area available, regardless of how big/tall the caption is.

    I’ve been trying to solve this for a long time now, following all of your recommendations but nothing works. A few messages ago you asked me to give you access so you could find a solution. Could I please still do that?

    Many thanks,

    Regards,

    C

    #30890
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    I explain the current solution:
    This Lightbox is impossible to realize the automatic adaptation of pictures and captions, and the pictures cannot automatically stretch and contract according to the height of the caption. The current solution is to add a fixed inner padding(30px) to all pictures via the CSS.

    .pswp__img {
      object-fit: contain;
      padding:30px;
    }  

    In this way, the height of the caption can be adjusted manually through the line break <br>.

    ===========

    We can further optimize this solution : adding different inner padding for pictures of different proportions (width-to-height ratio). For example, add more space for a vertical picture like the bowling. Does this meet your requirements?


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

    #30892
    Christopher Christou
    Participant
    Purchased
    Supported

    Hello,

    Thank you for your explanation. The page break relationship to the padding seems to be a good temporary workaround for this issue although not ideal because the current padding that I have set (45px) which is the closest I can have, without the caption overlapping the vertical/portrait images, also makes the landscape images very small which is not ideal. I will inform you on how other landscape images, (that have a longer height than the current sewing machine photos), that I will be uploading in the next days, look.

    I do hope that this issue is addressed in a future update maybe. I believe that the lightbox should have more adaptability features through the BM content builder, for a theme such as this, which is predominantly about the appearance of art in galleries.

    Also can you please help me with the following? I currently have a red circle emoji in the caption for sold items. How can I add a green circle emoji for available items please? Pasting the green circle emoji in the caption didn’t work, neither did swapping the Unicode to the right one on this URL: https://s.w.org/images/core/emoji/15.0.3/svg, that you have inserted in the sample caption code below. Could you please help?

    <b><i>Deer</i></b>,
    2012, Official ten-pin bowling pin,<br>
    ink and varnish,38 x Ø 12.1 x Ø
    5.2 cm <img draggable="false" role="img"
    class="emoji" alt="🔴"
    src="https://s.w.org/images/core/emoji/15.0.3/svg/1f534.svg"&gt;
    <b><i><br>Available by commission. Inquire here.

    Many thanks for your help.

    Regards,

    C

    #30893
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Please find a link address of a green circle file, like this red picture file link https://s.w.org/images/core/emoji/15.0.3/svg/1f534.svg.

    The address https://s.w.org/images/core/emoji/15.0.3/svg is not a picture file link address, so it won’t work. A file link address format should be https://xxx.svg


    Regards!
    SeaTheme – FAQsWordPress CustomizationFacebook

Viewing 43 posts - 1 through 43 (of 43 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!