♥John W Posted March 8, 2017 Share Posted March 8, 2017 So, I'm helping a friend by updating his old html site to Bootstrap, but the old site had tons of old table code that was very messy. There's not a lot of pages so I was able to just pull out the text on most files and format it out. I made a general template that files called and then outputed revelant content. The real messy one was the gallery set up which was made with an old version of Photoshop. So, I worked on a pattern to extract what I wanted using RegexBuddy (a tool I love) and with a little bit of work I had perfect output for all the pics I needed to capture and this is how I did it. First a sample of the html code <TR> <TD align="center"> <A href="pages/Acropora_garden6.htm"><IMG src="thumbnails/Acropora_garden6.jpg" border="0" alt=Acropora_garden6></A> </TD> <TD align="center"> <A href="pages/Acropora_garden7.htm"><IMG src="thumbnails/Acropora_garden7.jpg" border="0" alt=Acropora_garden7></A> </TD> <TD align="center"> <A href="pages/blue_maxima_clam.htm"><IMG src="thumbnails/blue_maxima_clam.jpg" border="0" alt=blue_maxima_clam></A> </TD> <TD align="center"> <A href="pages/blue_prostrata.htm"><IMG src="thumbnails/blue_prostrata.jpg" border="0" alt=blue_prostrata></A> </TD> <TD align="center"> <A href="pages/blue_tort.htm"><IMG src="thumbnails/blue_tort.jpg" border="0" alt=blue_tort></A> </TD> </TR> <TR> <TD align="center" valign="top"> <A href = "pages/Acropora_garden6.htm"><FONT size="3" face="Arial" >Acropora_garden6...</FONT></A> <FONT size="3" face="Arial" ></FONT> </TD> <TD align="center" valign="top"> <A href = "pages/Acropora_garden7.htm"><FONT size="3" face="Arial" >Acropora_garden7...</FONT></A> <FONT size="3" face="Arial" ></FONT> </TD> <TD align="center" valign="top"> <A href = "pages/blue_maxima_clam.htm"><FONT size="3" face="Arial" >blue_maxima_clam...</FONT></A> <FONT size="3" face="Arial" ></FONT> </TD> <TD align="center" valign="top"> <A href = "pages/blue_prostrata.htm"><FONT size="3" face="Arial" >blue_prostrata.jpg</FONT></A> <FONT size="3" face="Arial" ></FONT> </TD> <TD align="center" valign="top"> <A href = "pages/blue_tort.htm"><FONT size="3" face="Arial" >blue_tort.jpg</FONT></A> <FONT size="3" face="Arial" ></FONT> </TD> </TR> Using this regex to pull out the pic name and alt pages/([\w%\-]+).*alt=([\w\s\-]+) I was able to generate all the lines like this with the bootstrap formating and I just had to tell someone :) After I cleaned up the alt info to be more presentable. <div class="col-md-3 col-sm-4 col-xs-6 thumb"> <a class="thumbnail equal-height" href="gallery/images/ORA_chips_acropora.jpg"> <img class="img-responsive" src="gallery/thumbnails/ORA_chips_acropora.jpg" alt="ORA_chips_acropora"> <p class="text-center text-capitalize">ORA_chips_acropora</p> </a> </div> <div class="col-md-3 col-sm-4 col-xs-6 thumb"> <a class="thumbnail equal-height" href="gallery/images/ORA_marshall_island_acro.jpg"> <img class="img-responsive" src="gallery/thumbnails/ORA_marshall_island_acro.jpg" alt="ORA_marshall_island_acro"> <p class="text-center text-capitalize">ORA_marshall_island_acro</p> </a> </div> <div class="col-md-3 col-sm-4 col-xs-6 thumb"> <a class="thumbnail equal-height" href="gallery/images/ORA_pillowtop.jpg"> <img class="img-responsive" src="gallery/thumbnails/ORA_pillowtop.jpg" alt="ORA_pillowtop"> <p class="text-center text-capitalize">ORA_pillowtop</p> </a> </div> <div class="col-md-3 col-sm-4 col-xs-6 thumb"> <a class="thumbnail equal-height" href="gallery/images/parvona_coral.jpg"> <img class="img-responsive" src="gallery/thumbnails/parvona_coral.jpg" alt="parvona_coral"> <p class="text-center text-capitalize">parvona_coral</p> </a> </div> I'm not really a dog. Link to comment Share on other sites More sharing options...
Dan Cole Posted March 9, 2017 Share Posted March 9, 2017 Very nice John....now that's a handy tool and skill to have. Well done... Dan Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
♥John W Posted March 9, 2017 Author Share Posted March 9, 2017 I just realized I forgot to post one of the steps. After having the regex done, I use the following repacement text using the captured information. You see the $1 and $2 being inserted into the new html and for each item captured RegexBuddy creates the html I posted a snippet of above. I can just copy and past the new code. RegexBuddy is really pretty cool and it can run through folders replacing code changes very quickly. It also helps build and test regex, which is why I orignally started playing with it. It can also take a regex you've tested and create php code for it using say, preg_replace. <div class="col-md-3 col-sm-4 col-xs-6 thumb"> <a class="thumbnail equal-height" href="gallery/images/$1.jpg"> <img class="img-responsive" src="gallery/thumbnails/$1.jpg" alt="$2"> <p class="text-center text-capitalize">$2</p> </a> </div> I'm not really a dog. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.