Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #235181

    Hi there –
    Trying to set up a very simple blog with images, text and in some cases video, where the images display at full size with no light box or hover. I’ve sent a link to a test blog page in a private reply. The first image on the page is correct but the second has been scaled smaller, it should be 1200px wide native. Using a child theme I have previously attempted to disable the light box and hover customizing functions.php and creating a /js/avia.js as below and per your prior support. But the hover is still on. How do I turn off the hover and make all images display at their native resolution?
    Besides the style.css these are the only two files I have in the child folder. Should there be another file in that folder for this purpose?
    Also, I want the text to flow wider than the default column width. How can I set that? I tried creating a page without a column but it still set the width of the text to about 600px horizontal which is the width to which the images are constrained.
    Thanks.

    functions.php
    <?php

    /*
    * Add your own functions here. You can also copy some of the theme functions into this file.
    * WordPress will use those functions instead of the original functions then.
    */

    /*
    * Register frontend javascripts:
    */
    if(!is_admin())
    {
    add_action(‘wp_enqueue_scripts’, ‘avia_register_child_frontend_scripts’, 100);
    }

    function avia_register_child_frontend_scripts()
    {
    $child_theme_url = get_stylesheet_directory_uri();

    wp_dequeue_script(‘avia-prettyPhoto’);
    wp_dequeue_style(‘avia-prettyP’);
    wp_dequeue_style(‘avia-custom’);

    //register js
    wp_register_script( ‘avia-default-child’, $child_theme_url.’/js/avia.js’, array(‘jquery’), 1, false );
    }

    ?>

    js/avia.js
    function avia_lightbox_callback(elements,ww,wh){
    (function($){
    elements.each(function()
    {
    var el = $(this);
    if(!el.hasClass('noLightbox'))
    {
    el.addClass('noLightbox');
    }

    if(!el.hasClass('noHover'))
    {
    el.addClass('noHover');
    }
    });

    jQuery('a.lightbox').on('click', function() { return false; });
    })(jQuery);
    }

    • This topic was modified 10 years, 8 months ago by penumbra. Reason: Clarity, additional question, make link private in reply
    #235857
    This reply has been marked as private.
    #236033

    Hi!

    You can add this on Quick CSS or custom.css adjust the max width of the post content:

    #top .fullsize .template-blog .post .entry-content-wrapper > * {
    max-width: 1200px;
    }
    
    #top .fullsize .template-blog .post .entry-content-wrapper {
    max-width: 1200px;
    }

    Add this one to remove the image overlay:

    .image-overlay {
    display: none !important;
    }

    Use this one to disable lightbox:

    a[rel] {
    pointer-events: none;
    }

    Best regards,
    Ismael

    #236494

    Hi Ismael & all –
    Couple questions below but this worked. Thanks so much!
    First I did it as Quick CSS and then moved it to the child theme’s style.css (it did not work as enfold-child>css>custom.css). Is this the best place to have this code, in the child theme style.css?
    Is it possible to have the width for images (videos and stills) different from the text in the same post, where the images would be a max of 1200px but the text less? I can’t tell if the supplied code was supposed to do that and changing one or the other line to less than 1200px did not change just the text but both the image and text width.
    Best.

    #238429

    Hey!

    You could duplicate the first two snippets and add img to the end of the selector so that it targets images.

    Adding everything to the child style.css is the preferred method.

    Cheers!
    Devin

    #238821

    Thanks for that answer.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Blog images at native size without hover’ is closed to new replies.