Level 51
This has a link attached to it
This doesn't
See how different there are.
Sep 4, 2015
25
Level 51
Image Intervention Class using L4.2
I'm using the following class: http://image.intervention.io/api/fit to fir and re-size my images within a slider. But when I add it in a <a href=""> it doesn't show the correct width or hight.
Here's my controller code for the image resize.
if (Input::hasFile('image')){
$file = Input::file('image');
$name = str_random(12).'.'.$file->getClientOriginalExtension();
$image = Image::make(Input::file('image')->getRealPath())->fit(880, 400);
$image->save(public_path() . '/uploads/files/' . $name);
$slider->image = $name;
}
Which does re-size the image correctly, but then in my html I have
<div class="mainSlider">
@foreach($slider as $slide)
@if ($slide->url != '')
<a href="http://{{ $slide->url }}"><img src="/uploads/files/{{ $slide->image }}" /></a>
@else
<img src="/uploads/files/{{ $slide->image }}" />
@endif
@endforeach
</div>
Which check if an image as a URL attached to it, but the ones with the URL so slightly smaller on screen when uploaded then the ones without a URL.
Has anyone encountered this problem before, and/or how does one get around this?
Level 51
Anyone know how to fix this?
Level 8
.main slider a{
padding:0 !important;
}
Level 8
Typo sorry .mainSlider
Level 51
@veve286 That doesn't do anything, already tried that too.
Level 8
How about making like this ,,,html .mainSlider a, .mainSlider>img{ Pasding:0; margin:0; margin-left:10px; } ,,,
Level 8
.mainSlider a, .mainSlider>img{
padding:0; margin:0; margin-left:10px; }
Level 51
@veve286 nope tried that too
Level 8
How about giving all img a fixed witdh ?
Level 51
Tried that too, but this only happens when it's in the anchor tag
Level 8
After applying style will not change sometimes becoz of cache so try clearing the browser cache first everytime u change the style sheet.
Level 51
Makes no difference! :(
Level 8
Use dev tool and inpect two element bro and try to figure which is different in css . Or can u show me these screenshots about inspected element.
Level 51
Level 8
Wrap ur img that doesn't locate within anchor tag with div tag.
Level 8
Sorry not div tag just span tag . Use span tag
Level 51
Then if not in a div or anchor tag it's fine.
Level 8
Try this ? That problem is because of your slider plugin.
<div class="mainSlider">
@foreach($slider as $slide)
@if ($slide->url != '')
<a href="http://{{ $slide->url }}"><img src="/uploads/files/{{ $slide->image }}" /></a>
@else
<span>
<img src="/uploads/files/{{ $slide->image }}" />
</span>
@endif
@endforeach
</div>
Level 51
Sorry post not showing correctly?
Level 8
sorry check again . This problem occurs because your plugin produce inline css style for html tag. If it is still not working try to use other plugin bro :)
Level 41
@lstables Why is there inline styling applied to everything? I'm assuming that's javascript at work, and your script is not applying the styling to images within the anchor tag.
Level 51
Yeah JS at work by looks.
Level 8
did u try to wrap ur image with span element like i said ?
Level 51
Adding the span does work thanks for that
Level 8
That trick should work try this. Wrap your img with a that doens't have href attribute. That anchor tag will be like normal tag since it doesn't have href attribute so if will not redirect some link.
@if ($slide->url != '')
<a href="http://{{ $slide->url }}"><img src="/uploads/files/{{ $slide->image }}" /></a>
@else
<a>
<img src="/uploads/files/{{ $slide->image }}" />
</a>
@endIf
Please or to participate in this conversation.