Generate a thumbnail for image added to block
Permalink Browser Info Environment
Hi Jordan,
I'm at it again. Wreaking havoc with your awesome Designer Content Add-On. :D
I've got a block I created with a file field. The block is added to a child page, and I'm creating a custom template for the page_list block to grab all the children and get their data. I need to iterate through the custom block on each page and grab the individual attributes in order to be able to build two different HTML structures with titles, links, and different size thumbnails.
But... (you knew it was coming, didn't you?)... I can't seem to get access to the image from the block so that I can add an <img> tag into my HTML string. Here's what I've got so far:
But the <img> tag that's being generated doesn't have "src", "width" or "height" attributes... so something isn't working quite right.
Can you see anything glaringly n00b-ish that's tripping me up?
Thanks!
- John
I'm at it again. Wreaking havoc with your awesome Designer Content Add-On. :D
I've got a block I created with a file field. The block is added to a child page, and I'm creating a custom template for the page_list block to grab all the children and get their data. I need to iterate through the custom block on each page and grab the individual attributes in order to be able to build two different HTML structures with titles, links, and different size thumbnails.
But... (you knew it was coming, didn't you?)... I can't seem to get access to the image from the block so that I can add an <img> tag into my HTML string. Here's what I've got so far:
if (count($blocks) > 0) { foreach($blocks as $block) { $btc = $block->getInstance(); $name = $btc->field_2_textbox_text; $title = $btc->field_3_textbox_text; $img = $btc->field_4_image; $imgTag = $imgHelper->outputThumbnail($img, 130, 130, $return = true, $crop = true); $blockID = $block->getBlockID(); if($count == 0) { $thumbContent .= '<div class="thumbnail" style="display: none;"><a href="#' .$blockID .'" title="View Details">' . $imgTag . '</a><p><span class="name">' . $name . '</span><br /><span class="title">' . $title . '</span></p><div class="clearer"></div></div>'; }else { $thumbContent .= '<div class="thumbnail"><a href="#' .$blockID .'" title="View Details">' . $imgTag . '</a><p><span class="name">' . $name . '</span><br /><span class="title">' . $title . '</span></p><div class="clearer"></div></div>'; } } }
But the <img> tag that's being generated doesn't have "src", "width" or "height" attributes... so something isn't working quite right.
Can you see anything glaringly n00b-ish that's tripping me up?
Thanks!
- John
| Type: | Discussion |
|---|---|
| Status: | New |
AWESOME! Thanks so much, Jordan! You totally ROCK! This worked like a charm.
I posted this late last night, after spending a long time trying to figure it out while not properly caffeinated. ;) And, of course, as I was laying there falling asleep I had a thought: "Hey, Stupid! Why don't you look in the image block or slideshow block to see how C5 does it?!?! They have sort of similar behavior where you select an image from the File Manager". But taking a look at both of them this morning... WOW! Am I ever glad you had this answer!! :) My eyes started crossing as I was untangling what was going on in those blocks! LOL!
Seriously... thanks so much for the help (HELP? This was more than help... you gave the exact code needed!). It is GREATLY appreciated!
Cheers,
- John
I posted this late last night, after spending a long time trying to figure it out while not properly caffeinated. ;) And, of course, as I was laying there falling asleep I had a thought: "Hey, Stupid! Why don't you look in the image block or slideshow block to see how C5 does it?!?! They have sort of similar behavior where you select an image from the File Manager". But taking a look at both of them this morning... WOW! Am I ever glad you had this answer!! :) My eyes started crossing as I was untangling what was going on in those blocks! LOL!
Seriously... thanks so much for the help (HELP? This was more than help... you gave the exact code needed!). It is GREATLY appreciated!
Cheers,
- John
Short answer: Don't expect to ever understand anything by looking at the built-in block code.
Long answer: The built-in blocks are a terrible mess of spaghetti code. If I put on my "code archaeologist" hat, I guess that they were developed many years ago, when C5 was still a closed-source CMS (it was probably C1 or C2 back then). And in the intervening years, it just hasn't been worth anyone's trouble to re-visit them and clean them up -- because "if it ain't broke, don't fix it".
Since I work with designers so often, I consider my front-end code to be another "user interface" of sorts -- and I spend a lot of time and thought making sure it is easy to understand and work with by people who know HTML and CSS but are not super-proficient at programming. I don't think the programmers who worked on the original system back in the day had this in mind (because they didn't know they were going to eventually open-source it).
Because Designer Content is used by a lot of people, I have strived to make its code as clean as possible. I also have it on my todo list to clean up the code in several of the core blocks. I've already done so with Page List, next up are Autonav and Form. Maybe I'll get to Image and Slideshow and Search eventually.
Anywho, glad we got it solved. Please don't hesitate to ask more questions in the future -- you ask them well (because you get as specific as possible and show that you're putting in your own effort and not just expecting others to do your work for you).
Cheers,
Jordan
Long answer: The built-in blocks are a terrible mess of spaghetti code. If I put on my "code archaeologist" hat, I guess that they were developed many years ago, when C5 was still a closed-source CMS (it was probably C1 or C2 back then). And in the intervening years, it just hasn't been worth anyone's trouble to re-visit them and clean them up -- because "if it ain't broke, don't fix it".
Since I work with designers so often, I consider my front-end code to be another "user interface" of sorts -- and I spend a lot of time and thought making sure it is easy to understand and work with by people who know HTML and CSS but are not super-proficient at programming. I don't think the programmers who worked on the original system back in the day had this in mind (because they didn't know they were going to eventually open-source it).
Because Designer Content is used by a lot of people, I have strived to make its code as clean as possible. I also have it on my todo list to clean up the code in several of the core blocks. I've already done so with Page List, next up are Autonav and Form. Maybe I'll get to Image and Slideshow and Search eventually.
Anywho, glad we got it solved. Please don't hesitate to ask more questions in the future -- you ask them well (because you get as specific as possible and show that you're putting in your own effort and not just expecting others to do your work for you).
Cheers,
Jordan
Thanks for that explanation. I certainly understand the approach of "if it ain't broke, don't fix it" when it comes to a lot of the core code. Concrete5 has certainly come a long way from its bespoke origins. And I can't thank the gods enough for Franz's (?) decision to open source it! I love the improvements they've been making (I'd be using 5.5.x for this, but just feel more secure on 5.4.2.2... although I'm already so used to some of the 5.5 enhancements that I keep smacking myself in the forehead when I remember I can't do some things in 5.4! LOL!)
And I appreciate your comments on asking questions. Right now, I feel like such a leech on these forums... always asking questions and not being able to be much of a contributor. Only recently have I been able to chime in on any threads with any level of knowledge/certainty.
On the whole, I'm much more in the "designer" camp than "developer" (although I love a good challenge and consider myself a quick study). Valid XHTML and CSS? No problem. And I'm all proud of myself when I Frankenstein together jQuery plugins and sample code found by Googling a specific issue. But PHP is pretty new to me... as is Concrete5. So I'm much more befuddled by things since I'm on such unfamiliar territory. I'm glad that my questions are "specific" and demonstrate that I'm (usually) "putting in my own effort". I really DO try to find solutions on my own... by searching the forums, Googling, and (when necessary) trying to dissect any and all available code.
On the code front, YOUR add-ons and example code (i.e. the Page_List block re-write on Github) are, without a doubt, the EASIEST to understand. Your efforts for making the code as clean as possible and "another 'user interface' of sorts" definitely show. Well-commented. Logically-structured. And awesome-support! I've easily learned more about Concrete5 from you than from any other source!
So kudos (and big thanks)!
- John
And I appreciate your comments on asking questions. Right now, I feel like such a leech on these forums... always asking questions and not being able to be much of a contributor. Only recently have I been able to chime in on any threads with any level of knowledge/certainty.
On the whole, I'm much more in the "designer" camp than "developer" (although I love a good challenge and consider myself a quick study). Valid XHTML and CSS? No problem. And I'm all proud of myself when I Frankenstein together jQuery plugins and sample code found by Googling a specific issue. But PHP is pretty new to me... as is Concrete5. So I'm much more befuddled by things since I'm on such unfamiliar territory. I'm glad that my questions are "specific" and demonstrate that I'm (usually) "putting in my own effort". I really DO try to find solutions on my own... by searching the forums, Googling, and (when necessary) trying to dissect any and all available code.
On the code front, YOUR add-ons and example code (i.e. the Page_List block re-write on Github) are, without a doubt, the EASIEST to understand. Your efforts for making the code as clean as possible and "another 'user interface' of sorts" definitely show. Well-commented. Logically-structured. And awesome-support! I've easily learned more about Concrete5 from you than from any other source!
So kudos (and big thanks)!
- John
You're welcome! Great to hear your positive feedback, it's very motivating :)
Glad to hear it! I'm gunning for President of the Jordan Lev Fan Club... but I think I've got a LOT of competition. ;D
Seriously, though... PLEASE keep up the great work. It is IMMEASURABLY appreciated! I really gel with your whole vibe/ethos/approach-to-things and can't thank you enough for all you do for the C5 community!
Seriously, though... PLEASE keep up the great work. It is IMMEASURABLY appreciated! I really gel with your whole vibe/ethos/approach-to-things and can't thank you enough for all you do for the C5 community!
I'd just like to join arrestingdevelopment in thanking you and seconding his statement about learning more about Concrete5 from you and your plugins than practically any other source.
Thank you!
Thank you!
Thanks guys, appreciate the feedback. I'm planning/hoping to come out with even more helpful resources after the new year.
-Jordan
-Jordan
So change this line in your code:
...to this:
Thanks for wreaking havoc with Designer Content -- it's good for it to get a workout!
-Jordan