edit.js

// replace this fucntion inside edit.js to have ratio_3_4 class to first <li> of <ul> only 

function saveOrder() {
i = 0;
var newarr = [];
$('ul').children().each(function(){
	if($(this).attr('id') != undefined)
	{
	newarr.push($(this).find('.br').find('.handle').attr('src'));
	var imgElement = $(this).find('.br').find('img');
	console.log("imgelement: ",imgElement);
		if(i == 0)
		{
				$(this).find('.feature').show();
				$(this).find('.feature').css({'background':featured_color});
				$(this).find('.kuchv').find('.br').css({'background':featured_color,'border-top-left-radius':'0px'});

				$('ul').find('img').removeClass('ratio_3_4');  // Remove from all images
                $(this).find('img').addClass('ratio_3_4');
		}
		else
		{
				$(this).find('.feature').hide();
				$(this).find('.kuchv').find('.br').css({'background':regular,'border-top-left-radius':'8px'});

			
		}
		console.log($(this).attr('id'));
		i++;
	}
});
setCookie_images ('files',JSON.stringify(newarr));
console.log('FinalFiles:'+JSON.stringify(newarr));
saveImages();

i = 0;
$('ul').children().each(function(){
	if($(this).attr('id') != undefined)
	{
		if(i == 1 && 1==2)
		{
			$(this).find('.hover').show();
			$(this).find('.hover').css({'background':hover_color});
			$(this).find('.kuchv').find('.br').css({'background':hover_color,'border-top-left-radius':'0px'});
		}
		else if(i == 0)
		{
			$(this).find('.hover').hide();
		}
		else
		{
			$(this).find('.hover').hide();
			$(this).find('.kuchv').find('.br').css({'background':regular,'border-top-left-radius':'8px'});
		}
		console.log($(this).attr('id'));
		i++;
	}
});

};


// Till here only





























//updated with ratio_3_4 class

if(no == 1)
{
	feature = 'block';
	hover = 'none';
	color = featured_color;
	border = '';
	ratio_3_4 = ratio_3_4;

	$('#images').append('<li class="col-md-4 col-sm-6 col-xs-12" style="max-width:250px;text-align: center;padding:5px;background:rgba(0,0,0,0.0);" id="image'+no+'"><div class="kuchv" style="position:relative;background-color:rgba(0,0,0,0.0);height:100%;width:100%;border-radius:8px;"><div class="loader" style="display:none;z-index:10000;vertical-align:middle;position:absolute;top:60px;right:30px;left:30px;"><img src="loader.gif" style=""/></div><div class="modal fade " id="modal'+no+'" aria-labelledby="modalLabel" role="dialog" tabindex="-1"><div class="modal-dialog modal-my" role="document"><div class="modal-content"><div class="modal-body"><div><img  id="image'+no+'" class="modal-img" src="'+res+'" alt="Picture"/></div></div><div class="modal-footer text-center"><button type="button" class="btn btn-default btn-save" id="save'+no+'" data-dismiss="modal">Crop</button><button type="button" style="margin-left:50px;" class="btn btn-default" data-dismiss="modal">Cancel</button></div></div></div></div><div class="modal fade " id="big-modal'+no+'" aria-labelledby="modalLabel" role="dialog" tabindex="-1"><div class="modal-dialog modal-my" role="document"><div class="modal-content"><div class="modal-body"><div><img id="big-img'+no+'" class="big-img" style="max-width:100%;max-height:65vh;" src="'+res+'" alt="Picture"/></div></div><div class="modal-footer text-center"><button type="button" style="margin-left:50px;" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div><div style="width:100%;height:20px;background:rgba(0,0,0,0.0);"><p class="feature handle" style="position:absolute;left:0px;top:0px;background-color:'+color+';color:white;height:20px;font-size:12px;padding: 2px 15px 2px 15px; display:'+feature+';border-top-left-radius:8px;border-top-right-radius:8px;">Featured Image</p><!--<p class="hover handle" style="position:absolute;left:0px;top:0px;background-color:'+color+';color:white;height:20px;font-size:12px;padding: 2px 15px 2px 15px;display:'+hover+';border-top-left-radius:8px;border-top-right-radius:8px;">Hover Image</p>--></div><div class="br" style="display:flex; flex-direction: column;justify-content: space-between; align-items: center; height:100%;width:100%;background:'+color+';'+border+'border-top-right-radius:8px; border-bottom-right-radius:8px; border-bottom-left-radius:8px;padding:8px;"><img src="'+res+'" id="main-image'+no+'" class="img handle ratio_3_4" style="max-height:fit-content;max-width:100%;"   data-target="#big-modal'+no+'" data-toggle="modal"/><div class="zone handle" style="display: flex;justify-content: space-between;padding-top: 10px; width:100%"><div class="btn-group" style="/* position: relative; *//* top:200px; *//* left:10px; */"><a class="btn rotate" style="background-color: rgba(0,0,0,0.8);border-radius:4px;padding:0px ;"><i class="fa fa-rotate-right" style="color:white;padding:2px ;"></i></a><a class="btn crop" style="background-color: rgba(0,0,0,0.8);margin-left:10px;border-radius:4px;padding:0px ;" data-target="#modal1" data-toggle="modal"><i class="fa fa-crop" style="color:white;padding:2px ;"></i></a></div><a class="btn remove" style="/* position: relative; *//* right:5px; */top:200px;background-color: rgba(150,0,0,0.8);padding:0px;"><i class="fa fa-close" style="color:white;padding:2px ;"></i></a></div></div></li>');

}
//				else if(no == 2)
//				{
//					feature = 'none';
//					hover = 'block';
//				        color = hover_color;
//					border = '';
//				}
else
{
	hover = 'none';
	feature = 'none';
	color = regular;
	border = 'border-top-left-radius:8px;';
	ratio_3_4 = '';


	$('#images').append('<li class="col-md-4 col-sm-6 col-xs-12" style="max-width:250px;text-align: center;padding:5px;background:rgba(0,0,0,0.0);" id="image'+no+'"><div class="kuchv" style="position:relative;background-color:rgba(0,0,0,0.0);height:100%;width:100%;border-radius:8px;"><div class="loader" style="display:none;z-index:10000;vertical-align:middle;position:absolute;top:60px;right:30px;left:30px;"><img src="loader.gif" style=""/></div><div class="modal fade " id="modal'+no+'" aria-labelledby="modalLabel" role="dialog" tabindex="-1"><div class="modal-dialog modal-my" role="document"><div class="modal-content"><div class="modal-body"><div><img  id="image'+no+'" class="modal-img" src="'+res+'" alt="Picture"/></div></div><div class="modal-footer text-center"><button type="button" class="btn btn-default btn-save" id="save'+no+'" data-dismiss="modal">Crop</button><button type="button" style="margin-left:50px;" class="btn btn-default" data-dismiss="modal">Cancel</button></div></div></div></div><div class="modal fade " id="big-modal'+no+'" aria-labelledby="modalLabel" role="dialog" tabindex="-1"><div class="modal-dialog modal-my" role="document"><div class="modal-content"><div class="modal-body"><div><img id="big-img'+no+'" class="big-img" style="max-width:100%;max-height:65vh;" src="'+res+'" alt="Picture"/></div></div><div class="modal-footer text-center"><button type="button" style="margin-left:50px;" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div><div style="width:100%;height:20px;background:rgba(0,0,0,0.0);"><p class="feature handle" style="position:absolute;left:0px;top:0px;background-color:'+color+';color:white;height:20px;font-size:12px;padding: 2px 15px 2px 15px; display:'+feature+';border-top-left-radius:8px;border-top-right-radius:8px;">Featured Image</p><!--<p class="hover handle" style="position:absolute;left:0px;top:0px;background-color:'+color+';color:white;height:20px;font-size:12px;padding: 2px 15px 2px 15px;display:'+hover+';border-top-left-radius:8px;border-top-right-radius:8px;">Hover Image</p>--></div><div class="br" style="display:flex; flex-direction: column;justify-content: space-between; align-items: center; height:100%;width:100%;background:'+color+';'+border+'border-top-right-radius:8px; border-bottom-right-radius:8px; border-bottom-left-radius:8px;padding:8px;"><img src="'+res+'" id="main-image'+no+'" class="img handle" style="max-height:fit-content;max-width:100%;"   data-target="#big-modal'+no+'" data-toggle="modal"/><div class="zone handle" style="display: flex;justify-content: space-between;padding-top: 10px; width:100%"><div class="btn-group" style="/* position: relative; *//* top:200px; *//* left:10px; */"><a class="btn rotate" style="background-color: rgba(0,0,0,0.8);border-radius:4px;padding:0px ;"><i class="fa fa-rotate-right" style="color:white;padding:2px ;"></i></a><a class="btn crop" style="background-color: rgba(0,0,0,0.8);margin-left:10px;border-radius:4px;padding:0px ;" data-target="#modal1" data-toggle="modal"><i class="fa fa-crop" style="color:white;padding:2px ;"></i></a></div><a class="btn remove" style="/* position: relative; *//* right:5px; */top:200px;background-color: rgba(150,0,0,0.8);padding:0px;"><i class="fa fa-close" style="color:white;padding:2px ;"></i></a></div></div></div></li>');

}