Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #527859

    I am using the Enfold one-page theme and want to know if it is possible to add an image (transparent background PNG file) in place of the caption title on a slide in the full-screen slider? If so how do I do it and will it be “responsive” in resizing on different platforms?
    Thanks in advance.

    #527995

    Hi themeforesttony!

    Sorry, that was a wrong reply.
    I am really sorry about that.

    Cheers!
    Basilis

    • This reply was modified 9 years ago by Basilis.
    #527997

    Hey!

    It is possible to do it, do you want to provide us a link og a page and a screenshot o what you aim to do, so we an help you further?

    Cheers!
    Basilis

    #528037

    Basilis,
    Thanks for responding. Below is a link to a comp of what I am trying to do.
    Full width slider. Instead of Caption title (or in addition) I want to put a PNG image overlay (Raise Your Glass logo) in a fixed position on the slide. I’d like to be able to control relevant positioning and have it responsively autoscale as needed.
    Thanks for any help you can provide.

    #528639

    Hi!

    Can you attach your logo to your image and then upload it to Fullwidth slider?

    Regards,
    Yigit

    #528784

    I can but the issue is the way the slider resizes images. I cannot get it to keep relative size and positioning correct.

    #529031

    Hey!

    Use html tags in the slider caption.

    <img src="URL TO THE IMAGE" class="custom-image">
    

    Use the “.custom-image” selector to adjust the style (position, size etc) of the image on different screen sizes.

    Regards,
    Ismael

    #724220

    Hi Ismael,

    Can you explain or show examples of Use the “.custom-image” selector to adjust the style (position, size etc) of the image on different screen sizes.

    Thanks

    #724284

    Hi,

    Here is an example CSS code

    @media only screen and (max-width: 1024px) and (min-width: 769px) { 
    .custom-image { 
    position: relative; 
    top: 40px; 
    }
    }
    @media only screen and (max-width: 768px) {
    .custom-image { 
    position: relative; 
    top: 20px;
    }
    }

    Best regards,
    Yigit

    #1257606

    Good morning,

    I tried to use HTML tags as suggested but it was escaped.

    Then I tried to fix the special caracters issue as explained here: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#using-special-characters
    ###lt### img src="https://www.rhino3d.com/en/images/Rhino6Logo.svg" class="custom-image"###gt###

    But the code was still escaped (Code displayed instead of the picture)

    Then I tried to fix it as explained here: https://kriesi.at/support/topic/enfold-4-7-1-issue-on-h1/#post-1173344
    But it is even worse, even after removing the html tags the caption is not shown anymore!

    Can you help me?

    Best regards

    #1257755

    Hi Ship-ST,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    #1257958

    Hi Victoria,
    Please find attached a mockup of what I’m trying to do.
    Ideally the logo Rhino® would be displayed as an overlay on the bottom left corner of the slide show, but if it were just below the slide caption it would be ok too.
    Regards
    Matthieu

    #1258702

    Hi Ship-ST,

    It’s better to add this image to the image with Photoshop or use the Layer Slider to be able to achieve this look.

    Best regards,
    Victoria

    #1259202

    Thanks @Victoria,
    I was hoping for something more responsive within the full-screen slider, but I’ll do as you suggest.
    Best Regards

    Matthieu

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Add Image to "caption" on full-screen slider’ is closed to new replies.