I've written an element filter for Images placed in the gridder. This does several things:
- checks whether the image is linked manually and if so returns that link
- sets the image up for lazyloading
- sets the image up to work with a lightbox (if it's not manually linked)
The problem that I'm having is $element->sizes->full->url returns the incorrect url for the image. My WordPress installation is in a subdirectory, and it returns an address that doesn't lead to the subdirectory.
ie.
/wp-content/uploads/liam-arthur-life-18-001.jpg
when it should be
http://commonera.co.uk/2/wp-content/uploads/liam-arthur-life-18-001.jpg
The odd thing is I am using the laygridder plugin on practically every page of my site – pages that were created with older versions of laygridder work correctly, this problem is only happening with pages that I have created since updating to the latest version of laygridder.
works normally, was created with older version:
http://commonera.co.uk/artists/matt-stansfield/lifestyle/
does not work properly, was created with latest version:
http://commonera.co.uk/artists/liam-arthur/life/
Here is the full code for my filter:
function add_lightbox2($markup, $element){
$img = "";
$attid = $element->attid;
$alt = get_post_meta($attid, '_wp_attachment_image_alt', true);
$link_obj = property_exists($element, 'imagelink') && $element->imagelink != '' ? $element->imagelink : false;
if( $link_obj != false && property_exists($link_obj, 'url') ){
$target = '';
if($link_obj->newtab == true){
$target = 'target="_blank"';
}
$url = $link_obj->url;
if($link_obj->id != "" && $link_obj->type != ""){
$url = get_permalink($link_obj->id);
}
$img .= '<a href="'.$url.'" '.$target.' class="gray anim-link">';
} else {
$img .= '<a href="'.$element->sizes->full->url.'" rel="lightbox">';
}
$srcset = wp_get_attachment_image_srcset($attid);
$vw = LayGridderFrontend::get_vw($obj, $element->colspan);
$sizes = '(min-width: '.LayGridderOptions::$phone_breakpoint.'px) 80vw, 100vw';
$img .=
'<div class="lg-placeholder" style="padding-bottom:'.($element->h/$element->w*100).'%;">
<img data-srcset="'.$srcset.'" sizes="'.$sizes.'" data-src="'.$element->sizes->full->url.'" alt="'.$alt.'" class="lazyload">
</div>';
$img .= '</a>';
return $img;
}
add_filter( 'lg_frontend_img', 'add_lightbox2', 10, 2 );
Help would be much appreciated as now many pages on my site aren't working properly!