Good time dear pros. There is a task to make sure that certain content is displayed depending on the type of photo (vertical or horizontal.). Suppose if the picture is vertical, then you need to display in the code:

<div class="static-grid-item" style="width: 530px;"><div class="static-grid-cell"><img src="[xfvalue_image1_url]" style="width:100%"></div></div>

But if the picture is horizontal:

 <img src="[xfvalue_image1_url]">

I would be very grateful if you help in solving this problem.

    1 answer 1

    Perhaps so:

     $(document).ready(function() { var $img = $('img'); $img.load(function() { var height = $(this).height(); var width = $(this).width(); if (width < height) { $(this).before('<div class="static-grid-item" style="width: 530px;"><div class="static-grid-cell">'); $(this).attr('style', 'width: 100%'); $(this).after('</div></div>'); } }); });

    But it seems to me, it is better to do this using php

    • Could you change the code based on the task? Thank you in advance. P.S. In your solution, a width of 100% is simply added. Such a solution is not suitable because if the template write "<div class =" static-grid-item "style =" width: 530px; "> <div class =" static-grid-cell "> <img src =" [xfvalue_image1_url] "style =" width: 100% "> </ div> </ div>" then the pattern will be split into two divas. This does not go away because width 100% will expand the photo on the selected half for the photo. - midagent