Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • March 30, 2016 at 11:19 pm #605542
    envis

    I have registered a new image size in my child-theme functions.php:
    add_image_size(‘slider’, 1600, 470, true);

    I am using the plugin Manual Image Crop.
    With this plugin the user of the site can use this image size to make a custom cut-out from a photo to use for the slider.
    (they do not have Photoshop to upload perfectly sized images)

    How can I change the settings of Layerslider WP to use this new image size?
    What PHP file can I add to the child-theme and which lines can I edit to make Layerslider WP use the new ‘slider’ image size?

    PS. I love your theme and your support. So far I have bought it 8 times already. Keep up the good stuff! :)

    March 31, 2016 at 7:48 pm #606152
    Andy

    Hey envis!

    we recommend to work with this plugin: https://wordpress.org/plugins/simple-image-sizes/

    Cheers!
    Andy

    April 1, 2016 at 1:52 am #606419
    envis

    Andy,

    That doesn’t really answer my question.
    My solution creates “Iris-1600×470.jpg” from the uploaded “Iris.jpg”.
    How can I force Layerslider WP to use this generated thumb.

    Layerslider now just loads Iris.jpg.
    Iris

    April 1, 2016 at 1:59 am #606422
    Yigit

    Hey!

    Can you please post the link to your page and point out the image you would like to edit?

    Regards,
    Yigit

    April 1, 2016 at 2:15 am #606429
    envis

    Yigit,

    I have put these links in the private content of this message.

    Really appreciate your help :)

    April 1, 2016 at 2:27 am #606433
    envis

    PS I do something similar with the featured images of a post.

    • This reply was modified 8 years, 7 months ago by envis.
    April 1, 2016 at 2:29 am #606435
    Yigit

    Hi!

    Please add following code to Functions.php file in Appearance > Editor

    function my_custom_image_size(){
?>
 <script>
jQuery(window).load(function(){
jQuery('img.ls-bg.ls-preloaded').each(function(){
    jQuery(this).attr('src', jQuery(this).attr('src').replace(/\.jpg/, '-1600×470.jpg'));
});
});
 </script>
<?php
}
add_action('wp_footer', 'my_custom_image_size');

    and then add following code to Quick CSS in Enfold theme options under General Styling tab

    img.ls-bg.ls-preloaded {
    margin-left: 0!important;
    margin-top: 0!important;
    width: 100%!important;
    height: 100%!important;
}

    Cheers!
    Yigit

    April 1, 2016 at 2:37 am #606437
    envis

    Ok that is great, I change the CSS to 

    img.ls-bg.ls-preloaded {
    margin-left: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    height: auto !important;
}

    Since my images are resized to 1600×470 and the current slider is 1600×360.
    But the strange thing is (and this happens with height: 100% as well) is that the image disappears after 4 seconds?
    It’s a slider with only 1 slide right now.
    Any idea what is causing this?

    April 1, 2016 at 2:43 am #606439
    envis

    Fixed it, it was the same problem you had.
    The x in the source code you send me was wrong.
    But now it’s working.

    However the slider first load “Iris.jpg” and the instantly switches to “Iris-1600×470.jpg”.
    This produces a flash in the screen. Can this be fixed? :S

    April 2, 2016 at 12:04 pm #606942
    Ismael

    Hey!

    I can’t see the flash personally but we modified the code above a bit:

    function my_custom_image_size(){
?>
 <script>
jQuery('img.ls-bg.ls-preloaded').each(function(){
    jQuery(this).attr('src', jQuery(this).attr('src').replace(/\.jpg/, '-1600×470.jpg'));
});
 </script>
<?php
}
add_action('wp_footer', 'my_custom_image_size');

    Please remove browser cache or hard refresh the page.

    Best regards,
    Ismael

    April 2, 2016 at 10:31 pm #607058
    envis

    With these new code the replacing stops working :(

    April 4, 2016 at 5:11 am #607342
    Rikard

    Hi,

    Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Thanks,
    Rikard

    April 4, 2016 at 1:44 pm #607562
    envis

    Login info attached :)

    April 6, 2016 at 2:10 am #608608
    envis

    I now manually inserted the image url ********-1600×400.jpg in the slider.
    This is not the solution I was looking for, but somehow I can not inform layerslider that it should use a specific cut from the image.

    Nevertheless, thanx for your help guys :)

    April 6, 2016 at 5:19 am #608655
    Ismael

    Hey!4

    The issue with the previous code is that it will only trigger once the page has been fully loaded. We fixed it on the modified code. Please try this:

    function my_custom_image_size(){
?>
 <script>
(function($) {
$('img.ls-bg.ls-preloaded').each(function(){
    $(this).attr('src', $(this).attr('src').replace(/\.jpg/, '-1600×470.jpg'));
});
})(jQuery);
 </script>
<?php
}
add_action('wp_footer', 'my_custom_image_size');

    Regards,
    Ismael

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