Browse Source

added support for markdown attr_lists to add classes to images

pull/2/head
rra 10 months ago
parent
commit
3d0a328839

+ 1
- 1
content/fundamentals/hardware.md View File

@@ -31,7 +31,7 @@ In general there are a few things you want to take in consideration when determi
31 31
 
32 32
 All computers use power, but some use more than others. The function of the server is to be on-line and on the network 24/7 ([although that is not always necessary](https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website.html)). That means power usage is an important consideration, not only because it will cost you money but also because it will have an environmental impact.
33 33
 
34
-![]({attach}images/dontturnoffthisisaserv.svg)
34
+![]({attach}images/dontturnoffthisisaserv.svg){: class="img-right"}
35 35
 
36 36
 You can get an approximation of power usage of a machine by looking at the power rating on the power supply or AC adapter. This value is usually expressed in Watt (or W). That number represents the theoretical *maximum* draw of that system, it might use less but not more. The laptop this article is written on is rated 65W but average consumption is about 10W
37 37
 

+ 4
- 4
content/lowtech/solarlowtech.md View File

@@ -39,21 +39,21 @@ You can find the source code for 'solar', the Pelican theme we developed [here](
39 39
 
40 40
 One of the main challenges was to reduce the overall size of the website. Particularly to try and reduce the size of each page to something less than 1MB . Since a large part of both the appeal and the weight of the magazine comes from the fact it is richly illustrated, this presented us with a particular challenge.
41 41
 
42
-![Image from the blog showing 19th century telephone switchboard operators, 159.5KB]({attach}images/international-switchboard.jpg)Image from the blog showing 20th century telephone switchboard operators([original source](https://commons.wikimedia.org/wiki/File:Bell_System_switchboard.jpg)), 159.5KB
42
+![Image from the blog showing 19th century telephone switchboard operators, 159.5KB]({attach}images/international-switchboard.jpg){: class="img-center"}Image from the blog showing 20th century telephone switchboard operators([original source](https://commons.wikimedia.org/wiki/File:Bell_System_switchboard.jpg)), 159.5KB
43 43
 
44 44
 In order to reduce the size of the images, without diminishing their role in the design and the blog itself, we reverted to a technique called dithering:
45 45
 
46
-![The same image but dithered with a 3 color palette]({attach}images/international-switchboard3.png)The same image but dithered with a 3 color palette, 36.5KB
46
+![The same image but dithered with a 3 color palette]({attach}images/international-switchboard3.png){: class="img-center"}The same image but dithered with a 3 color palette, 36.5KB
47 47
 
48 48
 This is a technique 'to create the illusion of "color depth" in images with a limited color palette'[^illusion]. It based on the print reproduction technique called [halftoning](https://en.wikipedia.org/wiki/Halftone). Dithering, or digital half-toning[^digitalhalftone], was widely used in video games and pixel art at a time when a limited amount of video memory constrained the available colors. In essence dithering relies on optical illusions to simulate more colors. These optical illusions are broken however by the distinct and visible patterns that the dithering algorithms generate.
49 49
 
50
-![Dithered with a six tone palette]({attach}images/international-switchboard6.png)Dithered with a six tone palette, 76KB
50
+![Dithered with a six tone palette]({attach}images/international-switchboard6.png){: class="img-center"}Dithered with a six tone palette, 76KB
51 51
 
52 52
 As a consequence most of the effort and literature on dithering is around limiting the 'banding' or visual artifacts by employing increasingly complex dithering algorithms[^dithering].
53 53
 
54 54
 Our design instead celebrates the visible patterns introduced by the technique, this to stress the fact that it is a 'different' website. Coincidentally, the 'Bayesian Ordered Dithering' algorithm that we use not only introduces these distinct visible patterns, but it is also quite a simple and fast algorithm.
55 55
 
56
-![Dithered with an eleven tone color palette]({attach}images/international-switchboard11.png)Dithered with an eleven tone palette, 110KB
56
+![Dithered with an eleven tone color palette]({attach}images/international-switchboard11.png){: class="img-center"}Dithered with an eleven tone palette, 110KB
57 57
 
58 58
 We chose dithering not only for the compression but also for the aesthetic and reading experience. Converting the images to grayscale and then dithering them allows us to scale them in a visually attractive way to 100% of the view port, despite their small sizes. This gives each article a visual consistency and provides the reader with pauses in the long articles.
59 59
 

+ 2
- 1
pelicanconf.py View File

@@ -41,7 +41,8 @@ MARKDOWN = {'extensions':
41 41
 	['markdown.extensions.codehilite',
42 42
 	'markdown.extensions.extra',
43 43
 	'markdown.extensions.smarty',
44
-	'markdown.extensions.toc'],
44
+	'markdown.extensions.toc',
45
+        'markdown.extensions.attr_list'],
45 46
 	'extension_configs':
46 47
 	{'markdown.extensions.toc':{
47 48
 		'title':'Table Of Contents'}

+ 17
- 2
themes/homebrewtheme/static/css/main.css View File

@@ -305,8 +305,23 @@ code {
305 305
 }
306 306
 
307 307
 .entry-content img{
308
-    max-height:100%;
309
-    max-width: 100%;
308
+    max-height:600px;
309
+    max-width: 30%;
310
+    float:left;
311
+    margin:2em;
312
+}
313
+
314
+img.img-center {
315
+	max-width: 100%;
316
+	float:none;
317
+}
318
+
319
+img.img-left {
320
+	float:left;
321
+}
322
+
323
+img.img-right {
324
+	float:right;
310 325
 }
311 326
 
312 327
 .entry-content ul{

Loading…
Cancel
Save