What’s below is a small picture. The words inside the screenshot can’t be displayed. Users may right-click on the picture and select “View Image”, if there’s a script that enables a magnified image to show up right after a user has clicked on the image, it’ll be more convenient for the user.
I tried following Clapper’s guide, but as I generate
the site using
rake, I got two errors. The first one was about CSS,
while the second one was about one of the two required Ruby gems.
(Namely, mini_magick and Erubis.)
For the first error, I got something like
'centered', and so I googled
octopress "Undefined mixin
'centered'". Using this query string, no match was returned.
Instead, Google performed a similar search using a query string
without the double quotes. Among the search results, I found an
article also written by Clapper.1 I’ve known that I also need to
from his GitHub repo.
For the second error, I’ve realised that I forgot to include those
Gemfile, because I lacked knowledge in Ruby, and the guide
didn’t mention that. In fact, adding the following two lines into
Gemfile solved the problem.
gem 'mini_magick' gem 'erubis'
I don’t know why. The plugin doesn’t work, but I can get
jQuery working here. The following script from Clapper doesn’t work
1 2 3 4 5 6
noConflict method disabled my button for hiding the sidebar on
the right hand side.
Anyways, I gave up trying this
plugin. Before trying it again more things, I think
I should have more knowledge in jQuery first.
To get things work, I played some dirty and little tricks on
plugins/img_popup.html.erb. Since some features of Octopress’s
codeblock are not working2, I just manually include
part of the code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
What I’ve actually done in the above code block is to replace
$. At that time, if I ran
rake generate, Octopress let me
pass. However, when I locally previewed the result, clicking on the
picture couldn’t trigger a popup window showing a larger picture.
I tried comparing the generated HTML source code of my site and that
of Clapper’s site unproductively. I decided to give up, and wrote a
paragraph on this. Then I removed the related files and sections of
code. Since I was running
rake preview, I pressed
expected to see a static picture. I was surprised to see two
pictures. The lower one was a static picture that I had seen for
numerous times during this test. The uppper one is smaller, and as I
clicked on it, a popup window showed up. This result amazed me. As a
result, I decided to grab back the files from Clapper’s GitHub repo,
and studied his Sass settings.
I re-worked the whole thing again, and tried adapting Clapper’s Sass
rules to mine, but I couldn’t manage to create the popup window
again. Then I tried to reduce the complexity of the relations of the
SCSS files by reducing the amount of files. I appended the following
lines of code to
sass/screen.scss. (You may refer to
my original file.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
I did something strange: while
rake preview was running, in my
sass/screen.scss, I commented the line
@import custom/mixins. One
would expect I got error due to the line
Although the Solarized theme was gone, the image popup window was
back. Without changing other lines of code, I repeated the process
for a few times, and discovered that if
@import custom/mixins was
gone, then the popup window was back. It was important for me
not to stop the
rake preview command. Otherwise, the command
generate would fail me. I wondered how these two lines could
coexist. I finally noticed that the
screen class was hidden due
display: none;! I commented that line and imported
sass/custom/_mixins.scss, then the two images are back!
This time, in order to find out useful information such as the class
name and the id of relevant HTML elements, I used Firefox to quickly
inspect the code. Finally, I found out that for pictures that
couldn’t trigger a popup window, it was inside a
<div> container of classes
However, it didn’t show up because of the line
display: none; inside
screen class. Looking at Clapper’s Sass settings again on his
GitHub repo, I eventually have a clue on the two SCSS code blocks in
Clapper’s blog post about his Octopress image popup plugin.
The true reason for my failure in creating the image popup window at
the beginning is on line 20 of the code block below: it should be
screen since it’s a user’s custom Sass rule for
the display on the web browser. (i.e. screen), and we want to hide
the static picture, which is for printing.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
In Clapper’s guide, the SCSS code block below the above one should be
sass/custom/_print.scss. Then, a new file
sass/print.scss is created.