image path gymnastics

28 views
Skip to first unread message

Rodney Price

unread,
Aug 31, 2016, 10:51:17 PM8/31/16
to nikola-discuss
I'm experimenting with nikola by running the demo site with an additional post, the reStructuredText demo file. The post renders fine (no sidebar, but I expect that's due to using Lanyon theme), except that I can't get it to find images without some path gymnastics. I put the images in a subdirectory of images, rest_demo. Here's what I added to the .rst demo file:

An image directive (also clickable -- a hyperlink reference):


.. image:: title.png


.. image:: ../title.png


.. image:: rest_demo/title.png


.. image:: ../rest_demo/title.png


.. image:: images/rest_demo/title.png


.. image:: ../images/rest_demo/title.png


.. image:: ../../images/rest_demo/title.png


Here's what nikola serve prints

127.0.0.1 - - [31/Aug/2016 20:12:51] code 404, message File not found
127.0.0.1 - - [31/Aug/2016 20:12:51] "GET /posts/restructuredtext-demo/biohazard.png HTTP/1.1" 404 -
127.0.0.1 - - [31/Aug/2016 20:12:51] code 404, message File not found
127.0.0.1 - - [31/Aug/2016 20:12:51] "GET /posts/restructuredtext-demo/title.png HTTP/1.1" 404 -
127.0.0.1 - - [31/Aug/2016 20:12:51] code 404, message File not found
127.0.0.1 - - [31/Aug/2016 20:12:51] "GET /posts/title.png HTTP/1.1" 404 -
127.0.0.1 - - [31/Aug/2016 20:12:51] code 404, message File not found
127.0.0.1 - - [31/Aug/2016 20:12:51] "GET /posts/restructuredtext-demo/rest_demo/title.png HTTP/1.1" 404 -
127.0.0.1 - - [31/Aug/2016 20:12:51] code 404, message File not found
127.0.0.1 - - [31/Aug/2016 20:12:51] "GET /posts/rest_demo/title.png HTTP/1.1" 404 -
127.0.0.1 - - [31/Aug/2016 20:12:51] code 404, message File not found
127.0.0.1 - - [31/Aug/2016 20:12:51] "GET /posts/images/rest_demo/title.png HTTP/1.1" 404 -
127.0.0.1 - - [31/Aug/2016 20:12:51] code 404, message File not found
127.0.0.1 - - [31/Aug/2016 20:12:51] "GET /posts/restructuredtext-demo/images/rest_demo/title.png HTTP/1.1" 404 -
127.0.0.1 - - [31/Aug/2016 20:12:51] "GET /images/rest_demo/title.png HTTP/1.1" 200 -

From my conf.py

IMAGE_FOLDERS = {'images': 'images'}
IMAGE_THUMBNAIL_SIZE
= 400

Images and thumbnails are getting copied over to output/images, including the rest_demo subdirectory and its contents.

Why doesn't nikola put links to output/images in the HTML? Why do I have to put in a path like ../../images/rest_demo/title.png to get to an image?

Thanks for your help,
-Rod

Gour

unread,
Sep 1, 2016, 3:40:47 AM9/1/16
to nikola-...@googlegroups.com
On Wed, 31 Aug 2016 19:51:17 -0700 (PDT)
Rodney Price <r...@thirdoption.info> wrote:

Hello Rodney,

> I'm experimenting with nikola

Great choice. ;)

Here is the snippet from my conf.py:

IMAGE_FOLDERS = {'blog': 'blog', 'images' : 'images'}


My tree looks as:

$ ll
total 104K
drwxr-xr-x 34 gour gour 12K Kol 29 21:29 blog/
drwxr-xr-x 7 gour gour 82 Kol 28 20:39 cache/
-rw-r--r-- 1 gour gour 48K Kol 29 10:30 conf.py
drwxr-xr-x 4 gour gour 53 Kol 27 11:06 files/
drwxr-xr-x 3 gour gour 18 Kol 27 08:07 galleries/
drwxr-xr-x 2 gour gour 141 Kol 29 20:47 images/
drwxr-xr-x 3 gour gour 41 Kol 27 08:07 listings/
drwxr-xr-x 14 gour gour 4,0K Kol 29 22:46 output/
drwxr-xr-x 4 gour gour 57 Kol 29 22:04 plugins/
drwxr-xr-x 2 gour gour 33 Kol 29 10:30 __pycache__/
-rw-r--r-- 1 gour gour 309 Kol 27 08:06 README.txt
drwxr-xr-x 2 gour gour 6 Kol 27 12:07 stories/
drwxr-xr-x 2 gour gour 23 Kol 27 08:07 templates/
drwxr-xr-x 4 gour gour 43 Kol 28 17:45 themes/


So, I usually put images in the folder named as post, e.g.:

blog/my-post.md
blog/my-post/image-for-my-post.jpg

and reference them as:

.. thumbnail:: image-for-my-post.jpg


For the images which are in my /root-of-nikola-site/images folder, I
reference them as:

.. thumbnail:: /images/some-image-from-images-folder.jpg


Hope it helps. ;)


Sincerely,
Gour

--
Just try to learn the truth by approaching a spiritual master.
Inquire from him submissively and render service unto him.
The self-realized souls can impart knowledge unto you because
they have seen the truth.


Abraham Varricatt

unread,
Sep 1, 2016, 6:00:15 AM9/1/16
to nikola-discuss
I've had issues with images too. The gotcha is that you need a leading '/' at the beginning.

eg:


And now to insert an image into my post,

.. image:: /images/heiji-detective-conan.jpg
   
:height: 300px
   
:width: 50px
   
:alt: My image of Hattori!
   
:align: center



My conf.py file has this,

IMAGE_FOLDERS = {'images': 'images'}

Which looks to be what you have too. 

Hope it helps,
Abraham V.

Rodney Price

unread,
Sep 4, 2016, 8:32:50 PM9/4/16
to nikola-discuss, go...@atmarama.com
Thank you!  I wouldn't have guessed.  It works now.
-Rod

Rodney Price

unread,
Sep 4, 2016, 8:36:02 PM9/4/16
to nikola-discuss, go...@atmarama.com
Thanks! It works now. And you've answered another question I didn't have to ask...
-Rod

On Thursday, September 1, 2016 at 1:40:47 AM UTC-6, Gour wrote:

Rodney Price

unread,
Sep 4, 2016, 8:41:51 PM9/4/16
to nikola-discuss, go...@atmarama.com
Can I suggest to the maintainers that the wording in conf.py is far from clear? Here is some alternative text that incorporates the answers above, and could be included instead of the current text:

#
# Folders containing images to be used in normal posts or pages.
# IMAGE_FOLDERS is a dictionary of the form { "source" : "destination" },
# where "source" is the folder containing the images to be published, and
# "destination" is the folder under OUTPUT_PATH containing the images
# copied to the site. Thumbnail images will be published there as well.

# To reference the images in your posts, include a leading slash in the
# path.  For example, if IMAGE_FOLDERS = { 'images" : 'images' }, write
#
#     .. image:: /images/example.png
#        :height: 300 px
#        :width: 50 px
#        :alt: My example image.
#        :align: center

# Images will be scaled down according to IMAGE_THUMBNAIL_SIZE and
# MAX_IMAGE_SIZE options, but will have to be referenced manually to
# be visible on the site (the thumbnail has ``.thumbnail`` added
# before the file extension).

-Rod

Abraham Varricatt

unread,
Sep 5, 2016, 10:19:50 AM9/5/16
to nikola-discuss, go...@atmarama.com
That's a nice idea! Am not an official contributor to the project, but made a pull request based off this,



Yours,
Abraham V.

Roberto Alsina

unread,
Sep 5, 2016, 10:31:08 AM9/5/16
to nikola-discuss, go...@atmarama.com
In reality, every time you specify a path to anything you need to specify it that same way, images are just the one people do all the time.

Let me think about it a little bit and I'll probably merge that.

--
You received this message because you are subscribed to the Google Groups "nikola-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nikola-discus...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages