Laravel

How to set up responsive images in the Summernote Text Editor

Summernote applies a fixed width to images. This can be frustrating, but there's a solution.

2 years ago

SubjectPoint is built on top of the Laravel Framework, and it uses the open-source Summernote text editor for creating and editing blog posts. This works great, but frustratingly, Summernote applies a fixed width to images. Even more frustratingly, any edits to the image property are overwritten by Summernote. This leads to images failing to resize according to the size of the browser window.

To fix this, add this bit of code to the bottom of the page (note that this only works if you're loading jQuery, which you should be as Summernote uses jQuery):

<script>
$(document).ready(function(){
    $("img").addClass("img-responsive");
    $("img").css("max-width", "100%");
});
</script>

This will ensure that the image is never wider than the content, and that images will be resized accordingly no matter how large or small the browser window is. Since we're also leaving the width property alone, images will never scale wider than they should. It is kind of an ugly hack, but it gets the job done without having to modify Summernote's source code.

Click here to read more information about Summernote

Post Comments(18)

inedonseso

<a href=http://slkjfdf.net/>Ahektqij</a> <a href="http://slkjfdf.net/">Awanev</a> hqn.rtyp.subjectpoint.com.ekx.ki http://slkjfdf.net/

1 week ago

ipupimobetiwa

<a href=http://slkjfdf.net/>Eqofota</a> <a href="http://slkjfdf.net/">Kacefot</a> zbk.abcm.subjectpoint.com.las.nc http://slkjfdf.net/

1 week ago

www.pharmaceptica.com

erectile ring walmart https://pharmaceptica.com/

1 month ago

avana

buy avana <a href="https://avanaavanafil.com/#">buy avanafil online</a>

2 months ago

chloroquineorigin

buy chloroquine online https://chloroquineorigin.com/ chloroquine coronavirus <a href="https://chloroquineorigin.com/ ">clorochina </a> clonidine

2 months ago

Areciamma

<a href=http://ponlinecialisk.com/>cheap cialis online

2 months ago

levitra (vardenafil)

levitra generic vardenafil https://vegavardenafil.com/ buy vardenafil over the counter with no pres. online

3 months ago

sildenafil 100mg usa cheap

how to order sildenafil online https://eunicesildenafilcitrate.com/ sildenafil 25 mg india

3 months ago

buy tadalafil us

order tadalafil https://elitadalafill.com/ tadalis sx

3 months ago

alprostadil or yohimbine

alprostadil injection where to buy https://alprostadildrugs.com/ alprostadil for sale online

3 months ago

Areciamma

http://fcialisj.com/ - cheap generic cialis

4 months ago

Areciamma

Cialis For Sale Canada Aliclescadia <a href=https://xbuycheapcialiss.com/>buy cialis online 20mg</a> felpnoretelt cialis for hypertension

7 months ago

Accolade

This post just ended my long frustrating non responsive images on small devices. Thanks for the info

11 months ago

Anonymous

Thanks for the tip!

1 year ago

ggg

sfjhsdgg

1 year ago

LesSleecy

Happy Male Viagra https://abuycialisb.com/# - buy cialis online reddit Why Cialis Cost So Much <a href=https://abuycialisb.com/#>canadian cialis</a> Viagara Overnight

1 year ago

StepVer

Cheapest Viagra <a href=https://apcialisle.com/#>daily cialis online</a> Xenical Donde Compro Online Usa <a href=https://apcialisle.com/#>buy cialis pills</a> Zentel 400mg Cheapeast No Physician Approval

1 year ago

StepVer

Propecia Mental Risks <a href=http://apcialisle.com/#>Cialis</a> Allpills <a href=http://apcialisle.com/#>Buy Cialis</a> Viagra Generika Wirkung

1 year ago

Leave a reply