Viewing 30 results - 1,201 through 1,230 (of 106,459 total)
  • Author
    Search Results
  • #1486058

    Hey rajprajapati,
    It is under “Content Elements”
    Screen Shot 2025 06 27 at 5.35.34 PM

    Best regards,
    Mike

    #1486047

    In reply to: lightbox issues

    by the way – sometimes the original image is missing – f.e. : https://www.ullaheegaard.dk/stg_6019f/wp-content/uploads/2018/01/Tillid.jpg
    – only the https://www.ullaheegaard.dk/stg_6019f/wp-content/uploads/2018/01/Tillid-700x700.jpg exists.
    Therefore, I changed the code above so that it only displays the full resolution of images in the lightbox if they are available.

    Blatze
    Participant

    Hallo zusammen,
    ich habe ein Problem auf einer Kundenseite, das sich wie folgt darstellt:
    Ich habe eine Rasterzeile mit einem Hintergrundbild als Header erstellt. Dieses Bild wird auf allen Geräten korrekt angezeigt – mit einer Ausnahme: auf dem iPad (physisches Gerät, nicht über “Untersuchen”) erscheint das Headerbild plötzlich stark herangezoomt. Das Problem tritt bei jedem Header auf, der diese Einstellungen verwendet.
    Hier sind noch Bilder zum Verständnis:
    backend
    normal
    zoomed
    Könnt ihr mir bitte weiterhelfen oder einen Hinweis geben, woran das liegen könnte?
    Vielen Dank im Voraus!
    Beste Grüße
    Charlotte

    English:

    Hello,
    I’m experiencing an issue on a client’s website:
    I created a grid row with a background image used as a header. The image displays correctly on all devices – except on the iPad (a physical device, not via “Inspect”). On the iPad, the header image suddenly appears extremely zoomed in. This happens with every header that uses these settings.
    Here are some images for better understanding:
    backend
    normal
    zoomed
    Could you please help me or provide a hint on what might be causing this?
    Thank you in advance!
    Best regards,
    Charlotte

    #1486043

    Hi, I don’t quite understand that, because about 2 years ago the post image was displayed correctly in the same original size on the homepage without this snippet. It seems you have changed something in Enfold … but anyway – it works now. Best regards and thanks, Lutz

    #1486042

    In reply to: lightbox issues

    the code snippet will work on your page for all images. Even on that graphics page.
    But if you create these images in a different way – and i see some Enfold Lightbox on paintings page we had to find then a different solution.
    But if you use the same way like on mixed media and graphics page – the code will work there too.

    But as mentioned – it would be nice to have a fallback for the bottom-bar title on lightbox. my advise – and not only for seo purpose – give an alt tag to your images via media library.

    and use that snippet with fallback alt -tag as title inside bottom-bar:

    Edit
    this checks if original image is present and if widget-text or alt is present :

    function mixed_media_lightbox() {
    ?>
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { 
    (function($){
        $('.widget_media_image').magnificPopup({
          delegate: 'img',
          type: 'image',
          removalDelay: 500,  // to allow animated closing in ms
          mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded mixed-media',  
          midClick: true,
          gallery: { 
            enabled:true,
            preload: [1, 1] ,
          },
          image: {
            titleSrc: false,
            markup: '<div class="mfp-figure">'+
                      '<div class="mfp-close"></div>'+
                      '<div class="mfp-img"></div>'+
                        '<div class="mfp-bottom-bar">'+
                          '<div class="mfp-title"></div>'+
                      //  '<div class="mfp-counter"></div>'+
                        '</div>'+
                    '</div>',
            },  
            callbacks: {
              elementParse: function(item) {
                var originalSrc = item.el.attr('src');
                var fullSizeSrc = originalSrc.replace(/-\d+x\d+\./, '.');
    
                // Create a temporary image object to check whether the full resolution exists
                var img = new Image();
                img.onload = function() {
                  item.src = fullSizeSrc;
                };
                img.onerror = function() {
                  item.src = originalSrc;
                };
                img.src = fullSizeSrc;
                item.src = originalSrc;
              },
    
              markupParse: function (template, values, item) {
                var title = ''; // Initialize title as an empty string. This is our default fallback.
    
                // 1. Highest Priority: Check for content from a nearby .widget_text element
                var textWidget = item.el.closest('.panel-grid-cell').find('.widget_text');
                if (textWidget.length && textWidget.html().trim() !== '') {
                  title = textWidget.html();
                } else {
                  // 2. Second Priority: If no text widget, check the image's alt attribute
                  var altAttribute = item.el.attr('alt');
                  if (altAttribute && altAttribute.trim() !== '') { // Checks if exists AND has non-empty content
                    title = altAttribute;
                  } else {
                    // 3. Third Priority: If no alt, check the image's title attribute
                    var titleAttribute = item.el.attr('title');
                    if (titleAttribute && titleAttribute.trim() !== '') { // Checks if exists AND has non-empty content
                      title = titleAttribute;
                    }
                  }
                }
    
                // Finally, assign the title to values.title, wrapping it in <h3> ONLY if there's content
                if (title) {
                  values.title = '<h3 class="heading">' + title + '</h3>';
                } else {
                  values.title = ''; // If no title was found at all, ensure nothing is displayed
                }
              },
            },
        });
    })(jQuery);
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'mixed_media_lightbox', 9999);

    And

    #top .mixed-media .mfp-image-holder .mfp-content {
      max-width: 1200px; 
      box-sizing: border-box; 
      padding-bottom: 90px; 
      vertical-align: middle; 
    }
    
    #top .mixed-media .mfp-bottom-bar {
      margin-top: -36px;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      cursor: auto;
      background-color: rgba(0,0,0,0.3);
      backdrop-filter: blur(4px);
      padding: 5px 10px;
    }
    
    #top .mixed-media .mfp-bottom-bar .mfp-counter {
      right: 5px
    }
    
    #top .mixed-media .mfp-content img.mfp-img {
      width: auto;
      max-width: 100%;
      max-height: 90vh !important;
      height: auto;
      display: block;
      line-height: 0;
      box-sizing: border-box;
      padding: 40px 0 40px;
      margin: 0 auto;
    }
    
    #top .mixed-media .mfp-content .mfp-title .heading * {
      font-weight: 400 !important;
    }
    
    #top .mixed-media .mfp-content .mfp-title .heading p {
      margin: 0.3em 0;
    }
    
    #top .widget_media_image img {
      cursor: pointer;
    }
    #1486040

    In reply to: lightbox issues

    thanks for your help. I will look into the options, I don’t really understand all.
    I would like to know if it’s possible to globally make all the images open in a lightbox, based on a category maybe, so I don’t have to do into each image manually and change the settings. The site is not built properly (they should have used a masonry gallery) but I do think they want the whole thing rebuilt.
    thanks for taking a look,
    Nancy

    #1486038

    In reply to: lightbox issues

    Now – what you have to do. : not all your images do have that widget_text
    See Paintings Page. Or you have tried to do it with enfold lightbox implementation there. ?

    the script is working – but the shown title is not allways defined. the reason – see above.

    Best would be to set an alt or title tag as fallback to all of your images. For SEO purpose it might be better to use the alt tag.
    then you had to change the else condition to:

    values.title = '<h3 class="heading">' + item.el.attr('alt') + '</h3>';
    
    #1486036

    In reply to: lightbox issues

    this is the main crux:

    elementParse: function(item) {
              item.src = item.el.attr('src').replace( /-\d*x\d*\./, '.' );
    },

    in the callback function. The image link comes now from the src attribute.

    because of that extra class on mainClass you can individually set :
    see final solution at: https://kriesi.at/support/topic/lightbox-issues-2/#post-1486042

    When i use fluent form date then not show year like below:
    https://img.savvyify.com/image/Screenshot-2025-06-27-163401.y8wQp
    After, I use css code:
    .flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 2px;
    height: 50px;
    }

    /* Dropdown tháng */
    /* Giảm độ rộng box tháng */
    .flatpickr-monthDropdown-months {
    width: 70px; /* Giảm từ mặc định xuống, bạn có thể thử 80px hoặc 90px nếu cần */
    font-size: 12px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    line-height: 1;
    }

    /* Bọc input năm */
    .flatpickr-current-month .numInputWrapper {
    width: 70%; /* Đủ để hiển thị 4 chữ số */
    height: 50px;
    overflow: hidden;
    position: static;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    /* Input năm */
    .flatpickr-current-month .numInputWrapper input.cur-year {
    width: 70%;
    height: 100%;
    font-size: 14px;
    border: none;
    text-align: center;
    padding: 50;
    box-sizing: border-box;
    }

    .flatpickr-prev-month:hover,
    .flatpickr-next-month:hover {
    background: #eee;
    border-radius: 4px;
    }
    But it look like so bad, not show downarrow year
    Please help me

    • This reply was modified 9 months, 2 weeks ago by minhndq.
    #1486018

    In reply to: lightbox issues

    Those screenshots were from the image element itself, inside the page builder.

    Thanks, Ismael.
    That CSS solves my problem with image copyright. Great!
    What about the responsiveness?
    When looking at the gallery in tablet or mobile view, then all images are cropped. I need them to show in full size, without croppting.

    And I need the gallery to show 4 images in one row. There is no setting for that. How can I solve this?

    Best regards
    Bettina

    #1486012

    In reply to: lightbox issues

    thanks for your reply
    but if you look at the images they are set with the url and media link. it’s just not working.

    #1486011

    In reply to: lightbox issues

    Hi,

    Thank you for the update.

    The issue is with the other page builder. You have to edit the images there and set the URL or link. If it’s not available, you may need to manually wrap the images in a link tag then use the image URL as value. Please contact the plugin developer for additional assistance.

    Best regards,
    Ismael

    #1486008

    In reply to: lightbox issues

    Thanks for taking a look.
    this is how the image is set up – it’s similar to Enfold (which I have used exclusively for years).
    on the mixed media page: https://imgur.com/iqrN3T2 and https://imgur.com/1VgypnI
    but on the front end I don’t see the link in the preview or page view.
    on the paintings page, the first image is set up the same way, but the link is there –
    in the preview it opens in lightbox: https://imgur.com/uYtdXbb and https://imgur.com/RLnBpBQ
    but when I save a view the page, it opens the image in another page. The second image on that page is set up the same way but there doesn’t seem to be a link: https://imgur.com/yHRPIj7
    I have gone back and forth through all the settings. The lightbox is enabled.
    Any advice?
    thanks
    Nancy

    Hey Bpelzer,

    Thank you for the inquiry.

    Adding this css code should help move the copyright text below the image, but it will create a bit of extra space below the slider.

    #presse .av-horizontal-gallery {
        padding-bottom: 120px;
    }
    
    #presse .presse-galerie .av-image-copyright {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
        padding-top: 0;
    }
    
    #presse .presse-galerie .av-horizontal-gallery-wrap {
        overflow: visible;
        padding-bottom: 50px;
    }

    View post on imgur.com

    Best regards,
    Ismael

    #1485999

    In reply to: lightbox issues

    Hey Munford,

    Thank you for the inquiry.

    The images on the “mixed-media” page don’t have any links or are not wrapped inside a link tag. Unfortunately, we are not familiar with the SiteOrigin Builder and we are not sure how the images were added to the page, but you may need to edit them and make sure they include links that use the original image URL as the value.

    Another option is to switch to the Advance Layout Builder and use image elements such as the Gallery or Masonry.

    View post on imgur.com

    Best regards,
    Ismael

    Hey Martin,

    Thank you for the inquiry.

    We noticed that the title attribute of the featured image is removed on mouse hover and returns on mouse out. Did you add a script that disables the title attribute on hover to prevent the default browser tooltip from showing? Please note that the lightbox script relies on the title attribute for the caption or image subtitle.

    You may need to remove the script that disables the title attribute to keep the lightbox subtitle or caption consistent. Let us know the result.

    Best regards,
    Ismael

    #1485992

    Hey Richard,

    Thank you for the inquiry.

    The image overlay is disabled on mobile devices by default. You can enable it back but you have to edit the themes/enfold/js/avia.js file and remove the following code from the avia_hover_effect function, around line 769.

    if( $.avia_utilities.isMobile )
    		{
    			return;
    		}
    

    Make sure that the Enfold > Performance > File Compression is temporarily disabled. Let us know the result.

    Best regards,
    Ismael

    #1485989

    In reply to: Logo as SVG

    Hey Daniel,

    Thank you for the inquiry.

    The same SVG logo image is displayed on small screens when we checked the previous site. Would you mind providing a screenshot?

    Best regards,
    Ismael

    #1485984

    Topic: lightbox issues

    in forum Enfold
    Munford
    Participant

    hi
    I just took over a site that is using another theme together with Site Origin builder. (I am used to using enfold). I was having trouble with the lightboxes not working even though my images are set to open in a media file. Some of them work and some don’t, and sometimes the images seem to default back to no lightbox. I switched the theme to Enfold on a staging site, but the same thing is happening. I still have Site Origin installed since I don’t want to rebuild the whole site. Can you see if there is a conflict or what the issue is?
    thanks for your help
    Nancy

    #1485981

    Hey faroestudio,
    Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function change_posts_titles_from_h3_to_h2_in_grid_view() { ?>
      <script>
    (function($) {
      $(function() {
        function replaceElementTag(targetSelector, newTagString) {
          $(targetSelector).each(function(){
            var newElem = $(newTagString, {html: $(this).html()});
            $.each(this.attributes, function() {
              newElem.attr(this.name, this.value);
            });
            $(this).replaceWith(newElem);
          });
        }
        replaceElementTag('.slide-entry-wrap h3.slide-entry-title.entry-title ', '<h2></h2>');
      });
    }(jQuery));
    </script>
      <?php
    }
    add_action( 'wp_footer', 'change_posts_titles_from_h3_to_h2_in_grid_view', 99 );

    If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:
    use wpcode php snippet and activate
    and ensure that it is activated, then add the above code and save.

    Best regards,
    Mike

    #1485962

    Topic: Logo as SVG

    in forum Enfold
    Bpelzer
    Participant

    Hello,
    I am struggling with the horizontal image gallery. I would like to show some text below each image and I am using “image copyright”, because I found no other possibility. The problem is, that it should show up below the image, and not on it. To get this working I used the following code:
    .presse-galerie .av-image-copyright {
    position: relative;
    padding-top: 10px;
    }
    Where .presse-galerie is my class for the gallery.
    This works for desktop view. But unfortunately not in tablet or mobile mode. My copyright text will displayed on the image and is not readable.

    Another issue is, that the horizontal gallery is not really responsive. It only works well in desktop mode. But on smaller screens images are badly cropped. Could you please provide some CSS to make this elements responsive?

    Thanks, Bettina

    #1485958
    raslade
    Participant

    Hi there

    I’m building a site where I’ve set the overlays to show permanently as they use a svg as a design element. See the link for example. The problem is on mobile, the overlays don’t show up.

    #top .slide-entry a .image-overlay {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
    }

    Any help would be very much appreciated
    Richard

    transdesign_dk
    Participant

    Hi Enfold Support,

    I’m experiencing a repeatable bug with the Enfold gallery — specifically when using image subtitles.

    On a page with an Enfold gallery, each image has been given a subtitle (via the built-in options). Everything works fine initially. However, after I scroll past the first image and then scroll back up to it, the subtitle is suddenly replaced with the string “null” on the frontend.

    This behavior suggests that the JavaScript responsible for handling image subtitles is not correctly preserving or restoring the subtitle data after the element is reloaded or redrawn (possibly due to lazy loading or Masonry reflow). It appears that the subtitle is being dynamically injected, but the value is lost or misread after scrolling, resulting in a “null” string being displayed instead.

    This only happens after interaction — when returning to the image — and seems like a client-side rendering issue.

    Could you please look into this? I’ve shared a few example pages in the private content. Thanks!

    Best regards,
    Martin

    #1485942

    Hi Ismael – Great! It worked straight away. The cover image is visible again in full format. Many thanks for your quick support! (But: do I have to assume that I might have to use this snippet on my other Enfold websites as well? – Or will it be patched in the next update? Or is it perhaps not a bug at all?). Best regards, Lutz

    #1485930

    Hey ellkam,

    Thanks for reaching out.

    Try to completely remove the image from the Media > Library, then add this code in the functions.php file:

    function avf_customization_modify_thumb_size( $size ) {
          $size['entry_without_sidebar'] = array( 'width' => 9999, 'height' => 9999 );
          $size['entry_with_sidebar'] = array( 'width' => 9999, 'height' => 9999 );
          return $size;
    }
    
    add_filter( 'avf_modify_thumb_size', 'avf_customization_modify_thumb_size', 10, 1 );
    

    This should set the maximum width and height of the thumbnail. Upload the image again afterward.

    Best regards,
    Ismael

    #1485929

    Hey keep12,

    Thank you for the inquiry.

    Yes, you can override the includes > loop-index.php file in the child theme folder. Create a folder named includes, then place the loop-index.php file inside it. You can then add the author markup within the file.

    This thread should help with the author markup: https://stackoverflow.com/questions/20467008/how-to-add-author-image-and-description-wordpress

    Best regards,
    Ismael

    #1485909

    Hi,

    It’s likely a server setting which is not allowing what you are trying to do, this might help you out:

    A “File too large server error,” also known as a “413 Request Entity Too Large” error, occurs when a client attempts to upload a file or send data to a server that exceeds the server’s configured maximum upload size. This error is typically triggered by large files, such as videos, images, or plugins, exceeding the server’s limits. To resolve this, you’ll need to either reduce the file size or increase the server’s upload capacity.
    Here’s a more detailed explanation:
    Causes:

    Exceeding Server’s Upload Limit:
    Most servers have a maximum file size limit for uploads. If the file you’re trying to upload exceeds this limit, the server will return a 413 error.

    File System Limitations:
    In some cases, the file system of the destination device (like a USB drive) might have limitations on the maximum file size, even if the server’s limit is higher. For example, FAT32 file systems have a 4GB limit.

    Solutions:
    1. Reducing File Size:

    Compression:
    Compress large files (e.g., using .zip) to reduce their size before uploading.
    Lower Quality:
    If it’s a video file, consider recording or exporting it in a lower quality to reduce its size.

    2. Increasing Server’s Upload Limit:

    Adjusting PHP Settings:
    For WordPress or other PHP-based websites, you can modify upload_max_filesize and post_max_size directives in your php.ini file or through your hosting control panel.

    Modifying .htaccess:
    In some cases, you can adjust the upload size limit through the .htaccess file.
    Nginx Configuration:
    For Nginx servers, you’ll need to modify the client_max_body_size directive in your nginx.conf file.
    Contacting Hosting Provider:
    If you’re unable to make these changes yourself, reach out to your hosting provider for assistance.

    3. Handling File System Limitations:

    Formatting to NTFS or exFAT: If the issue is with the destination file system (e.g., FAT32 on a USB drive), you can format the drive to a file system like NTFS or exFAT, which support larger files.

    4. Additional Tips:

    Compress files before uploading: This is a good practice even if the server limit is sufficient.
    Check server settings regularly: Ensure your server’s upload limits are appropriate for your needs.
    Implement client-side file size validation: Prevent users from uploading excessively large files in the first place.

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/413

    Best regards,
    Rikard

    Hi Ismael,
    I had someone else here have a look and believe we found the issue. Below is what they said and found. Hopefully this helps provide the info you need to resolve things. The FTP info you requested is provided in the private field.

    Here’s what they said…

    I retrieved a copy of the post data and metadata before saving, without making any changes, and then compared it to the data and metadata afterwards. The issue was apparent.

    Before editing, the postmeta value for the _aviaLayoutBuilderCleanData meta_key has [av_blog…] elements that look like:
    [av_blog blog_type='taxonomy' post_type='hotels-resorts' link='canada-categories,248' term_rel='' blog_style='blog-grid' content_length='content' contents='excerpt' date_filter='' date_filter_start='' date_filter_end='' date_filter_format='yy/mm/dd' period_filter_unit_1='1' period_filter_unit_2='year' page_element_filter='' offset='0' conditional='' bloglist_width='' columns='4' preview_mode='custom' image_size='portfolio' items='-1' paginate='no' img_scrset='' lazy_loading='disabled' alb_description='' id='' custom_class='adventures-post blogpost-image-fixing' template_class='' av_uid='av-2ivazvo' sc_version='1.0' orderby='' order='']

    After saving, without making any changes, we have:
    [av_blog blog_type='taxonomy' link='canada-categories,248' term_rel='' blog_style='blog-grid' content_length='content' contents='excerpt' date_filter='' date_filter_start='' date_filter_end='' date_filter_format='yy/mm/dd' period_filter_unit_1='1' period_filter_unit_2='year' page_element_filter='' offset='0' conditional='' bloglist_width='' columns='4' preview_mode='custom' image_size='portfolio' items='-1' paginate='no' img_scrset='' lazy_loading='disabled' alb_description='' id='' custom_class='adventures-post blogpost-image-fixing' template_class='' av_uid='av-2ivazvo' sc_version='1.0']

    The saved version is missing the post_type=’hotels-resorts’ attribute.

    When I manually add these to the database, the posts reappear.

Viewing 30 results - 1,201 through 1,230 (of 106,459 total)