0vote

Usually we do this:

<p><a href="images/vam_zemes.gif"><img src="images/vam_zemes-300x264.gif" width="300" height="264" alt="zemes"/></a>

In E-107 I need to work in Media manager and get some stranges codes for simple image:
<img src="{e_BASE}media/img/300x0/2017-05/vam_zemes_300x264.gif" srcset="/media/img/600x0/2017-05/vam_zemes_300x264.gif 600w" alt="Vam Zemes 300x264" class="img-rounded rounded bbcode bbcode-img" width="300" />

With such codes I don't know how to put link to large image manually. To put automaticaly there are no posibilities. No one button does it.

I already don't speak about posibility to pop up that large image. Maybe should be integrated some plugin...

e107 version 2,15

2 Answers

0vote

tgtje Points2439

So you have a image in a page selected through media manager (still could be a very large one) but the system makes it a smaller one by adding the codes (for bootsrap use; thumb etc..). This happens on auto and gives the paths you posted above..

Now not going modal (popup but an image in a new window on original size ... is that okay ?
Going the system way here.. else might be overcomplicated)....

Well the image you selected did have a name too; ( if you want to do something like that you did know it before so take the steps somewhat earlier and paste anything in a note)...

Suppose it was called image1 and (original had a size width of 1200 px (screen). Using insert img from media manager makes it a 300 width.....BUT you want (different window after click) 1200 to be displayed...

Ok, image 1 : go to admin/media manager > library. contains all images and files.... find the image you seek (image1) got it? click on EDIT icon ...new window :> top line PATH = actual path of large format (eg original)  COPY this line   ( example  {e_MEDIA_IMAGE}2017-04/1200px_image1.jpg ).

Go back to the page (edit that one of course because it changes) or if you worked ahead go to...

Click 1 time on image in page (it will get selected and a 'pull frame'surrounds it ( yes you can pull to change the size), but we want the large in new window....

After click in the topbar of edit window find insert/edit LINK icon (it is one with a little chain button, hover and read the popuptext) , click it..

New window (small)  URL = paste the copied link Title = what you like (popup text large would be ok ?)
Target = New window Class = link  > OK... Save the page and test.. done

Still want to know the 'code'? topbar > Tools.. >click sourcode...find your pasted link and look at the surrounding... ( more on bs images : https://www.w3schools.com/bootstrap/bootstrap_images.asp  just read, makes it more understanding what is going on)


 


 

Beata commented May 31

I never upload to server larger than 800 px in width images (of course when it is simple picture or photo). What if I want to control my images myself ? Yes, I understand, go back and change width. At first I didn't understood it and became frustrated, because my image is schema with text and it became not readable.
I think it is better to prepare width of image at home before uploading them to server instead changing the width there.

Pop up images can be with lightbox efects if there is some plugin installed.

I think, in the button "to edit image" should be possibility to link (select) larger image.

Yes I did, I went to sources and had copy codes which are going before my small image, pasted before my large image, wrote codes <a href="...."... ... I know how to do but what about other people who don't know html?

Insert a link is possible to link an URL but not a larger image. It would be convenient to have posibility to link choosing the large image too.

Am I not right?

tgtje commented May 31

p1 : the system allows you to upload the large (big) ones, limited by file size (kb), and normally always adapt those for direct use (thumb php running) for display.
you are ABLE to easily change the width (pull frame or by hand edit) to change the DISPLAY size..

p2 yes, but since bootstrap modal function exists (see gallery) preferred way is to use system if possible, i just can not answer you there how to envoke that (unfamiliar), best another one to answer..other methods may be incorporated.

p3 You may commit that request as an enhancement feature on Github ??  https://github.com/e107inc/e107/issues..

p4 you can use those codes of course, but (imo) the described way would be sufficient ( aka little knowledge seems necessary when working on the web). One is still able to do a lot with html, (older too), but it does count WHO does it.. (html can cause security issues). (so it is a little loop..)

p5 Nope.. an url is normally an address for another site/page but ALSO a (pin)point for the image. as that is located at an address too, and you can link that..(method i described above post does that) ( if all is allowed to do...(external link) is another question (so called deep-linking).

0vote

Jimako Points1141

Just my 2 cents.

System behaviour depends on what you are doing. 

- if you upload image to image field, sizes are done by template, mostly by SETSIZE shortcode. In modern sites you should avoid any hardcoded size images, you should use only css and your images should resized accordly by devices size. With SETSIZE e107 just set maximal sizes and crop functionality. Real size should be done by css. You can get this ignored and use real sizes by using auto/auto for width/heigh parameters. That path you see it's exactly about this. You can have the same uploaded image in different sizes.  Wordpress works similar way, you need to set what thumbnail size you want to use.  

- if you upload images to textarea field (for example news body), it uses default setting for news setting somewhere in admin area, I think it's 200px x 200px. Before closing media manager popup you could changed this in attributes tabs or after closing MM you change this via source code. Using images in tinymce is tricky itself without influence of e107. With responsive sizes it's nightmare, so you should use image fields instead of them.

On each other places it's done by templates except some exceptions. Or templates without set this you can change in your theme.

For lightbox effect you need to set prettyPhoto scripts globally and use correct css classes to get this effect. 

And it's good idea to add img-responsive class if you use bootstrap theme.

 

 

 

Please log in or register to answer this question.

Know someone who can answer? Share a link to this

Recent Activities

...

e107 Q&A is a Question and Answer platform where e107 users can ask questions themselves and answer each others questions. By doing so users can earn badges and points and become e107 experts.

This community platform is a valuable tool for sharing and gaining knowledge on e107. Go ahead and find out yourself!

Connect with us