Comments for page "Image Box"

Question

Mon, 24 Oct 2016 21:06:39 +0000

Doesn't the SCP wiki have its own version of this, too? i think it was this:

[[include component:image-block name=THE NAME OF YOUR IMAGE FILE| caption=THE TEXT YOU WANT SHOWN UNDERNEATH YOUR IMAGE| width=300px ]]

I'm not sure if it works or not, or at least, works as well as this does, but I would assume that it does, since it seems to work for most people, though i honestly prefer your version of the image box.

Updated code to use Divs and not a table

Sat, 11 Jul 2015 18:42:44 +0000

It would be nice to have the option of using divs instead of a table to display this code.

(no title)

Mon, 26 Jan 2015 12:54:19 +0000

On "the new one", you remove the link with "link=none": http://tarm.wikidot.com/bs:image-box-remove-link

(no title)

Mon, 26 Jan 2015 10:29:50 +0000

I found on your page the line:

Wikidot recommends Flickr.

That is really new for me after 9 years with wikidot :)

( I never used Flickr )

(no title)

Mon, 26 Jan 2015 09:12:55 +0000

I found on your page http://rokonuxa-blog.wikidot.com/main:gallery this image.
http://rokonuxa-blog.wdfiles.com/local--files/main%3Agallery/Castlevania_44_12617.jpg

What does not work ?

(no title)

Mon, 26 Jan 2015 09:09:54 +0000

Better than the new one. That one did not allow me to remove the link.

Where have you found this "That one" ?

On which page ?

(no title)

Mon, 26 Jan 2015 09:07:21 +0000

Better than the new one. That one did not allow me to remove the link.

They both default to a page, which doesnt have the image.
http://rokonuxa-blog.wikidot.com/castlevania-44-12617-jpg
that is an issue, which you may want to look into. Otherwise, great!

Re: kind of "Gallery" ?

Wed, 26 Nov 2014 12:13:50 +0000

Thanks again! Putting a semicolon for width worked for making it original size. :) Changing the style didn't fix the captions though. :( Oh well, I'll live. I don't want to bug you anymore. XD

kind of "Gallery" ?

Wed, 26 Nov 2014 10:06:09 +0000

if you want it more like a gallery than there are different solutions if there are more images available and to show:
http://community.wikidot.com/forum/t-1056180?from=activities ( slideshow)
http://community-playground.wikidot.com/ Community Playground with
http://community-playground.wikidot.com/gallery-central-storage-area-for-graphics-pictures
http://community-playground.wikidot.com/gallery-with-external-images Gallery with external images
http://community-playground.wikidot.com/pictures-with-footnotes Pictures with footnotes.

Re: Idea - with width + height!

Wed, 26 Nov 2014 09:36:32 +0000

The reason why the caption - text is "centered" lies in the code of the CELL styling:

[[cell style="text-align: center; width: {$width}; {$style}" class="image-box-caption"]] [!-- {$caption} --]@@@@{$caption}

try to change the | style=text-align: left; … could be the new style overwrites the forst one

Idea - with width + height!

Wed, 26 Nov 2014 09:29:47 +0000

Any way to have the image automatically display at its original width, rather than setting your own or defaulting to 195?

Try for image - original settings:
| width=;
try for high settings:
| width=;" height="100px;" ( but the image bx is wider because f the text..

try for width + high settings:
| width=200px;" height="100px;" ( but the image bx is wider because f the text..

(no title)

Wed, 26 Nov 2014 09:22:34 +0000

3 Pictures:
1. float=right
2. float=right,
3. float=clear,right
should put it in this way ( theoretically )

Yeah, I tried that, it doesn't work, if the first image is the same or greater height than the next one, then the next image wraps too… XD That's why I asked. But no matter. For now, I'll just keep them unwrapped and on their own lines. I have no idea how to do that other stuff I'm afraid. XD

One last thing (for now) — I've noticed that if I set my own width for an image, instead of leaving it blank, the caption will insist on displaying in one line (however much that may widen the box past the image) instead of line breaking when it gets to the edges the way it does if I leave width blank. :/

Caption "Style":

Wed, 26 Nov 2014 09:17:09 +0000

Caption -style: as it is written and explained in the page above:

The captions automatically come with a smaller font setting and italic styling. You can omit those by adding the following variable to your code:

|style=;

Standard ( default ) is style=font-size: 80%; font-style: italic;

(no title)

Wed, 26 Nov 2014 09:10:24 +0000

but now I don't know how to put two or three on one line and have it look relatively neat without making a gallery

3 Pictures:
1. float=right
2. float=right,
3. float=clear,right
should put it in this way ( theoretically )

Any way to have the image automatically display at its original width, rather than setting your own or defaulting to 195?

I have no idea … but think you have to create your "own" include for such kind of "snippet" - without the width parameter ( and the default of 195px )

Or will I just have to enter their original widths manually?

With this original snippet there is no other chance.. but you can copy the 2 snippets (includes) codes to your site and use it as a personal variant wthout the widthm but with hight instead… ( or build a 3. include wihtout both arguments..

(no title)

Wed, 26 Nov 2014 08:51:35 +0000

Thanks! Getting rid of the wrapping also solved the problem of all the images trying to smoosh on one line…but now I don't know how to put two or three on one line and have it look relatively neat without making a gallery…I miss Wikispaces and its WYSIWYG editor. :< This is so complicated just for some captions and side-by-side images! XD

OH. I keep thinking of questions. XD Any way to have the image automatically display at its original width, rather than setting your own or defaulting to 195? Or will I just have to enter their original widths manually? XD And is it possible to use a height parameter with or instead of the width one?

(no title)

Wed, 26 Nov 2014 08:28:20 +0000

You have to play with the float= parameters.. float=left means the page renderer tries to "wrap" the image on the eft side with the following text ( or images or other "div" 's ).. UNTIL there is a "float=clear,left" or "float=clear,both"

or with "float=right" and to close it with "float=clear,right"
The general line ~~~~~ has the same result as a
[[div style="float:clear,both"]] followed by the end line
[[/div]]
but this shifts in most cases the following content under the nav.side end…

Easiest way is to use the tables like in the http://try.wikidot.com/foster:image-csi example - but without all the CSS codings.. with such tables you can decide manually where the images land on the page … and the text around it or where ever..

edit:
Forgot to notice - there is also a standard float=auto behind all the codings available.. no idea what this renders than.. I used it in my example..

(no title)

Wed, 26 Nov 2014 08:14:26 +0000

How does one force a line break between images, so that the page doesn't try to bunch them all up on one line? And is there a way to make it so the text doesn't wrap?

(no title)

Wed, 26 Nov 2014 08:12:42 +0000

I don't know how to do anything with CSS. >.> Thanks for showing me these examples though!

(no title)

Wed, 26 Nov 2014 07:31:45 +0000

Have a look on one of my pages: http://mc-stories.wikidot.com/wiki:jeremys-cave , where I have changed the headings on

"The entry" - 3. image to Non-Bold ( with heading=**Up the stairs (back)**
"1. bridge" to Italic with heading=//First View the bridge//
"The cave" - Left view to underline with heading=__First View into the cave-left__

And a "link" inside the** caption** plus

"The Entry" - 3. image to Bold ( but italic).
* "The cave" - Left view to underline ( but italic )
Non-Italic is here not working with the trick of the double // at end and start… here you have to use the CSS classes for the caption - as explained in the snippets. But this changes for a page all the caption formats..

(no title)

Wed, 26 Nov 2014 06:21:28 +0000

Is there a way to format the captions, and if so, how? (Things like making certain parts italic or non-italic, or bold, or links, etc.)

Re: No Link

Fri, 15 Feb 2013 19:01:06 +0000

You are awesome. Thank you.

Re: No Link

Thu, 10 Jan 2013 15:15:06 +0000

Now there is ;)

Putting |link=@@ in the code will do the trick.

No Link

Wed, 09 Jan 2013 20:03:59 +0000

I love this snippet. It's incredibly useful.

Is there a way to use it without the image being a link at all?

(no title)

Tue, 07 Aug 2012 00:50:28 +0000

When I click on a local image, I get taken to a "page not found" error. I see above that you can work around the issue by manually specifying a link to the image's address under the local—files namespace, but really, shouldn't that be automatic anyways?

Minor Improvement

Mon, 19 Sep 2011 00:17:30 +0000

You may now use the title attribute. I don't know why I didn't set it before…

Solved!

Fri, 17 Jun 2011 06:16:26 +0000

Thanks Rob, I meant to write back earlier to say that your comment put me on the right track with the image selection and I was able to find and use .svg images instead that didn't have both the .png and .svg in their file name as can be found with some WIkimedia Commons images (for some reason)

Regards

Ye Olde

(no title)

Fri, 27 May 2011 20:04:37 +0000

they are Scalable Vector Graphic png images

There is no such thing, they are either .svg or .png images. I suspect the problem is the .svg file. This came up a while back I'll see what I can find.

Re: Problem with a Thumbnail image default when page first renders with this snippet.

Fri, 27 May 2011 19:08:20 +0000

Hey Ye Olde,

Could you link to the site/page please?

No way for me to figure out a solution if I can't see the problem.

- Shane

Additional Info to my Thumbnail render issue

Fri, 27 May 2011 06:25:07 +0000

I should mention that the png images I am using are creative commons maps that I got off the web and which end in a file name .svg.png so that means they are Scalable Vector Graphic png images.

Could the inherent properties of the svg.png files be causing the thumnail default?

The images are 500px in size by the way. Hope this additional info helps with a clearer background to my problem.

Cheers - Ye Olde

Problem with a Thumbnail image default when page first renders with this snippet.

Fri, 27 May 2011 06:12:08 +0000

I had a similar situation to 'Brendan Simon's' issue about using PNG images with this snippet. The link advice that was provided was great and it works well, so thanks to 'Ed Johnson' for that.

However, I have an additional problem in that every time I visit the page where I have used this image snippet with a png image it always displays as a thumbnail first and I have to click on the image and then click back button on the browser to get the image to render itself to its proper size.

Is there any code I can use to get the page to render page to the full size image first time the page is displayed rather than just get a thumbnail? I tried lots of variances such as size ="large" after the image file name, but nothing seems to fix this defaulting to the thumbnail issue I am having when someone first visits the page.

(no title)

Sat, 01 Jan 2011 12:31:07 +0000

Brilliant, Thank you for the superbly fast response.
Jonathan

Re: newline after using float=left

Sat, 01 Jan 2011 11:24:46 +0000

All you need to do is replace the left with right:

[[div style="clear:right;"]] [[/div]]

Alternatively, you could use the following (it's the same thing):

~~~~>

This will work as long as your second image box is floated to the right.

Re: newline after using float=left

Sat, 01 Jan 2011 10:41:03 +0000

If I use the "~~~~" or
div style="clear:left;"
/div
to get a new line, I find that the new line starts in-line with the bottom of the information that is in the Side Bar. This creates a large space of nothing on the page which is most annoying (see http://javeagreenbowls.wikidot.com/sandbox) - is there any way around this?
Jonathan

Re: how to "expand" local images

Thu, 09 Sep 2010 07:02:32 +0000

Thank you. That worked nicely :)
Not sure how I missed that link field earlier

Re: how to "expand" local images

Thu, 09 Sep 2010 03:00:45 +0000

Sorry, I should have refreshed my memory on this thread by reading from the top! I haven't used this snippet, but I see that you can add a link option as a parameter. I just did some testing and if you add the link parameter and structure the link like this it should work.

[[include :snippets:image |image=your-image.jpg |float=left |heading=Your Heading |caption=Your Caption |link=/local--files/category:pagename/your-image.jpg ]]

category:pagename is the current page and your-image.jpg is the image file uploaded to the current page.

Does that help?

Re: how to "expand" local images

Thu, 09 Sep 2010 02:13:18 +0000

Here is the code I am using. It is same as Nebula example code on this page, except that I have removed the 'http:///>' portion and just included the filename.

[[include :snippets:image |image=sureanalysis-user-edit.png |float=left |heading=User Edit |caption=User Edit dialog ]]

I can see from the html ouput (below) that the 'problem' is the and that wikidot will interpret that as a page name.

So is there a way to get the correct href for a local file ??

Re: how to "expand" local images

Thu, 09 Sep 2010 01:13:07 +0000

It would be helpful if you set permissions so we could view the source of your page or if you posted the source you are using. I looked at one of your pages from your recent activity and viewed the HTML source. This is what is being rendered:

<td class="image-box-image" style="width:195px; text-align:center;"> <a class="newpage" href="/">a><a href="/sureanalysis-user-edit.png"> <img src="/local--files/sureanalysis/sureanalysis-user-edit.png" style="border:1px solid #999;" alt="Image Unavailable" width="195px" class="image" />a>td>

You've got an empty link going to "/" and the is what's triggering the page does not exist problem. That link is not constructed properly. To display an image in a table cell, all you have to so is use (for example) wiki syntax like this:

[[image sureanalysis-user-edit.png size="small"]]

This will display a small version of your image and create proper links to the full sized image. If I'm missing the mark on what you're trying to do, post the relevant source from the page so we can take a closer look.

-Ed

how to "expand" local images

Thu, 09 Sep 2010 00:49:11 +0000

I have uploaded some .png images to my page (e.g. screenshot1.png) and have set the image field accordingly.

|image=screenshot1.png

This works great, but if I click on the image to view the full size image, wikidot thinks the url is a page that doesn't exist and asks me if I want to create it.

Is there an easy work around for this ??

(no title)

Mon, 30 Aug 2010 18:03:33 +0000

I wanted 4 images side by side.

Ah, of course. I was thinking in terms of a single image.

Re: newline after using float=left

Mon, 30 Aug 2010 12:11:46 +0000

To clear the float, after the last image code and before the text you can add a div as follows:

[[div style="clear:left;"]] [[/div]]

Re: newline after using float=left

Mon, 30 Aug 2010 11:51:52 +0000

I wanted 4 images side by side. Without any float setting, the images aligned vertically as each image centered itself across the entire page width. Setting float=left solved that problem beautifully, but the following text also floated. Maybe I should have used a different approach (e.g. using some kind of horizontal div or table columns ??)

Re: newline after using float=left

Mon, 30 Aug 2010 11:32:12 +0000

Why bother floating the image if you don't want any content to wrap around it? You can clear floats by using the Wikidot syntax:

[[f

 
 Your div block solution works well too. You could try clear: both; or clear: left; instead of setting the width to 100% in your style statement. Pesky disclaimer: Depending on your site's theme, clearing floats can sometimes wreak havoc on your page layout by pushing all of the content below your sidebar.
 -Ed



newline after using float=left
Mon, 30 Aug 2010 06:39:30 +0000

						 I managed to find a solution by enclosing in a [[div]] block. I had to specify a width of 100%, as a standard (no style parameter) [[div]] statement didn't seem to work for some reason.
  …
  
				 	


(no title)
Mon, 30 Aug 2010 06:24:23 +0000

						 How do I get a new line or new paragraph after the image when using float=left ??