murteza
/
blog.old
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
This repository has been archived on 2022-02-01. You can view files and clone it, but cannot push or open issues or pull requests.
blog.old/output/resizing-2500-photos.html

220 lines
12 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Resizing 2500 photos</title>
<link rel="stylesheet" href="https://murtezayesil.me/theme/css/main.css" />
<link rel="stylesheet" href="https://murtezayesil.me/theme/css/tooltip.css" />
<link href="https://murtezayesil.me/feeds/atom.xml" type="application/atom+xml" rel="alternate" title="Ali Murteza Yesil Atom Feed" />
<link href="https://murtezayesil.me/feeds/rss.xml" type="application/rss+xml" rel="alternate" title="Ali Murteza Yesil RSS Feed" />
<!-- This border added via BLACK_LIVES_MATTER toggle in site settings -->
<style>
body {
border-width: 5em ;
border-color: #000000 ;
border-style: none solid solid solid ; /* top border : none, right bottom left : solid */
}
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="index" class="home">
<!-- This banner added via BLACK_LIVES_MATTER toggle in site settings -->
<div style="background-color: black; padding: 1em; margin-bottom: .8em">
<h1 style="text-align: center; margin-bottom: 0em"><a href="https://blacklivesmatter.com/" style="color: #fce21b; font-size: 2em">Black Lives Matter</a></h1>
</div>
<header id="banner" class="body">
<h1><a href="https://murtezayesil.me/">Ali Murteza Yesil <strong>Blog</strong></a></h1>
<nav><ul>
<li><a href="https://murtezayesil.me/pages/about.html">About</a></li>
<li><a href="https://murtezayesil.me/pages/contact.html">Contact</a></li>
</ul>
<form id="search" action"#" onsubmit="javascript:window.open('https://duckduckgo.com/?q='+document.getElementById('keywords').value+'+site:https://murtezayesil.me');">
<input id="keywords" type="text" />
</form>
</nav>
<div id="submenu">
<ul>
<li><a href="https://murtezayesil.me/category/draft.html">draft</a></li>
<li><a href="https://murtezayesil.me/category/notes.html">Notes</a></li>
<li><a href="https://murtezayesil.me/category/personal.html">Personal</a></li>
<li class="active"><a href="https://murtezayesil.me/category/tech.html">Tech</a></li>
</ul>
<div>
</header><!-- /#banner -->
<section id="content" class="body">
<article>
<header>
<h1 class="entry-title">
<a href="https://murtezayesil.me/resizing-2500-photos.html" rel="bookmark"
title="Permalink to Resizing 2500 photos">Resizing 2500 photos</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Thu 13 August 2020</span>
<span>| in <a href="https://murtezayesil.me/category/tech.html">Tech</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/code.html">code</a><a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>18</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --> <p>I was asked to write a program to resize thousands of images which were gonna be uploaded to a website. Images had to be the same height for them to look organized in gallery. I remembered how I used <a href="https://imagemagick.org/">imagemagick</a> to write <a href="https://gitlab.com/murtezayesil/student/-/tree/master/sh/desktop-clock" title="use imagemagick, figlet and feh for tty-clock on wallpaper">desktop-clock</a>, immitate tty-clock on wallpaper. That experience helped me to design the program in my mind as we continue to speak on the phone.</p>
<div class="highlight"><pre><span></span><code>/‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾<span class="se">\ </span>
<span class="p">|</span> <span class="k">for</span> each image <span class="p">|</span>
<span class="p">|</span> <span class="k">do</span> resize to <span class="nv">height</span><span class="o">=</span><span class="m">800</span> <span class="p">|</span>
<span class="se">\_</span>__________________________/
O
o <span class="se">\_\_</span> _/_/
. <span class="se">\_</span>_/
<span class="o">(</span>oo<span class="o">)</span><span class="se">\_</span>______
<span class="o">(</span>__<span class="o">)</span><span class="se">\ </span> <span class="o">)</span><span class="se">\/\</span>
<span class="o">||</span>----w <span class="p">|</span>
<span class="o">||</span> <span class="o">||</span>
</code></pre></div>
<h1>This is a learning opportunity</h1>
<p>Since I don't have much of an experience on shell scripting, I was <a href="https://start.duckduckgo.com/" title="DuckDuckGo">Duck</a>ing everything. I learned to do few things during this task.</p>
<ol>
<li><a href="https://duckduckgo.com/?q=for+loop+shell+script" title="There are many tutorials">For loops in shell script</a></li>
<li>Getting <a href="https://stackoverflow.com/questions/2437452/how-to-get-the-list-of-files-in-a-directory-in-a-shell-script" title="I didn't know how to use asteriks 😅️">list of files</a></li>
<li>Correct syntax for <a href="https://imagemagick.org/script/convert.php" title="It ain't magick but it quiet is 😉️">resizing with ImageMagick</a></li>
</ol>
<p>After reading tutorials and looking at examples everything felt as simple as lego. I just needed to put them together. </p>
<p>Here is <code>image_shrinker.v0.1_alpha.sh</code> :</p>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
mkdir ../output
<span class="k">for</span> image in ./*
<span class="k">do</span>
convert <span class="nv">$image</span> -scale 1000000x800 ../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>This version has problems which I can't call "feature" 😁️ :</p>
<ol>
<li>Resolution is hard coded. Btw, only way to define resolution is in WIDTHxHEIGHT format AFAIK.</li>
<li>Script must be in same directory as images</li>
<li>PWD must point to the directory where script is</li>
</ol>
<h2>Adjustable resolution</h2>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
mkdir ../output
<span class="nv">WIDTH</span><span class="o">=</span><span class="nv">$1</span> <span class="p">;</span> <span class="nv">HEIGHT</span><span class="o">=</span><span class="nv">$2</span>
<span class="k">for</span> image in ./*
<span class="k">do</span>
convert <span class="nv">$image</span> -scale <span class="nv">$WIDTHx$HEIGHT</span> ../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>This fixes the hard coded resolution problem but new problem is that the user has to know that WIDTH and HEIGHT must be given. I fix that by showing correct syntax to the user and then exiting :</p>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
<span class="k">if</span> <span class="o">[</span> <span class="nv">$#</span> -lt <span class="m">2</span> <span class="o">]</span>
<span class="k">then</span>
<span class="nb">echo</span> <span class="s2">&quot;USAGE:&quot;</span>
<span class="nb">echo</span> -e <span class="s2">&quot;\t\$IMAGE_DIRECTORY/image_shrinker.sh WIDTH HEIGHT&quot;</span>
<span class="nb">exit</span> <span class="m">1</span>
<span class="k">fi</span>
<span class="nv">WIDTH</span><span class="o">=</span><span class="nv">$1</span> <span class="p">;</span> <span class="nv">HEIGHT</span><span class="o">=</span><span class="nv">$2</span>
mkdir ../output
<span class="k">for</span> image in *
<span class="k">do</span>
convert <span class="nv">$image</span> -scale <span class="nv">$Resolution</span> ../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>Here is some other attempt to make code a bit more flexible in terms of where images can be and where output can go. Actually no but that is what I was going for 😜️</p>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
<span class="nv">DIR</span><span class="o">=</span><span class="sb">`</span><span class="nb">pwd</span><span class="sb">`</span>
<span class="k">for</span> image in ./*.*
<span class="k">do</span>
<span class="c1"># Below code will scale images to 800px height without breaking aspect ratio</span>
convert <span class="nv">$DIR</span>/<span class="nv">$image</span> -scale 10000x800 -write <span class="nv">$DIR</span>/../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>It is hard to ask for help (especially after torturing with my code) but if you would like to give me feedback and advice, reply to toot of this post.</p>
</div><!-- /.entry-content -->
<!-- #100DaysToOffload message -->
<p>Day <strong>18</strong> of <a href="https://100daystooffload.com/" title="click to read about the challenge">#100DaysToOffload</a></p>
<!-- Comments -->
<hr>
<h2>Comments</h2>
<p>Toot on <a href="https://fosstodon.org/@murtezayesil/104681372709677657">this thread</a> to comment. This blog is a static site. Comments won't appear here.</p>
</article>
</section>
<section id="extras" class="body">
<div class="blogroll">
<h2>blogroll</h2>
<ul>
<li><a href="https://kevq.uk">Kev Quirk</a></li>
<li><a href="https://mikestone.me">Mike Stone</a></li>
<li><a href="https://yarmo.eu/">Yarmo Mackenbach</a></li>
</ul>
</div><!-- /.blogroll -->
<div class="social">
<h2>social</h2>
<ul>
<li><a href="https://murtezayesil.me/feeds/atom.xml" type="application/atom+xml" rel="alternate">atom feed</a></li>
<li><a href="https://murtezayesil.me/feeds/rss.xml" type="application/rss+xml" rel="alternate">rss feed</a></li>
<li><a href="https://fosstodon.org/@murtezayesil" rel="me">Fostodon</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->
<footer id="contentinfo" class="body">
<p>Powered by <a href="http://getpelican.com/">Pelican</a>. Theme <a href="https://github.com/blueicefield/pelican-blueidea/">blueidea</a>, inspired by the default theme.</p>
</footer><!-- /#contentinfo -->
<!-- IndieWeb Profile -->
<!-- ToDo : Make IndieWeb Profile auto generating according to site preferences -->
<!-- This profile is created by following https://kevq.uk/how-to-create-an-indieweb-profile/ blog post. Thanks to Kev Quirk -->
<section style="display: none;" class="h-card">
<!-- About me -->
<span class="p-name">Ali Murteza Yesil</span>
<span class="p-note">I'm a student, privacy advocate and SysAdmin wannabe. I was born in Turkey but I live abroad.</span>
<!-- Profile picture -->
<img class="u-photo" src="https://murtezayesil.me/images/avatar_polygon_128x128.png"/>
<!-- My location -->
<!-- <span class="p-locality">City, Country or Country</span> -->
<!-- Links -->
<a class="u-url u-uid" href="https://murtezayesil.me"></a>
<!-- Mail Template <a class="u-email" rel="me" href="mailto:USERNAME@SERVICEPROVIDER"></a> -->
<a class="u-url" rel="me" href="https://fosstodon.org/@murtezayesil"></a>
<!-- Twitter Example <a class="u-url" rel="me" href="https://twitter.com/USERNAME"></a> -->
<!-- Template <a class="u-url" rel="me" href="https://URL"></a> -->
<!-- Categories -->
<span class="p-category">Blogging</span>
<span class="p-category">Open Source Software</span>
<span class="p-category">Privacy</span>
</section>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink